noteでMermaidを使ってフローチャートを作成する方法
最近noteの中でフローチャートを作るにあたり、結構いろいろなサイトを見て回って手こずった。
noteではMermaidという記述方法で様々な図表を作れる。
今回は備忘録として、その中でもフローチャートの作り方に特化して情報をまとめた。
まあ今時ClaudeやGPTなどの生成AIを使えば、この内容を知らずともある程度作れてしまうとは思うのだが、自力で描きたい・理解したい人向け。
この記事の目的
noteで初めてフローチャートを書く人が、この記事を読めば他にいろいろ探し回らなくても書けるようになること。
フローチャートを描き始める方法
1. メニューから「コード」を選択する
左側の「＋」メニューから「コード」を選択すると、黒いコード記述欄が表示される。
このような真っ黒い欄が表示されればOK。
2. Mermaid構文であることを宣言する
コード記述欄の中に以下のクエリ（※構文のこと）を入力する。
最初の「```mermaid」が、これ以降Mermaid構文であることの宣言。最後の「```」が構文の終わりであることを表す。
```mermaid
```
3. フローチャートであることを宣言する
「```mermaid」と「```」の間に「flowchart XX;」と記述する。
XXの部分は、フローチャートが流れる向きを指定する。次の「フローチャートが流れる向き」の章を参照。
```mermaid
flowchart TB;
```
4. タスク名を宣言する
フローチャートが流れる向きの指定の後に、フローチャートに表示させたいタスク名を宣言する。
（フローチャート上で直接タスク名も書くこともできるが、先に宣言しておいた方が楽なことが多い）
書き方は下記例を用いて説明する。
```mermaid
flowchart TB;
node1[処理1];
node2[処理2];
```
コードの中では、
記述上のタスク名[表示されるタスク名];
で書き表す。
この例の場合、この後コードの中では「node1の後にnode2を行う」というような構文を書くと、公開後は「処理1の後に処理2を行う」ように見える。
そのため、書きやすいものを記述上のタスク名として、他者が読んだときにわかりやすいものを表示されるタスク名として指定すると良い。
フローチャートを書くにあたり、[1]ノード(幾何学的図形) [2]リンクとエッジ [3]サブグラフ（グルーピング）という3種類の要素の書き方を知っておきたい。
この記事内で触れる。
フローチャートが流れる向き
向き一覧
4種類の向きから選ぶことができる。
一般的な向きはTB（上から下）かLR（左から右）。
TBまたはTD（Top to Bottom / Top to Down 上から下へ）
BT（Bottom to Top 下から上へ）
LR（Left to Right 左から右へ）
RL（Right to Left 右から左へ）
```mermaid
flowchart TB;
node1[処理1];
node2[処理2];
node1 --> node2
``````mermaid
flowchart TB;
node1[処理1];
node2[処理2];
node1 --> node2
```
```mermaid
flowchart BT;
node1[処理1];
node2[処理2];
node1 --> node2
``````mermaid
flowchart BT;
node1[処理1];
node2[処理2];
node1 --> node2
```
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node1 --> node2
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node1 --> node2
```
```mermaid
flowchart RL;
node1[処理1];
node2[処理2];
node1 --> node2
``````mermaid
flowchart RL;
node1[処理1];
node2[処理2];
node1 --> node2
```
ノードとエッジ
ノードとは
ノード（幾何学的図形）とは、Mermaidにおけるフローチャートで使う図形のこと。
一般的にその内容によって図形の形を使い分ける。
リンク・エッジとは
リンクとは、Mermaidにおけるノードとノードの間を繋ぐ線のこと。
エッジとは線の先の形のこと。エッジには矢印のほかに×や●も選ぶことができる。逆に先端に何も図形を置かないリンクをオープンリンクと呼ぶ。
```mermaid
flowchart LR;
node1[四角いノード];
node2((丸いノード));
node1 -->|エッジが矢印のリンク| node2
node1 ---|オープンリンク| node2
```1｜ノード(幾何学的図形)の種類
ノード一覧
下記14種類のノードを使用できる。
```mermaid
flowchart TB;
node101[1-1 処理];
node102([1-2 開始・終了]);
node103[[1-3 別処理]];
node104[(1-4 データベース)];
``````mermaid
flowchart TB;
node105{1-5 判断};
node106{{1-6 準備}};
node107((1-7 結合));
node108[/1-8 入出力/];
node109[\1-9 手作業/];
``````mermaid
flowchart TB;
node110>1-10 奇妙な形];
node111[\1-11 逆向き並行四辺形\];
node112[/1-12 優先アクション\];
node113(((1-13 停止)));
node114(1-14角丸)
```1-1｜処理（四角）
```mermaid
flowchart TB;
node101[処理];
``````mermaid
flowchart TB;
node101[処理];
```
フローチャートで最もよく使用されるノード。
1-2｜開始・終了（スタジアム型）
```mermaid
flowchart TB;
node102([開始・終了]);
``````mermaid
flowchart TB;
node102([開始・終了]);
```
フローチャートの最初と最後に配置し、開始・終了を表す。
1-3｜別処理（二重四角）
```mermaid
flowchart TB;
node103[[別処理]];
``````mermaid
flowchart TB;
node103[[別処理]];
```
他で別途定義づけられた処理を表す。
1-4｜データベース（円柱）
```mermaid
flowchart TB;
node104[(データベース)];
``````mermaid
flowchart TB;
node104[(データベース)];
```
1-5｜判断（ひし形）
```mermaid
flowchart TB;
node105{判断};
``````mermaid
flowchart TB;
node105{判断};
```
次のステップに進む前に判断すべきことがある際に使用する。
正誤やあるなしなど、判断結果によってその後の処理が変わる場合に使用する。
1-6｜準備（六角形）
```mermaid
flowchart TB;
node106{{準備}};
``````mermaid
flowchart TB;
node106{{準備}};
```
1-7｜結合（円）
```mermaid
flowchart TB;
node107((結合));
``````mermaid
flowchart TB;
node107((結合));
```
1-8｜出入力（ひし形）
```mermaid
flowchart TB;
node108[/出入力/];
``````mermaid
flowchart TB;
node108[/出入力/];
```
1-9｜手作業（下向き台形）
```mermaid
flowchart TB;
node109[\手作業/];
``````mermaid
flowchart TB;
node109[\手作業/];
```
手動での調整や処理が必要なタスクを表す。
1-10｜「奇妙な形」
```mermaid
flowchart TB;
node110>奇妙な形];
``````mermaid
flowchart TB;
node110>奇妙な形];
```
使いどころがよくわからない形状のノード。
Mermaid公式のガイドでも「Odd shape」＝奇妙な形と呼ばれている。なんで作ったん？
1-11｜逆向き平行四辺形
```mermaid
flowchart TB;
node111[\逆向き並行四辺形\];
``````mermaid
flowchart TB;
node111[\逆向き並行四辺形\];
```
1-12｜優先アクション（台形）
```mermaid
flowchart TB;
node112[/優先アクション\];
``````mermaid
flowchart TB;
node112[/優先アクション\];
```
実例は見たことがないが、優先的に処理すべきタスクを表すらしい。
1-13｜停止（二重円）
```mermaid
flowchart TB;
node113(((停止)));
``````mermaid
flowchart TB;
node113(((停止)));
```
実例は見たことがないが、停止を表すノードらしい。
1-14｜角丸
```mermaid
flowchart TB;
node114(角丸);
``````mermaid
flowchart TB;
node114(角丸);
```
2｜リンク・エッジの種類
リンク・エッジ記述時の注意点
リンクの上にテキストを載せる方法
載せるというか乗せるというか、リンクの上に何かしらのテキストを表示させたいときがあるはず。
リンクの記述の直後、ノードの前に「|」で挟んでテキストを書くと、リンクの上に表示される。
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node1 --- node2
node1 ---|ここにテキストを書く| node2
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node1 --- node2
node1 ---|ここにテキストを書く| node2
```
リンクの長さを変える方法
リンクはエッジなし（オープンリンク）、片側のみエッジあり、両方エッジありのいずれかで指定ができる。
リンクの長さは特に指定せずとも、自動で丁度良い長さに調整されるため、基本的にはいちいち気にしなくても良い。
ただあらかじめ長い状態を指定することも可能。下記表のように、リンクを表す部分にたくさん文字数を割くと、リンクの線の長さも長くなる。
$$
\begin{array}{c:ccc}
\text{リンクの種類} & \text{通常} & \text{少し長く} & \text{かなり長く} \\ \hline \\
\text{実線} & \text{-}\text{-}\text{-} & \text{-}\text{-}\text{-}\text{-} & \text{-}\text{-}\text{-}\text{-}\text{-}\\ \\
\text{点線} & \text{-.-} & \text{-..-} & \text{-…-}\\ \\
\text{太線} & \text{===} & \text{====} & \text{=====} \\ \\ \hline
\end {array}
$$
ノードの名前でoとxを頭文字に使う場合の記述方法
エッジに「o（小文字のオー）」と「x（小文字のエックス）」を使っているため、oとxは特殊文字扱いになっている。
ノードにoまたはxを頭文字とする名称をつけたい場合は、エッジを表す特殊文字と区別するため、リンクとノードの間に半角スペースを入れるか、大文字にする。
この例では、node1から繋いでいる3種類のリンクのうち、1番目に書いたものが「oから始まる」にできていない。2番目のように、リンクとノードの間に半角スペースを使う必要がある。
```mermaid
flowchart LR;
node1[処理1];
osmall[oから始まる]
Obig[Oから始まる]
node1 ---osmall
node1 --- osmall
node1 ---Obig
``````mermaid
flowchart LR;
node1[処理1];
osmall[oから始まる]
Obig[Oから始まる]
node1 ---osmall
node1 --- osmall
node1 ---Obig
```
リンク・エッジの一覧
リンクの種類3種類×エッジなしを含めてエッジの種類4種類＝12種類に加えて、目に見えないリンクの計15種類を使用できる。
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 --- node2 ---|2-1 実線| node3 --- node4 ----- node5
node1 --> node2 -->|実線矢印エッジ| node3 <--> node4 <----> node5
node1 --o node2 --o|実線丸エッジ| node3 o--o node4 o----o node5
node1 --x node2 --x|実線クロスエッジ| node3 x--x node4 x----x node5
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 -.- node2 -.-|2-2 点線| node3 -..- node4 -...- node5
node1 -.-> node2 -.->|点線矢印エッジ| node3 <-.-> node4 <-...-> node5
node1 -.-o node2 -.-o|点線丸エッジ| node3 o-.-o node4 o-...-o node5
node1 -.-x node2 -.-x|点線クロスエッジ| node3 x-.-x node4 x-...-x node5
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 === node2 ===|2-3 太線| node3 === node4 ===== node5
node1 ==> node2 ==>|太線矢印エッジ| node3 <==> node4 <====> node5
node1 ==o node2 ==o|太線丸エッジ| node3 o==o node4 o====o node5
node1 ==x node2 ==x|太線クロスエッジ| node3 x==x node4 x====x node5
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node1 ~~~ node2 ~~~|2-4 目に見えないリンク| node3
```2-1｜実線のリンク
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 --- node2 ---|実線オープンリンク| node3 --- node4 ----- node5
node1 --> node2 -->|矢印エッジ| node3 <--> node4 <----> node5
node1 --o node2 --o|丸エッジ| node3 o--o node4 o----o node5
node1 --x node2 --x|クロスエッジ| node3 x--x node4 x----x node5
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 --- node2 ---|実線オープンリンク| node3 --- node4 ----- node5
node1 --> node2 -->|矢印エッジ| node3 <--> node4 <----> node5
node1 --o node2 --o|丸エッジ| node3 o--o node4 o----o node5
node1 --x node2 --x|クロスエッジ| node3 x--x node4 x----x node5
```
2-2｜点線のリンク
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 -.- node2 -.-|点線オープンリンク| node3 -..- node4 -...- node5
node1 -.-> node2 -.->|点線矢印エッジ| node3 <-.-> node4 <-...-> node5
node1 -.-o node2 -.-o|点線丸エッジ| node3 o-.-o node4 o-...-o node5
node1 -.-x node2 -.-x|点線クロスエッジ| node3 x-.-x node4 x-...-x node5
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 -.- node2 -.-|点線オープンリンク| node3 -..- node4 -…- node5
node1 -.-> node2 -.->|点線矢印エッジ| node3 <-.-> node4 <-...-> node5
node1 -.-o node2 -.-o|点線丸エッジ| node3 o-.-o node4 o-...-o node5
node1 -.-x node2 -.-x|点線クロスエッジ| node3 x-.-x node4 x-...-x node5
```
2-3｜太線のリンク
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 === node2 ===|太線オープンリンク| node3 === node4 ===== node5
node1 ==> node2 ==>|太線矢印エッジ| node3 <==> node4 <====> node5
node1 ==o node2 ==o|太線丸エッジ| node3 o==o node4 o====o node5
node1 ==x node2 ==x|太線クロスエッジ| node3 x==x node4 x====x node5
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
node5[処理5];
node1 === node2 ===|太線オープンリンク| node3 === node4 ===== node5
node1 ==> node2 ==>|太線矢印エッジ| node3 <==> node4 <====> node5
node1 ==o node2 ==o|太線丸エッジ| node3 o==o node4 o====o node5
node1 ==x node2 ==x|太線クロスエッジ| node3 x==x node4 x====x node5
```
2-4｜見えないリンク
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node1 ~~~ node2 ~~~|目に見えないリンク| node3
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node1 ~~~ node2 ~~~|目に見えないリンク| node3
```
複数のノードを横並びにしたいなど、見た目上の位置を揃えて整理したいときに使える。
3｜サブグラフ（グループ化）
サブグラフとは
複数のノードやリンクのまとまりを表す方法。
この例では「group1」として、サブグラフを用いて「処理1」「処理2」のまとまりを表している。
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
subgraph group1
node1
node2
end
node1 --> node2 --> node3
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
subgraph group1
node1
node2
end
node1 --> node2 --> node3
```
リンクはノードとノードの間以外にも、サブグラフとサブグラフの間で描くこともできる。
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
subgraph group1
node1 --> node2
end
subgraph group2
node3 --> node4
end
group1 --> group2
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
subgraph group1
node1 --> node2
end
subgraph group2
node3 --> node4
end
group1 --> group2
```
フローチャート全体の流れる方向とは別に、サブグラフの中の流れる方向を指定することもできる。
```mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
subgraph group1
direction TB
node1 --> node2
end
subgraph group2
direction BT
node3 --> node4
end
group1 --> group2
``````mermaid
flowchart LR;
node1[処理1];
node2[処理2];
node3[処理3];
node4[処理4];
subgraph group1
direction TB
node1 --> node2
end
subgraph group2
direction BT
node3 --> node4
end
group1 --> group2
```
更新履歴
2024/10/13 初稿