Zenn
🧜‍♀️

[Mermaid] flowchart 書き方メモ

2023/02/04に公開
1件
メモ
Mermaid
tech

コメントアウト

  • Mermaidにおけるコメントアウトは%% 
flowchart TB
    A --- B

    %% C と D に分岐する
    B --- C & D

ノードの繋ぎ方

  • ノードの接続は&で一度に複数指定できる
  • 1行にノードの接続を連続で指定することも可能
flowchart LR
    %% 接続先を複数指定
    A --- B & C

    %% 接続元を複数指定
    C & D --- E

    %% 連続で接続を指定
    E --- F --- G

フローチャートの方向

  • flowchartの横のTBorTD/BT/LR/RLによってメインのチャートの方向を決められる
%% 「TB」を変える
flowchart TB
    A --- B & C
    B --- D & E

%% 上から下（TDでも可）
flowchart TB

%% 下から上
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

%% 長さ調整ありの場合
%% A-E の時点で1段長くなっているので F は D よりも右になる
flowchart LR
    A --- B
    A ==== C
    A -...- D
    A ---- E
    E ---- F

ノードの種類

  • ノードの種類は下記の通り
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

ポンポン

記事内の図で、いくつかSyntax Errorになっている箇所があります。（Mermaidのバージョンアップの影響？）
お手数ですが、お手すきの時にご確認いただけると幸いです。