はじめに

ここでは mermeid の flowchart 記述で

書いていて気づいたこと、引っかかったこと
動作（描画）確認してみたこと
サンプル（過去に書いたもの）

などを載せていきます。

備忘・記録の面が強いので説明はあまりありません。
随時更新の予定

記述環境：VS Code + Markdown Preview Enhanced

Mermaid公式関連

ちょっと試してみたいという場合には Mermaid Live Editor が便利

図形一覧

一覧作成時バージョン : v11.4.1

v11.3.0以降で使える拡張図形も含む。

拡張図形の補足

拡張図形の書き方は id@{shape: 図形名, label: "表示文字"}

shape: というようにコロンの後ろにはスペースが必要
shape, label の順番は規定なし。shapeだけ、labelだけという記述も可能
同一idの図形の属性を複数書いた場合は上書きされていくので、従来型で書いておいてshapeだけあとで指定も可能

---
title : 拡張図形の記述例
---
flowchart

%% 従来の書き方
id1-a(従来)

%% 拡張図形の書き方
id1-b@{shape: rounded, label: "拡張で記述"}
id2@{label: "拡張図形", shape: doc }

%% 図形名と表示文字を別に指定
id3[従来＋拡張]
id3@{shape: delay}

%% shapeなし＝デフォルト図形
id4@{label: "shapeなし"}

%% labelなし＝idが表示
id5@{shape: card}

%% label指定しても表示されない図形
id6@{shape: bolt, label: "ラベル表示がない図形"}

図形名あり一覧

図形の下に図形名を記載。
拡張でないものには、1行目に従来の記述、2行目に図形名を記載。

図形名にはAliasもあるが、ここでは１つだけを記載。

補記）
※従来記述は（見やすくするため）間に全角スペースを入れて記述。
※2か所、labelでエラーになるため、labelでは閉じ角括弧の前に半角スペースあり。
　*1-1 (さ) : [\　\]　*1-2 (し) : [/　\]

図形のみ一覧

図形のみのソース

flowchart LR
s((start))
--> a0-1[ あ　あ]
--> a0-2( い　い)
--> a0-3([う　う])
--> a0-4[[え　え]]
--> a0-5[(お　お)]
--> c1a((1))

c1b((1))
--> a1-1((か　か))
--> a1-2> き　き]
--> a1-3{ く　く}
--> a1-4{{け　け}}
--> a1-5[/こ　こ/]
--> c2a((2))

c2b((2))
--> a2-1[\ さ　さ\]
--> a2-2[/ し　し\]
--> a2-3[\ す　す/]
--> a2-4(((せ　せ)))
--> a2-5@{label: "そ　そ", shape: text }
--> c3a((3))

c3b((3))
--> a3-1@{label: "た　た", shape: notch-rect }
--> a3-2@{label: "ち　ち", shape: lin-rect }
--> a3-3@{label: "つ　つ", shape: doc }
--> a3-4@{label: "て　て", shape: delay }
--> a3-5@{label: "と　と", shape: comment }
--> c4a((4))

c4b((4))
--> a4-1@{label: "な　な", shape: brace-r }
--> a4-2@{label: "に　に", shape: braces }
--> a4-3@{label: "ぬ　ぬ", shape: das }
--> a4-4@{label: "ね　ね", shape: lin-cyl }
--> a4-5@{label: "の　の", shape: curv-trap }
--> c5a((5))

c5b((5))
--> a5-1@{label: "は　は", shape: div-rect }
--> a5-2@{label: "ひ　ひ", shape: tri }
--> a5-3@{label: "ふ　ふ", shape: win-pane }
--> a5-4@{label: "へ　へ", shape: lin-doc }
--> a5-5@{label: "ほ　ほ", shape: notch-pent }
--> c6a((6))

c6b((6))
--> a6-1@{label: "ま　ま", shape: sl-rect }
--> a6-2@{label: "み　み", shape: flip-tri }
--> a6-3@{label: "む　む", shape: docs }
--> a6-4@{label: "め　め", shape: processes }
--> a6-5@{label: "も　も", shape: flag }
--> c7a((7))

c7b((7))
--> a7-1@{label: "や　や", shape: tag-rect }
--> a7-2@{label: "＊　＊", shape: cross-circ }
--> a7-3@{label: "ゆ　ゆ", shape: bow-rect }
--> a7-4@{label: "＊　＊", shape: f-circ }
--> a7-5@{label: "よ　よ", shape: tag-doc }
--> c8a((8))

c8b((8))
--> a9-1@{label: "１　１", shape: sm-circ }
--> a9-2@{label: "２　２", shape: framed-circle }
--> a9-3@{label: "３　３", shape: fork }
--> a9-4@{label: "４　４", shape: hourglass }
--> a9-5@{label: "５　５", shape: bolt }
--> e((end))

矢印の種類と長さ

矢印の種類

公式ドキュメントでは --- は矢印ではなく接続線になるとあるが、--> と同じ矢印になるため載せていません。
Mermaid Live Editorでも --- と --> は同じ矢印になります。

