🧜♀️
[Mermaid] flowchart 書き方メモ
コメントアウト
- Mermaidにおけるコメントアウトは
%%
flowchart TB
A --- B
B --- C & D %% C と D に分岐する
ノードの繋ぎ方
- ノードの接続は
&で一度に複数指定できる - 1行にノードの接続を連続で指定することも可能
flowchart LR
A --- B & C %% 接続先を複数指定
C & D --- E %% 接続元を複数指定
E --- F --- G %% 連続で接続を指定
フローチャートの方向
-
flowchartの横のTBorTD/BT/LR/RLによってメインのチャートの方向を決められる
flowchart TB %% ここを変える
A --- B & C
B --- D & E
flowchart TB %% 上から下（TDでも可）
flowchart BT %% 下から上
flowchart LR %% 左から右
flowchart RL %% 右から左
線の種類
- 線の種類は下記の通り
| 基本 | 太線 | 点線 | |
|---|---|---|---|
| 基本 | --- | === | -.- |
| 矢型 | --> | ==> | -.-> |
| 〇型 | --o | ==o | -.-o |
| ×型 | --x | ==x | -.-x |
- 矢印などは両矢印にすることが可能
flowchart LR
A <--> B
C o--o D
E x--x F
テキスト付きの線
- 文字を
-などの線の記号で挟む、もしくは| |で挟むことでテキスト付きの線が可能 - 太線や矢印でも同様
- 点線は必要になる
-の数が異なるので注意
flowchart LR
方式1 -- テキスト --- A
方式2 ---| テキスト | B
点線の場合 -. テキスト .- C
線の長さ
- 線および矢印の長さは
-（=、.）の数で変化する - ノードの配置（階層）の調整に使える
%% 長さ調整なしの場合
flowchart LR
A --- B
A === C
A -.- D
A --- E
E --- F
%% 長さ調整ありの場合
flowchart LR
A --- B
A ==== C
A -...- D
A ---- E
E ---- F %% A-E の時点で1段長くなっているので F は D よりも右になる
ノードの種類
- ノードの種類は下記の通り
flowchart TB
A["四角"]
B("四角2")
C[["四角3"]]
D(["小判形"])
flowchart TB
E(("円"))
F((("円2")))
G[("円筒")]
flowchart TB
H>"旗形"]
I{"ひし形"}
J{{"六角形"}}
flowchart TB
K[/"平行四辺形"/]
L[\"平行四辺形2"\]
M[/"台形"\]
N[\"台形2"/]
ノードのグループ作成
-
subgraph～endで囲うことでノードのグループを作成できる
flowchart TB
subgraph 1st
A --- B
end
subgraph 2nd
C --- D
end
- ノードからグループへの接続も可能
flowchart TB
A --> C %% 他のグループのノードに接続
C --> 1st %% ノードからグループに接続
2nd --> B %% グループからノードに接続
1st <--> 2nd %% グループからグループへ接続
subgraph 1st
A
B
end
subgraph 2nd
C
D
end
-
directionを使うことでflowchartとは別にグループ内のチャート方向を設定できる
flowchart TB
subgraph 1st
direction TB %% 上から下
A --> B
end
subgraph 2nd
direction BT %% 下から上
C --> D
end
subgraph 3rd
direction LR %% 左から右
E --> F
end
subgraph 4th
direction RL %% 右から左
G --> H
end
- グループ内にグループを作成することも可能
flowchart TB
subgraph 1st
A --> B & C & 3rd
subgraph 2nd
direction LR
C --> D
end
subgraph 3rd
direction LR
E --> F
end
end
全体デザイン（テーマ）の変更
-
%%{init: {'theme':'xxxxx'}}%%を使うことで全体のデザイン（テーマ）を変更できる
%%{init: {'theme':'default'}}%%
flowchart LR
A --> B --> C
%%{init: {'theme':'default'}}%%
%%{init: {'theme':'neutral'}}%%
%%{init: {'theme':'dark'}}%%
%%{init: {'theme':'forest'}}%%
%%{init: {'theme':'base'}}%%
- テーマ
baseはthemeVariablesによりカスタマイズすることができる -
primary ～はsecondary、tertiaryまであり、グループの色などを変えられる - 設定していない部分に関しては、他のパラメータを参考に自動的に調整される
- パラメータは種類が多いので公式サイトにて確認してください
Mermaid - Theme Configuration
%%{
init: {
'theme': 'base',
'themeVariables': {
'fontFamily': 'arial',
'fontSize': '24px',
'primaryColor': '#0af',
'primaryBorderColor': '#00f',
'primaryTextColor': '#fff',
'lineColor': '#f00'
}
}
}%%
%% fontFamily フォント
%% fontSize フォントサイズ
%% primaryColor ノード 塗り潰し色
%% primaryBorderColor ノード 枠線色
%% primaryTextColor ノード 文字色
%% lineColor 線色
flowchart LR
A --> B --> C
ノード個別デザインの変更
-
styleを使うことでノードごとにデザインを変更できる - パラメータはテーマとは異なるので公式サイトにて確認してください
Mermaid - Flowcharts - Basic Syntax
graph LR
A --> B --> C
%% Aはデフォルト
style B color:#fff, fill:#0af, stroke:#00f, stroke-width:2px,
style C color:#fff, fill:#f66, stroke:#000, stroke-width:2px, stroke-dasharray: 5 5
%% color ノード 文字色
%% fill ノード 塗り潰し色
%% stroke ノード 枠線色
%% stroke-width ノード 枠線太さ
%% stroke-dasharray ノード 枠線の破線指定
透明なノードの作成
- ノードの外形線と塗り潰しの不透明度を 0 にすることで透明なノードを作成できる
- ノード内テキストを
flowchart LR
%% 外形線と塗り潰しの不透明度を 0 にする
style B fill-opacity:0, stroke-opacity:0;
A --> B --> C
%% 文字をスペースにする
style E fill-opacity:0, stroke-opacity:0;
D --> E[" "] --> F
-
classDef xxxxx display: none;によって非表示にすることでも可能 - 表示する媒体によっては完全に非表示にならない場合がある（Zennでは文字が残る）
%% 属性自体を非表示に設定（Zennでは効かない）
flowchart LR
classDef hidden display: none;
A --> B:::hidden --> C
線のカーブのデザイン
-
%%{ init: { 'flowchart': { 'curve': 'xxxxx' } } }%%を使うことで線のカーブを変更できる
%%{ init: { 'flowchart': { 'curve': 'basis' } } }%%
flowchart LR
A --> B & C
B --> D & E
%%{ init: { 'flowchart': { 'curve': 'basis' } } }%%
%%{ init: { 'flowchart': { 'curve': 'bump' } } }%%
%%{ init: { 'flowchart': { 'curve': 'linear' } } }%%
%%{ init: { 'flowchart': { 'curve': 'monotoneX' } } }%%
%%{ init: { 'flowchart': { 'curve': 'monotoneY' } } }%%
%%{ init: { 'flowchart': { 'curve': 'natural' } } }%%
%%{ init: { 'flowchart': { 'curve': 'step' } } }%%
%%{ init: { 'flowchart': { 'curve': 'stepAfter' } } }%%
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
ノード・グループ間の距離
-
nodeSpacing、rankSpacingを使うことでノード間の距離を変更できる -
nodeSpacingは同じ階層のノード間の距離 -
rankSpacingは異なる階層のノード間の距離
%%{ init: { 'flowchart': { 'nodeSpacing': 50, 'rankSpacing': 50 } } }%%
flowchart TB
A --> B & C
B --> D & E
%%{ init: { 'flowchart': { 'nodeSpacing': 100, 'rankSpacing': 10 } } }%%
%%{ init: { 'flowchart': { 'nodeSpacing': 10, 'rankSpacing': 100 } } }%%
Discussion