Typora(Markdownエディタ)の紹介⑥ ～クラス図を作成する～

 

こんばんは。ひっくです。

今回も、MarkdownエディタのTyporaを取り扱います。

Typora関連記事

→第1回 はこちら Typora(Markdownエディタ)の紹介①

→第2回 はこちら Typora(Markdownエディタ)の紹介②　～画像の保存先を変更する～

→第3回 はこちら Typora(Markdownエディタ)の紹介③　～数式を編集する～

→第4回 はこちら Typora(Markdownエディタ)の紹介④　～シーケンス図を作成する～

→第5回 はこちら Typora(Markdownエディタ)の紹介⑤　～フロー図を作成する～

→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

 

今回は図式(クラス図)の記載方法を紹介します。

Typora バージョン

今回確認するTyporaバージョンは、「0.11.18(beta)」となります。

 

拡張機能の有効化

※ 第4回(シーケンス図の作成) と同内容となります。既に有効化されている方は読み飛ばしてください。

 

Markdownで図を作成できる設定となっているか確認します。

設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。

 

以下赤枠の設定がチェックONになっていればOKです。

 

クラス図の記法 (mermaid.js)

Typoraでは「mermaid.js」を使用してクラス図を作成することができます。

以下にクラス図を作成する方法を紹介します。

 

1. バッククォート「`」× 3 を記載した後、続けて「mermaid」と記載します。

    

   【選択後】のカーソル表示部分に、「mermaid」の構文を使用して作図していきます。

   シーケンス図を作成する場合、「classDiagram」とまず記載し、

   続けてクラス図の要素を記載していきます。

   作図内容は、「空のダイアグラム」と表示されている箇所に表示されます。

   • 【入力時】

     

   • 【選択後】

     

    

2. 以下は作図した際の記載例です。

   入力欄には、以下のような記載をしています。

   classDiagram
   class 顧客 {
    	#BigDecimal 顧客ID
    	#String 氏名
    	#String 住所
    	#Integer 年齢
       +登録() bool
    	+削除()
    	+削除(顧客ID)
   }
   
   class 顧客A~顧客~ {
   	-BigDecimal 株主ID
    	-List~BankAccount~ 登録銀行口座
       +登録()
    	+削除()
    	+削除(株主ID)
   }
   
   class BankAccount{
       +String owner
       +BigDecimal balance
       +deposit(amount) bool
       +withdraw(amount) int
   }
   
   顧客 <|-- 顧客A
   

   構文の詳細は mermaid.js公式 クラス図 で確認可能ですが、以下で簡単に紹介します。

   作成順番が逆になっても表示は問題なくされますが、以下手順で作成すると

   分かりやすいのではないかと思います。

    

   ① クラスを定義する

   「class クラス名 { メンバ変数・メソッドを定義 }」

   {} 内に可視性(先頭の+表示等)や型、変数名・メソッド名・戻り値等の情報を定義します。

   ※メソッドの戻り値は「メソッド名() 半角SP 型」構文で表現可能ですが、

   メソッド名を日本語表記にするとTyporaでは表示されないようでした。

    

   ② クラス間の関連を定義する

   「classA クラス間関連性 classB」

   ①で定義したクラス間の関連を、関連性の表記に従い定義します。

   UMLの表記と多少違う(継承が△を使用していない等)ところもあるので、

   必要に応じて注記しておきましょう。

   %%(例)
   classDiagram
   classA <|-- classB : 継承
   classC *-- classD : コンポジション
   classE o-- classF : 集約
   classG <-- classH : 関連
   classI -- classJ : リンク(実線)
   classK <.. classL : 依存
   classM <|.. classN : 実現
   classO .. classP : リンク(破線)
   

   ※関連性の表記は以下の通り

   種別	説明
   < | --	継承
   *--	コンポジション
   o--	集約
   -->	関連
   --	リンク（実線）
   ..>	依存
   .. | >	実現
   ..	リンク（破線）

    

   ③ 多重度を設定する

   「classA ”1” クラス間関連性 "*" classB」

   クラスとクラス間関連性の間に、「””」で囲んだ多重度表記を記載します。

   %%(例)
   classDiagram
       Customer "1" --> "*" Ticket
       Student "1" --> "1..*" Course
       Galaxy --> "*" Star : Contains
   

   ※多重度の表記は以下の通り(必要に応じて任意の数値に変更する)

   種別	説明
   1	1
   0..1	0または1
   1..*	1以上
   *	複数

 

まとめ

Typoraで図式(クラス図)を作図する方法について、今回は紹介しました。

基本的なクラス図も簡単に作成することはできますので、必要に応じて作成してみてはいかがでしょうか。

設計段階の考察で必要なクラス図(簡易的なレベル)を作成する場合が、利用頻度としては一番多いかもしれません。

興味を持った方は是非一度作成してみてください。

 

今回はこのへんで。ではまた！