🔦

mermaid.jsの記法フローチャートだけ

2024/08/06に公開

Mermaid

flowchart

tech

概要

ドキュメントとして残せてテキストのみで記述できるとても便利なmermaid.js。しかし記法をすぐ忘れてしまうので、メモる。

準備

Live Editor が用意されていて、ブラウザ上で試すことができる。

しかし個人的には色がけばけばしく、使いづらいと感じた。ローカル(dockerコンテナ)で動かせるようにできないかと一時期試行錯誤していたが、描画まわり(レンダリングエンジン？)の問題が発生して断念。

zennのプレビューを使わせて頂いている。感謝。

フローチャート

フローチャートの形状ルール

要素	図形	Mermaid.js 記法
開始/終了	楕円	(( "Start or End" ))
処理	長方形	[ "Process" ]
判断/条件	菱形	{ "Decision" }
入出力	台形	[/ "Trapezoid" \]
入力（非標準）	平行四辺形(右に傾き)	[/ "Parallelogram" /]
出力（非標準）	平行四辺形(左に傾き)	[\ "Parallelogram alt" \]
データベース	円柱	[( "Database" )]
サブルーチン	長方形（横線付き）	[[ "Subroutine" ]]
並行処理(非標準)	縦の平行四辺形	subgraph <name> ... end
処理準備	六角形	{{ "Preparation" }}

mermaid.jsのflowchartのドキュメントには単に図形とその表現方法が記載されているだけでフローチャートの要素と図形の関係は記載されてはいなかった。形を用意して用途を絞らないのは表現の自由度を下げないためだろうか。

基本形（分岐、繰り返し）

よく見るのは上から下だろうけど画面で見ること(によるスクロールの手間)を考えると左から右の方が合っているように思う。

---
title: basic usage (Left to Right)
---
flowchart LR
    start1(("start"))
    prepare2{{"prepare"}}
    input3[/"input"/]
    decision4{"decision"}
    process5["process"]
    print6[\"print"\]
    end7(("end"))
    start1 --> prepare2 --> input3 --> decision4
    decision4 -->|Yes| process5
    decision4 -->|No| input3
    process5 --> print6 --> end7

ノードに表示する文字列とノード識別子の名前を一緒にすると爆弾が出るので識別子には上から順に番号を割り振った。

だいぶ見辛い。上下の方がいいだろうか？

どちらもしっくりこない。フローチャートに依るだろうからケースバイケースで使い分けるしかない。
左から右は
flowchart LR
で、上から下は
flowchart TD

文字列の表現(bold, italic), Top to Down

---
title: Flowchart title Top to Down
---
flowchart TD
    markdown["`normal **bold** _italic_`"]
    item1["box"]
    markdown --> item1

形状, 線(thick, invisible, text), Left to Right

利用形状：角丸四角、関数、データ、丸

---
title: Flowchart title Left to Right
---
flowchart LR
    item1["box"]
    item2("round edge")
    item3[[subroutine]]
    item4[(Database)]
    item5((circle))
    item1 -- first --> item2 ==>|thick| item3
    item3 ~~~|invisible| item4
    item4 --> item5

形状2, 線(dot)

利用形状：右向きの台形(by ChatGPT)、ひし形、六角形、平行四辺形
右向きの台形(by ChatGPT)という名前には違和感。鯉のぼり(carp streamer)の方が見た目通りだと思うのだけど、こっちで定着しないだろうか？無理か。

---
title: Flowchart title Left to Right2
---
flowchart LR
    item1>carp streamer]
    item2{diamonds}
    item3{{prepare}}
    item4[/parallelogram/]
    item5[\parallelogram alt\]
    item1 -.->|dot|item2
    item2 --> item3 & item4 --> item5

形状3

利用形状：台形、並行処理、二重円

---
title: Flowchart title Left to Right3
---
flowchart LR
    item1[/trapezoid\]
    item2[\trapezoid alt/]
    item3(((double circle)))
    item1 --> itemP[parallel processing]
    subgraph parallel
        itemP --> P1[parallel 1]
        itemP --> P2[parallel 2]
        itemP --> P3[parallel 3]
    end
    P1 --> item2
    P2 --> item2
    P3 --> item2
    item2 --> item3

所感

記事から欲しい図や線を見つけて取り出しながらフローチャートを書くことを想定して作成。
表にない図はどう使うのか用途がわからない。
線の上のテキストずらせないだろうか。無理かな？
シーケンス図やクラス図、ユーザジャーニーの書き方も纏める予定だったものの量の問題で断念。別記事で作成する予定。