flowchart LR
a-1  --> a-2  <--> a-3  ==> a-4  <==> a-5
b-1  --o b-2  o--o b-3  ==o b-4  o==o b-5
c-1  --x c-2  x--x c-3  ==x c-4  x==x c-5

%% 破線
d-1 -.-> d-2 <-.-> d-3

%% テキスト付リンク
e-1 --> |一方| e-2 <--> |双方| e-3

%% 矢印なし
f-1 ~~~ f-2 ~~~ |線なし| f-3

矢印の長さ

flowchart LR
a-1 --> |1| a-2  --> a-3  --> a-4 --> a-5 
b-1 ---> |2| b-2
c-1 ----> |3| c-2
d-1 -----> |4| d-2

e-1 =====> |4| e-2
f-1 ~~~~~~ |4| f-2

%% 破線は . の数が長さ
g-1 -....-> |4| g-2

やってみた：矢印と配置

１箇所つないだ時の配置

ベース

mermaid

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

1. a, b の同じ番号をつなぐ

配置方向横で上下の図形への接続は、図形の配置がずれて斜め上・斜め下の矢印になる。

a1 → b1

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a1 --> b1

b2 → a2

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a2 --> b2

a3 → b3

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a3 --> b3

a4 → b4

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a4 --> b4

2. a, b の1番違いをつなぐ

斜め下、斜め上への矢印はまっすぐ斜め下・上の矢印になる。

a1 → b2

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a1 --> b2

b2 → a3

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

b2 --> a3

２箇所つないだ時の配置

矢印の記述の仕方・位置でどう配置が変わるかみてみた

ベース

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

まとめて記述 1.最後

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

a1 --> b3 --> a5

b2 → b3 の記述より後に a1 → b3 を書いたためか？

まとめて記述 2.最初

flowchart LR

a1 --> b3 --> a5

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

まとめて記述 3.間

flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

a1 --> b3 --> a5

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

分けて記述 1.最初と最後

flowchart LR
a1 --> b3

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

b3 --> a5

分けて記述 2.最初と間

flowchart LR

a1 --> b3

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

b3 --> a5

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

分けて記述 3.間と最後

flowchart LR

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

a1 --> b3

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

b3 --> a5

サンプル：凡例 - スタイル（クラス）

図形の線　図形凡例

図形を使い分けるのが面倒になって、基本 [ a ] で書いておいて

これは共通処理だな　　： [ a ] → [[ b ]]
ここは固有だけど分ける： [ a ] → [ c ]:::FUNC
これは外部モジュール　： [ a ] → [ d ]:::UTIL

みたいなかんじで線のスタイルで分けることが多いです、
どれが何かを決めるとき＆サンプルとして書く凡例のサンプル。

---
title: 図形凡例
---
flowchart

a[ a.処理 ]
b[[b.内部共通処理]]
c[ c.内部固有処理 ]:::FUNC
d[ d.外部共通処理 ]:::UTIL

classDef FUNC stroke-width:4
classDef UTIL stroke-dasharray:8 8

図形の色　色凡例

色で分けることはほぼしていません。

人に説明などするときのポイント
todo（課題とか検討中とか）

などを一時的に目立たせるために色をつけることがある程度。

---
title: 色凡例
---
flowchart 

A[あとで考える]:::TODO
B[ポイント]:::PT
N[通常]

%% 配色参考
C[参考１]:::classC
D[参考２]:::classD

classDef TODO fill:plum
classDef PT fill:skyblue

classDef classC fill:steelblue, color:#FFF
classDef classD stroke:black

文字の配置　記述凡例

図形内の文字の配置は中央揃え。
左揃えにしたい箇所があるときにスタイルを使用。

---
title: ログ出力処理記述　凡例
---
flowchart LR

a[[ログ出力<br>①, ②, ③]]

