【コピペで書けるMermaid】フローチャート編

はじめに

Mermaidの公式ドキュメントのこちらのページで紹介されている記法を盛り込んだチートシートです

一番下に貼っているコードをMarkdownファイルにコピペして差し替えていくだけで大抵のフローチャートは書けるはずです
（スタイルの変更やクリック時の動作を指定するインタラクションは含まれません）

こんな人に届けたい

• 初めてMermaid記法でフローチャートを書く人
• 久しぶりにMermaid記法でフローチャートを書こうとしたら記法を忘れて二の足を踏んでしまった人

コピペして表示するとこうなります

こちらから必要な部分をコピペしてください

---
title: フローチャートのテンプレート
---
%% コメントアウトは%%を使う
%% グラフの向きとしてTD, TB: 上から下, LR: 左から右, RL: 右から左, BT: 下から上のどれかを指定する
flowchart TD
  start1([開始])
  switch1{分岐}
  node1[処理1]
  node2[処理2]
  node3[処理3]
  end1([終了])
  start1 --> switch1
  switch1 -- はい --> node1
  switch1 -- いいえ --> node2
  %% リンクは連続して書け、&を使うと複数まとめてつなげられる
  node1 & node2 --> node3 --> end1

  %% 仮想線を使って位置制御している。subgraphもノードとして指定できる
  end1 ~~~ texts ~~~ nodes ~~~ links

  %% subgraphを使ってまとまりを表現でき、何層にも入れ子にできる
  subgraph texts[テキスト]
    %% subgraphの方向としてdirectionでTB, BT, LR, RLのいずれかを指定できる
    direction LR
    text0
    text1[ノード名と別ににラベルをつける場合]
    text2["⭐️Unicodeを使ったり
    複数行書きたい場合"]
    text3["`**Markdown**を使う場合`"]
    text0 -- ノード間のテキスト記法1 --> text1
    text0 -->|ノード間のテキスト記法2| text1
    text1 -->|"⭐️Unicodeを使ったり
    複数行書きたい場合"| text2
    text2 -->|"`**Markdown**を使う場合`"| text3
  end
  
  subgraph nodes[ノード]
    nd0[長方形]
    nd1(角丸)
    nd2([楕円])
    nd3[[サブルーチン]]
    nd4[(データベース)]
    nd5((円))
    nd6>非対称]
    nd7{菱形}
    nd8{{六角形}}
    nd9[/平行四辺形/]
    nd10[/台形\]
    nd11[\逆台形/]
    nd12(((二重円)))
  end

  subgraph links[リンク]
    %% 間の長さを伸ばすことによってリンク同士の相対的な長さを制御できる
    subgraph 実線
      l0[線] --- l1[1]
      l0 ---- l2[2]
      a0[矢印] --> a1[1]
      a0 ---> a2[2]
      ad0[両矢印] <--> ad1[1]
      ad0 <---> ad2[2]
      o0[終点o] --o o1[1]
      o0 ---o o2[2]
      od0[両終点o] o--o od1[1]
      od0 o---o od2[2]   
      x0[終点x] --x x1[1]
      x0 ---x x2[2]
      xd0[両終点x] x--x xd1[1]
      xd0 x---x xd2[2]
    end
    subgraph 点線
      dl0[線] -.- dl1[1]
      dl0 -..- dl2[2]
      da0[矢印] -.-> da1[1]
      da0 -..-> da2[2]
      dad0[両矢印] <-.-> dad1[1]
      dad0 <-..-> dad2[2]
      do0[終点o] -.-o do1[1]
      do0 -..-o do2[2]
      dod0[両終点o] o-.-o dod1[1]
      dod0 o-..-o dod2[2]   
      dx0[終点x] -.-x dx1[1]
      dx0 -..-x dx2[ランク2]
      dxd0[両終点x] x-.-x dxd1[1]
      dxd0 x-..-x dxd2[2]
    end
    subgraph 太線
      bl0[線] === bl1[1]
      bl0 ==== bl2[2]
      ba0[矢印] ==> ba1[1]
      ba0 ===> ba2[2]
      bad0[両矢印] <==> bad1[1]
      bad0 <===> bad2[2]
      bo0[終点o] ==o bo1[1]
      bo0 ===o bo2[2]
      bod0[両終点o] o==o bod1[1]
      bod0 o===o bod2[2]   
      bx0[終点x] ==x bx1[1]
      bx0 ===x bx2[2]
      bxd0[両終点x] x==x bxd1[1]
      bxd0 x===x bxd2[2]
    end
    subgraph 仮想線
      v0[線] ~~~ v1[1]
      v0 ~~~~ v2[2]
    end
  end