コード で フローチャート を 描く ～mermaid 記法①～

〜宣伝〜

個人開発でエンジニア専門マッチングサービスを開発しましたので、是非未経験からエンジニア目指している人！現役エンジニアで教えたい人！使ってみてください！

β版リリース記念キャンペーン中です！

10名様限定、抽選でお好きな技術本1冊プレゼント！
🎉当選者にはメッセージ差し上げます(送付の際に住所はお聞きしません)
詳しくはこちらから↓

https://x.com/dokupro01/status/1796837336145436846

目的

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

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

抑えるポイント

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

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

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

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

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

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

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

書き方の例

基本

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

   

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

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

   

ノードの見た目

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

   

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

   

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

   

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

   

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

   

ノードを繋ぐ

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

   

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

   

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

   

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

   

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

   

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

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

   

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