目的

mermaidでフローチャートを描く時のルールを描く

※mermaid.jsの公式に記載されているフローチャートを書く方法を紹介する。
※mermaidについて知りたい方はこちら
※基本的な記入方法を知りたい方はこちら
※出力方法を知りたい方はこちら

抑えるポイント

• フローチャートの作業要素(下記画像の青丸で囲った部分)をノードと呼ぶ
  
  

最初に描く図の種類と方向を宣言する。

• フローチャートの場合はgraphと宣言し、半角スペースを空けて描く方向を英語2文字で宣言する。

• 上から下方向に向かって書くフローチャートの場合はgraph TBかgraph TD
  
  

• 下から上方向に向かって書くフローチャートの場合はgraph BT
  
  

• 右から左方向に向かって書くフローチャートの場合はgraph RL
  
  

• 左から右方向に向かって書くフローチャートの場合はgraph LR
  
  

書き方の例

基本

1. ノードの作成
   下記の様にすることでAという名前のノードを作成し表示する。

   graph LR
       A
   

   

2. ノードに文字を格納
   下記の様にすることでAノードの中にテキスト「おはよう」を入れることができる。
   
   ※ノードの特徴・・・

   • 入るテキストを指定したとき→指定されたテキストが図に表示される。
   • 入るテキストが指定されてないとき→ノードの名前が図に表示される。
     ※ノードに文字を入れるときはダブルクオートで囲むことを心がけよう

   graph LR
       A["おはよう"]
   

   

ノードの見た目

1. ノードの角を角ばらせる
   下記の様にすることでノードの四隅が角ばる

   graph LR
       A["おはよう"]
   

   

2. ノードの角を丸める
   下記の様にすることでノードの四隅が丸まる

   graph LR
       A("おはよう")
   

   

3. ノードを丸める
   下記の様にすることでノードが丸くなる

   graph LR
       A(("おはよう"))
   

   

4. ノードを左右非対称にする
   下記の様にすることでノードが左右非対称の形になる

   graph LR
       A>"おはよう"]
   

   

5. ノードをひし形にする
   下記の様にすることでノードがひし形になる

   graph LR
       A{"おはよう"}
   

   

ノードを繋ぐ

1. ノードAとノードBを矢印で結ぶ
   下記の様にすることでノードAとノードBを矢印で結ぶことができる

   graph LR
       A-->B
   

   

2. ノードAとノードBを繋ぐ矢印の上にテキストを出す
   下記の様にすることでノードAとノードBを繋ぐ矢印の上にテキストを出すことができる

   graph LR
       A--"こんにちは"-->B
   

   

3. ノードAとノードBを線で結ぶ
   下記の様にすることでノードAとノードBを線で結ぶことができる

   graph LR
       A---B
   

   

4. ノードAとノードBを結ぶ線の上にテキストを出す
   下記の様にすることでノードAとノードBを結ぶ線の上にテキストを出すことができる

   graph LR
       A--"こんにちは"---B
   

   

5. ノードAとノードBを点線矢印で結ぶ
   下記の様にすることでノードAとノードBを点線矢印で結ぶことができる

   graph LR
       A-.->B
   

   

6. ノードAとノードBを繋ぐ点線矢印の上にテキストを出す
   下記の様にすることでノードAとノードBを結ぶ点線矢印の上にテキストを出すことができる

   graph LR
       A-."おはよう".->B
   

7. ノードAとノードBを太い矢印で結ぶ
   下記の様にすることでノードAとノードBを太い矢印で結ぶことができる

   graph LR
       A==>B
   

   

8. ノードAとノードBを繋ぐ太い矢印の上にテキストを出す
   下記の様にすることでノードAとノードBを結ぶ太い矢印の上にテキストを出すことができる

   graph LR
       A=="おはよう"==>B