10月 20, 2017 / 最終更新日 : 11月 10, 2018 りゅーたドキュメント

mermaid.jsのフローチャートの書き方

mermaid.js はテキストベースでフローチャートなどの図を書くことのできる JavaScript 製のライブラリ・ツールです。簡単にテキストで書けて、図も綺麗に出力されるかなり良い環境だと思います。

以前 AsciiDoc との連携について記事にしましたが、この記事では mermaid.js のフローチャートについて書き方を記載します。

AsciiDoc との連携については下記記事を参考にしてください。

田舎からGeekを目指す

AsciiDoc と PlantUML と mermaid.js で素敵なテキストベース仕様書ライフ

https://ryuta46.com/112

以前からテキストベースで仕様書(PDF)などを管理したいと思っていたのですが、ようやくその環境が整い、一度実際に運用してみてかなりいい感じだったので紹介したいと思います。基本テキストは AsciiDoc で記述するUML は PlantUML で記述するフローチャートとかは必...

mermaid.js の公式ページ

mermaidjs.github.io

mermaid · GitBook

https://mermaidjs.github.io

動作確認環境

macOS Sierra 10.12.6
mermaid.js 7.1.0

環境構築

本体

mermaid.js は npm またはでインストールできます。

version 7.1.0 から、mermaid のコマンドは付属しないようになりましたので、コマンドラインで実行する場合は mermaid.cli もインストールする必要があります。

$ npm install -g mermaid
$ npm install -g mermaid.cli

$ npm install -g mermaid

$ npm install -g mermaid.cli

または

$ yarn global add mermaid
$ yarn global add mermaid.cli

$ yarn global add mermaid

$ yarn global add mermaid.cli

mmdc コマンドで mermaid のテキストファイルから画像ファイルを出力できます。

$ mmdc -i input.mmd -o output.png

1 2	$ mmdc -i input.mmd -o output.png

プレビュー環境

AtomとVisual Studio Code のどちらにも対応する拡張機能があります。

いずれも拡張子 .mmd または .mermaid でテキストを作成してエディタ上でプレビューする事が可能です。

Atomであれば atom-mermaid と language-mermaid で問題ないかと思います。
Visual Studio Code の場合は Preview が良いかと思います。

Mermaid Preview というドンピシャの名前の拡張機能もありますが、Preview の方は mermaid の言語IDが定義されるため、キーバインドが割り当てやすくオススメです。

田舎からGeekを目指す

Visual Studio Codeで言語ごとに別のキーバインドを割り当てる

https://ryuta46.com/406

現代の多くのテキストエディタ同様、VSCodeでもキーバインドのカスタマイズができます。今回は、VSCodeのキーバインドのちょっと進んだ設定方法として、編集中の言語ごとにキーバインドを切り替える方法を紹介したいと思います。動機わたしは AsciiDocのプレビューを...

mermaid.js のフローチャートの書き方

基本

graph LR
    ID1[ノード1] -- リンク --&gt; ID2((ノード2))
    ID3 --&gt; ID2

graph LR

ID1[ノード1] -- リンク --> ID2((ノード2))

ID3 --> ID2

ID[テキスト] の形式でノードを定義し、ID1 --> ID2 のように矢印を定義します。

テキストを指定しない場合はIDがそのまま表示されます。
ノードのテキスト、リンクのテキストともに   で改行を入れることができます。
テキスト内に ( などの記号を入れると正しく解釈できない場合があります。
その場合は ID["テキスト(括弧)"] というようにダブルクォーテーションでテキストをくくる必要があります。

グラフ全体の方向

graph TB と指定するとグラフが上から下に向かうようにノードが配置されます。

同様に指定できるものは下記

指定	方向
TB	上から下
BT	下から上
LR	左から右
RL	右から左

TB = Top Bottom という感じで名前がつけられています。

ノード形状

テキストを囲む括弧でノードの形状が変わります。

graph TB
    id1[四角]
    id2((丸))
    id3(角丸四角)
    id4{ひし形}
    id5&gt;リボン]

graph TB

id1[四角]

id2((丸))

id3(角丸四角)

id4{ひし形}

id5>リボン]

ひし形は、正確には45度傾いた正方形です。

丸とひし形はラベルが長いとノード自体の面積がかなり大きくなってしまうので、適当に  改行した方が良いかと思います。

graph TB
    id1((丸はラベルが長いとノードがすごいでかくなって見づらい))
    id2((適当に改行を&lt;br/&gt;入れた方が&lt;br/&gt;見やすいと&lt;br/&gt;思います))

graph TB

id1((丸はラベルが長いとノードがすごいでかくなって見づらい))

id2((適当に改行を 入れた方が 見やすいと 思います))

