LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@n_sato

mermaid サンプルなど フローチャート編

Last updated at Posted at 2025-03-18

はじめに

ここでは 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 で描いているけどフローチャートではないもの。

構成パターンみたいなの

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

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?