Mermaid図表生成

Mermaidコードから図を描画する

Mermaidは、図の構造をテキストで記述し、そのコードを図として表示するための記法です。図の先頭で種類を宣言し、続けてノード、参加者、関係、タスクなどを書きます。Mermaidの公式構文資料でも、図種別の宣言がパーサーに図の種類を伝え、その後に内容を定義する構成が説明されています。コードを直せば、図の文言やつながりも編集できます。

このページではコード欄に記法を入力または貼り付けて、「図表を生成」を押すとプレビューが更新されます。入力中に自動で描き直すライブプレビューではありません。描画できた図はSVGとして保存でき、コードもコピーできます。

6種類のサンプルとテーマ

サンプルにはフローチャート、シーケンス図、クラス図、ガントチャート、円グラフ、ER図があります。選ぶと、その種類の編集用コードがコード欄に入ります。サンプル内の人物名や説明文は中国語の例文ですが、コード欄で日本語など任意の文字に置き換えて使えます。テーマはdefault、forest、dark、neutral、baseから選択でき、配色など見た目を調整します。テーマ変更は図の意味や記述内容を補正するものではありません。

コードを編集してSVGを保存する

1. サンプルを選ぶ：作りたい図に近い種類を選び、コード欄に入った例を土台にします。既存のMermaidコードがあれば、そのまま貼り付けても構いません。
2. 定義とラベルを編集する：図種別の宣言、ノード名、矢印、メッセージ、日付などを目的に合わせて書き換えます。たとえばフローチャートなら、flowchart TDで上から下への向きを宣言し、A[開始] --> B[確認]のようにノードと接続を記述できます。
3. テーマを選び描画する：必要ならテーマを変更し、「図表を生成」を押します。コードやテーマを変更した後も、プレビューを更新するには再度ボタンを押してください。
4. 結果を確認して出力する：図中文字、分岐、矢印の向き、順序を確認します。問題がなければSVGをダウンロードし、コードはコピーして対応する文書や開発環境で再利用します。

最初は短い定義で描画を確かめ、要素を少しずつ追加すると構文上の問題を見つけやすくなります。

描画と出力についてよくある質問

構文と図の内容を別々に確認する

Mermaidの構文はバージョンや図種別によって対応状況が異なります。このページはMermaid 11系の描画環境を読み込むため、新しい版で追加された構文や実験的な構文が使えるとは限りません。読み込みに失敗した場合は、ネットワークを確認してページを再読み込みしてください。

描画エラーが出たら、冒頭の図種別宣言、記号、括弧、引用符、ノード間の接続を見直します。描画が成功しても、図が業務上の事実や設計意図を正しく表しているかは自動判定されません。重要な資料に使う前に、ラベル、方向、日付、関係を元の要件と照合してください。また、利用先の文書やビューアでSVGが意図どおり表示されることも確認してください。