リンク

graph LR
    A-- テキスト --&gt;B
    A--&gt;|テキスト|B
    C-- 実線 ---D
    C---|実線|D
    C-- 実線矢印 --&gt;D
    C--&gt;|実線矢印|D
    E-. 点線 .-F
    E-.-|点線|F
    E-. 点線矢印 .-&gt;F
    E-.-&gt;|点線矢印|F

    G== 太線 ===H
    G===|太線|H
    G== 太線矢印 ==&gt;H
    G==&gt;|太線矢印|H

graph LR

A-- テキスト -->B

A-->|テキスト|B

C-- 実線 ---D

C---|実線|D

C-- 実線矢印 -->D

C-->|実線矢印|D

E-. 点線 .-F

E-.-|点線|F

E-. 点線矢印 .->F

E-.->|点線矢印|F

G== 太線 ===H

G===|太線|H

G== 太線矢印 ==>H

G==>|太線矢印|H

ノード間のリンクは、実線、点線、太線でそれぞれ矢印の有無があります。

リンクのテキストは空白つきでリンクの間に書くか、パイプつきでリンクの右側に書く方法があります。

リンクの ‘-‘(ハイフン)などの数は、厳密に上の記載と一致する必要があるようです。多くても少なくても正しく図が出力されません。

グルーピング

graph TB
    subgraph s1
        s1a --&gt; s1b
    end
    subgraph s2
        s2a --&gt; s2b
        s2a --&gt; s1b
    end

graph TB

subgraph s1

s1a --> s1b

end

subgraph s2

s2a --> s2b

s2a --> s1b

end

subgraph というキーワードでノードをグルーピング出来ます。

IDは subgraph 内のスコープで閉じているわけではなく、グローバルに定義されます。別の subgraph 内で同じ IDを定義するということはでません。

注意点として、ノードは最初にIDの記載が現れた subgraph 内に配置されます。

うまく subgraph 内にノードが配置されない場合は、ノードの定義だけsubgraph 内に記載して、リンクの定義は後に記載した方が良いです。下記 s2a は意図と違う配置の例、s4a が意図通りの配置の例です。

graph LR
    subgraph s1
        s1a --&gt; s2a
    end
    subgraph s2
        s2a[s2内にあってほしいノード]
    end

    subgraph s3
        s3a
    end

    subgraph s4
        s4a[s4内にあってほしいノード]
    end
    s3a --&gt; s4a

graph LR

subgraph s1

s1a --> s2a

end

subgraph s2

s2a[s2内にあってほしいノード]

end

subgraph s3

s3a

end

subgraph s4

s4a[s4内にあってほしいノード]

end

s3a --> s4a

装飾

graph LR
    customnode --&gt; normal
    style customnode fill:#f00,stroke:#fff,stroke-width:5px,stroke-dasharray:3

    customlink --&gt; normal
    normalA --&gt; normalB

    linkStyle 1 stroke:#ff3,stroke-width:4px,stroke-dasharray: 1

graph LR

customnode --> normal

style customnode fill:#f00,stroke:#fff,stroke-width:5px,stroke-dasharray:3

customlink --> normal

normalA --> normalB

linkStyle 1 stroke:#ff3,stroke-width:4px,stroke-dasharray: 1

ノードの装飾

ノードを装飾するには style を使います。

fill、stroke は # で始まる3桁または 6桁のカラーコードが使えます。

stroke-width で枠の太さを指定し、stroke-dasharray で枠を点線にできます。

これらの要素は全て書く必要はなく、必要なものだけ書けばデフォルトが上書きされます。

公式ページの方だとstroke-dasharray: 5,1 のように書いて点線の有無の間隔を指定できそうに見えるのですが、私の環境では第二引数の方を変えても何も変わりませんでした。

リンクの装飾

リンクを装飾するには linkStyle を使います。

リンクはノードと違って ID が無いため、対象の指定がかなり特殊です。

linkStyle 通し番号(0始まり) のように、0始まりでリンクの通し番号を指定します。

また、対象のリンクより先に linkStyle を書くと正しく出力されません。

正直使い辛い印象ですので、ここは今後の改善に期待したいですね。

クラス定義による装飾

ノードの装飾を個々に行わず、クラスを定義し、同じ装飾を複数のノードに設定することが出来ます。

graph TB
    custom1 --&gt; normal
    custom2 --&gt; normal
    classDef classA fill:#f00,stroke:#fff,stroke-width:5px;
    class custom1,custom2 classA;

graph TB

custom1 --> normal

custom2 --> normal

classDef classA fill:#f00,stroke:#fff,stroke-width:5px;

class custom1,custom2 classA;