com0@{shape: text, label: "①レベル
②イベント番号
③詳細出力
" }

com1@{shape: comment, label: "①レベル<br>
・E … Error
・W … Warn
・I … Info
" }

com3@{shape: comment, label: "③詳細出力<br>
・ON … ダンプ出力あり
・OFF … ダンプ出力なし
<br>" }

a ~~~ com0:::LEFT
com1:::LEFT ~~~ com3:::LEFT

classDef LEFT text-align:left

---
title: ログ出力処理記述　記述例
---
flowchart 

a1[[ログ出力<br>I, 1001, OFF]]
a2[[ログ出力<br>W, 5001, OFF]]
a3[[ログ出力<br>E, 9999, ON]]

スタイル（クラス）使用例

---
title : クラス利用例
---
flowchart
s((start))
e((end))

s --> a[処理A]:::FUNC --> if1{処理結果}
c1(( )) --> e

if1 --> |1| a1-1[処理1-1] --> a1-2[処理1-2] --> a1-3[処理1-3]  --> c1
if1 ---> |2| a2-1[処理1-2] --> a2-2[処理1-3] --> a2-3[処理2-1] --> a2-4[処理2-2] --> c1
if1 --> |3| a3-1[処理3] --> a3-2[★3<br>処理4]:::PT --> a3-3[★2<br>処理5]:::TODO --> c1
if1 --> |その他| o1[異常処理]:::PT --> a3-2

n1:::TODO
com1[★1　検討
共通？関数化？]
subgraph n1[ ]
 a2-1
 a2-2
 a1-2
 a1-3
 com1@{shape: text }
end

com2[★2,★3　確認
異常時も処理4が必要
処理5は呼んでいい？
処理4,5の順序も確認
]
com2:::LEFT
subgraph n2[ ]
 a3-2
 a3-3
 com2@{shape: text }
end

classDef FUNC stroke-width:4

classDef LEFT text-align:left

classDef TODO fill:plum
classDef PT fill:skyblue

サンプル：フローチャート

flowchart で描くものの本命。

サンプル１

横：右方向 (LR)

縦 (TB)

ソース

flowchart LR
s((start))
e((end))

s --> a1[前処理] --> if1{分岐1}

if1 --> |case 1| f1-1[[関数1-1]] --> f1-2[[関数1-2]] ---> c1
if1 --> |case 2| if2{分岐2}

c2(( )) --> c1
if2 --> |case 2-1| f2-1[[関数2-1]] --> c2
if2 --> |case 2-2| f2-2[[関数2-2]] --> c2
if2 --> |case 2-3| f2-3[[関数2-3]] --> c2

c1(( )) --> a2[後処理] --> e

サンプル２：フロー分割してみる

長いフローを分割してみる。
機能分割ではなく、長さ調整のための分割です。

すべて接続

flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a(( ))
--> a3[処理3]
--> f1[[関数1]]
--> if2{分岐2}

if2 --> c2a
if2 --> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c2a(( ))
--> e

2分割

ポイントは、同じ幅または前半の方が短くなるように分割すること。
関数1を前半に入れると、前半と後半の配置が逆転します。

flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a(( ))
--> a3[処理3]
--> cAa((1))

%% 分割

cAb((1))
--> f1[[関数1]]
--> if2{分岐2}

if2 --> c2a
if2 --> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c2a(( ))
--> e

3分割

flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a((1))
%% 分割

c1b((1))
--> a3[処理3]
---> f1[[関数1]]
--> if2{分岐2}

if2 --> c3a((2))
if2 --> c2a

c3b((2))
--> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c2a(( ))
--> e

【おまけ】すべて接続（縦）

サンプル３：業務フロー寄り

flowchart LR

dataA@{label: "データA", shape: lin-doc }
dataC@{label: "データC", shape: lin-doc }
compD@{label: "データD", shape: docs }
compB@{label: "データB", shape: doc }
DB@{label: "DB", shape: db }

subgraph input
  compD
  compB
end

compD --> a1[[①]] --> dataC
dataC & compB --> a2[[②]] --> dataA
dataA --> a3[[③]] --> DB

flowchart LR

dataA@{label: "データA", shape: lin-doc }
dataC@{label: "データC", shape: lin-doc }
compD@{label: "データD", shape: docs }
compB@{label: "データB", shape: doc }
DB@{label: "DB", shape: db }

subgraph output
  compD
  compB
end

a4[[④]] --> dataA
dataA --> a3[[③]] --> DB

a5[[⑤]] --> dataC
dataC --> a6[[⑥]] --> compD
dataA & dataC --> a7[[⑦]] --> compB

flowchart LR

dataA@{label: "データA", shape: lin-doc }
dataC@{label: "データC", shape: lin-doc }
compD@{label: "データD", shape: docs }
compB@{label: "データB", shape: doc }
DB@{label: "DB", shape: db }

subgraph input
  compD
end
subgraph output
  compB
end

a4[[④]] --> dataA
dataA --> a3[[③]] --> DB
compD --> a1[[①]] --> dataC
dataA & dataC --> a7[[⑦]] --> compB

flowchart LR

dataA@{label: "データA", shape: lin-doc }
dataC@{label: "データC", shape: lin-doc }
compD@{label: "データD", shape: docs }
compB@{label: "データB", shape: doc }
DB@{label: "DB", shape: db }

subgraph input
  compB
end
subgraph output
  compD
end

a5[[⑤]] --> dataC
dataC --> a6[[⑥]] --> compD

dataC ----> |保管| DB-w --> |取得| dataC-w
dataC-w@{label: "データC", shape: lin-doc }
DB-w@{label: "Temp", shape: db }

dataC-w & compB --> a2[[②]] --> dataA
dataA --> a3[[③]] --> DB

サンプル：その他

flowchart で描いているけどフローチャートではないもの。

構成パターンみたいなの

（当たり前ですが）そのまま載せるわけにはいかないので、
ラベルを全く別のそれっぽいものにした結果、
何だかよくわからない図になりました。

構成１：監視 2 / 実処理 2、各1処理

構成２：監視 1 / 実処理 2、計3処理

構成３：監視 2 / 実処理 3、計4処理