コードで描く図（Mermaid）

Diagram as Code

Mermaidのフローチャート・シーケンス図・円グラフを自前のパーサと配置エンジンで打つそばから描き、対応する文法をそのまま示してSVGかPNGで書き出します。

左にMermaidの文を書くと、右に絵が打つそばから描かれます。パーサーも配置も描画もMermaidのライブラリではなくこのサイト自前のものなので、対応している文法をページに全部書き出してあります。図の種類は三つ、そのそれぞれで読み取る構文が正確に何かを、です。

🔒 ブラウザの中だけで動きますdiagrammermaidflowchartdocs

Mermaid コード

プレビュー

対応している文法 (これ以外は行番号つきのエラーとして伝えます)

フローチャート — graph / flowchart

方向 TD, TB, LR, RL, BT
図形 [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
線 -->, ---, -.->, -.-, ==>, ===
ラベル -->|文字|, -- 文字 -->, -. 文字 .->, == 文字 ==>
A --> B --> C, A & B --> C
subgraph 名前 [題名] … end (入れ子可)
style, classDef, class, :::クラス名
%% コメント, ; 区切り

非対応: click, linkStyle, direction, <-->・--o・--x の矢印, Markdown 文字列

シーケンス — sequenceDiagram

participant A as 名前, actor B
->>, -->>, ->, -->, -x, --x, -), --)
->>+B / ->>-B, activate / deactivate
Note left of · right of · over A,B
loop, alt / else, opt … end
autonumber

非対応: par, critical, break, rect, box, create/destroy, links

円グラフ — pie

pie [showData] [title 題名]
"名前" : 値

クラス図・状態図・ER 図・ガントチャート・マインドマップなど、ほかの種類はまだ描けません。ガントチャートには別の道具があります。

使い方

例から始めます
フローチャート、シーケンス、円グラフのそれぞれに、パーサーが理解するものの大半を使った見本があります。文法の一覧を見ながら書き起こすより、見本を直すほうが速く済みます。
エラーは行番号で読みます
対応していない文法は、何行目で何がおかしいかを添えて断ります。真っ白な画面を前に、半分ずつ消しながら原因を探す必要がありません。
書き出すか、印刷します
SVGは文字を選択でき、拡大しても崩れません。発表資料やチャットには2倍で出したPNGが安全です。

よくある質問

どの図が描けますか

フローチャート（graph / flowchart）、sequenceDiagram、pieです。クラス図・状態遷移図・ER図・gantt・gitGraph・マインドマップなどは、あいまいに失敗するのではなく名前を挙げて知らせます。ガントチャートはこのサイトに別の道具があります。

mermaid.liveで通るコードがここで通りません

ページに書いてある一覧の外の構文である可能性が高いです。`click`、`linkStyle`、subgraphの中の`direction`、`<-->`・`--o`・`--x`の矢印、YAMLのフロントマター、Markdown文字列といったものです。エラーがどれなのかを名指しし、その一覧が対応範囲のすべてです。