登録することで、Miro のサービス利用規約とプライバシーポリシーに同意したものとします。
Mermaid フローチャート構文 事例つき完全ガイド
要点：Mermaid フローチャートは、手で描くのではなくテキストで定義する図です。たとえば A --> B と入力すると、Mermaid が接続された2つのボックスを描画します。このガイドでは、基本的なノードの図形からスタイリングやクリックイベントまで構文のあらゆる部分を網羅し、そのコードを Miro で実際に編集可能な図に変換する方法まで解説します。
更新されていないフローチャート
よくあることです。ダイアグラム作成ツールで図形の位置を揃え、矢印の重なりを直し、色を意図的に見せるために20分を費やします。書き出して Wiki に貼って終わりです。3週間後にプロセスが変わっても、図は更新されていません。現在の「source of truth」は、直近のスプリント以降は正しくないもののスクリーンショットになってしまいます。
図をコードではなく画像として扱うことが問題です。画像は差分管理やバージョン管理ができず、実際のコードベースを読み取ったAIエージェントによって生成したり更新したりすることもできません。Mermaid フローチャートなら可能です。
Mermaid フローチャート
Mermaid フローチャートは、ドラッグ＆ドロップのキャンバスではなく、プレーンテキストの構文で定義するフローチャートです。ノードとその接続を数行で記述すると、Mermaid がレイアウトや矢印、図形を含めて自動的に図を描画します。
これはMermaidの一部で、シーケンス図やクラス図、タイムラインをはじめとする多くの図表タイプに対応したオープンソースの図表記法です。フローチャートが最も一般的なのは理由があり、ほとんどのプロセスや意思決定ツリー、ワークフローはノードと接続で表現できます。
近年Mermaidが再び注目を集めている理由は単純です。AIモデルが流暢に生成できるからです。AIのコーディングエージェントにシステムの図を作成させると、最も多く学習している形式であるため、Mermaid構文が返ってくることが多いです。テキストは2次元の画像よりも言語モデルが扱いやすいため、エージェントは図全体を一から描き直すのではなく、図の特定部分を正確に編集できます。
基本構文：方向指定と宣言
すべての Mermaid フローチャートは direction キーワードで始まります。この1行で図の読み方向（上から下または左から右）が決まり、毎回最初に記述します。
- TD または TB：上から下
- BT：下から上
- LR：左から右
- RL：右から左
flowchart TD A --> B B --> C style A fill:#fff6b6 style B fill:#fff6b6 style C fill:#fff6b6
flowchart LR Start --> Medium Medium --> End style A fill:#fff6b6 style B fill:#fff6b6 style C fill:#fff6b6図が数ステップを超えると、Start、Medium、End のような名前付きで説明的なノードの方が単一文字よりはるかに読みやすくなります。素早いスケッチには文字を使い、共有する予定の図には実際のラベルを使いましょう。
ノードの図形 — 括弧構文による指定
ノード内のテキストを囲む括弧記号によって、描画される図形が決まります。メニューから図形を選ぶ必要はありません。適切な記号を入力するだけで、Mermaid が残りを解釈して描画します。
flowchart TD A[Rectangle] B(Rounded) C([Stadium]) D[[Subroutine]] E[(Cylindrical)] F((Circle)) G>Asymmetric]これらの図形のうちいくつかは、知っておくと便利な特定のユースケースに対応しています。標準的な処理ステップには長方形 [Text] を、開始点や終了点にはスタジアム形 ([Text]) を、ノードが別に定義されたプロセスへの呼び出しである場合はサブルーチン [[Text]] を使います。データベースやデータストアを表すときは円筒形 [(Text)] を、フロー内の単一で独立したポイントには円形 ((Text)) を使います。
Mermaid では、判定に使うひし形や準備ステップに用いる六角形など、知っておくと便利ないくつかの図形が用意されています。特殊文字（スラッシュや疑問符など）は、ラベルを引用符で囲む必要があります：
flowchart TDH{Rhombus} I{<!-- -->{Hexagon}} J["s3/"] K["s4!"] L(("s5?"))リンクと矢印によるノードの接続
矢印はあるステップが次のステップにどうつながるかを示します。Mermaid では、その接続の確実性や任意性に応じて複数の矢印の種類が用意されています。
flowchart tdA --> B %% solid arrowA --- B %% solid lineA -.-> B %% dottedA ==> B %% thickA -->|label| B %% with textA -- text --> B %% alt labelstyle A fill:#e7e7e7style B fill:#c6dcff linkStyle 5 stroke:#bd0a0a linkStyle 4 color:#bd0a0a,stroke:#6631d7それぞれ意味が異なります：--> は標準の実線矢印、 --- は矢印のない実線でゆるやかな関連を示す線、 -.-> はオプションや非同期の経路を示す点線矢印、 ==> は重要経路を示す太い矢印です。矢印にラベルを付けるには、-->|label| または -- label --> を使用します。どちらも同じ動作です。linkStyle を使い、図中の矢印を位置（最初が 0、次が 1、というように）で指定すると、ボード上のすべての矢印ではなく特定の接続だけの色を変更できます。
すべてのペアを個別に記述する代わりに、1 行で複数のノードをつなげることもできます：
flowchart tdA & B --> C & D %% multistyle A fill:#fff6b6 style B fill:#c6dcff style C fill:#edfaf2 style D fill:#ffc6c6その一行は、4つの個別の矢印記述と同じ役割を果たします。些細なことですが、複雑な図のコードを読みやすく保ちます。
サブグラフ：グループ化と階層構造
実際のシステムは複数の区分に分かれます：フロントエンド、バックエンド、実際には3工程で構成されているように見える支払い処理など。サブグラフを使うと、関連するノードをひとまとめに囲み、その領域に独自のフロー方向を設定できます。
flowchart TB subgraph frontend direction LR UI --> API end subgraph backend API --> DB end frontend --> backendここで覚えておくべき点が二つあります。まず、サブグラフ内の方向指定は親フローチャートの方向を上書きするため、全体が上から下に流れる図でも、サブグラフ内で frontend を左から右に流すことができます。次に、サブグラフは他のノードと同様にリンクできます。そのため、上の例で frontend --> backend と表記されているように、両側がさらに箱の集合であってもリンクが機能します。
テーマ設定と init ディレクティブ
フローチャートの色をブランドに合わせたい場合や、インシデントの重大度を示したい場合、あるいは単に好みに合わせたい場合でも、init ディレクティブを使えばノードを1つも描く前に色を設定できます。 このディレクティブは図の最初の行に必ず記述する必要があります。
%%{init: { "theme": "base", "themeVariables": { "primaryColor": "#ADF0C7", "primaryTextColor": "#067429", "edgeLabelBackground": "#FFFEEE", "lineColor": "#36352F" }}}%%flowchart LR A[Start] --> B{Choice} B -->|yes| C[Done] B -->|no| D[Retry]Mermaidには5つの組み込みテーマが用意されています：default、dark、forest、neutral、base。baseのみがthemeVariablesオブジェクト全体へのアクセスを提供するため、プリセットの配色ではなく独自の色を指定したい場合はbaseから始めるとよいです。
インタラクション：クリックイベントとコールバック
フローチャートは必ずしも静的である必要はありません。ノードにリンクを開く動作、JavaScriptの関数を実行する動作、ホバーでツールチップを表示する動作などを割り当てることができます。ダイアグラムをドキュメントとしても利用する場合に便利です。
flowchart TD A[Visit Miro] B[Hover Tooltip] C[Open Docs] click A "https://miro.com" _blank click B callback "Tooltip" click C href "/docs" "Open docs"%% JS callback%% <script>%% const callback = (id) =>%% alert('Clicked ' + id);%% </script>ノードAは新しいタブでリンクを開きます。ノードBはcallbackというJavaScript関数を呼び出し、ホバー時に「Tooltip」というツールチップを表示します。ノードCは相対リンクを現在のタブで開き、独自のホバー用テキストを表示します。このパターンは、図のノードが対応するランブックやチケットに直接リンクする内部ドキュメントでよく見られます。
スタイル：色・クラス・Markdown ラベル
単一ノードであれば一時的なスタイルでも問題ありませんが、すぐに繰り返しが目立つようになります。classDef を使うとスタイルを一度定義して図全体で再利用でき、ノードが 5〜6 個以上になると特に有用です。
flowchart LR A[Node A] B[Node B] C[Node C] D[Node D] --> E[Node E] %% Inline style style A fill:#f9f,stroke:#333,stroke-width:2px %% Reusable class definition classDef error fill:#fdd,stroke:#c00,color:#900 classDef success fill:#dfd,stroke:#0a0 %% Assign class class A,B error class C success %% Shorthand class assignment D:::success --> E:::errorclass の割り当ては 2 通りあります。独立した行に class A,B error と書く方法、または短縮表記の D:::success を行内で使う方法です。どちらも同じ動作をします。コードの可読性が高くなる方を選んでください。
より表現豊かなラベルにするには、まずHTMLラベルを無効化すると、Mermaidはノードやエッジ内で基本的なMarkdown書式をサポートします：
---config: htmlLabels: false---flowchart LRsubgraph "One" a("`The **cat** in the hat`") -- "edge label" --> b{<!-- -->{"`The **dog** in the hog`"}}endsubgraph "`**Two**`" c("`The **cat** in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")end全体の例
このログインフローは、図形、サブグラフ、スタイルクラス、再試行ループ、クリックイベントなど、前述したほとんどの要素を1つの図にまとめています。
flowchart TD Start((Start)) --> Login[/Enter creds/] Login --> Check{Valid?} Check -->|yes| Home[Dashboard]:::ok Check -->|no| Err[Show error]:::bad Err -.retry.-> Login Home ==> Logout([Logout]) subgraph auth direction LR Login --> Check end classDef ok fill:#dfd,stroke:#0a0 classDef bad fill:#fdd,stroke:#c00 click Home "/dashboard" _selfここに含まれる新しい要素はごくわずかであることがわかります。前のセクションで示した同じ図形、矢印、subgraph、classDef パターンを組み合わせ、実務で使うような図にまとめたものです。ここで新たに使われている図形は Login[/Enter creds/] の平行四辺形で、Mermaid では入力ステップを表すのに使われることが多いです。Mermaid の記法を使いこなす本当のコツは、すべての記号を暗記することではありません。図の大部分をカバーする少数のパターンがどれかを見極めることです。
構文の例は当社の Mermaid フローチャート チートシート をご覧ください。
Mermaid フローチャートの活用先：Miro
コードを記述することは作業の半分にすぎません。内容を確認し、判断を問い、プロセスの変更に合わせて更新する必要があります。従来、Mermaid はここで行き詰まりがちでした。図をレンダリングしてスクリーンショットを貼るだけだと、誰かがそれに手を加えた瞬間にコードと図の連携が失われます。
Miro は公開ベータの Structured Diagrams with Mermaid により、そのギャップを埋めます。Mermaid の構文を Miro のボードに貼り付けるか、Claude Code のような AI エージェントにコードベースから直接生成させると、図は静止画像ではなく、実際に編集可能な Miro の図形としてレンダリングされます。Mermaid のコードが唯一の情報源として保持され、図を視覚的に編集すると基になっているコードも更新されるため、コードと図が乖離することはありません。
いくつかの理由で重要です。チームは図を巡って個別に作業するのではなく、図上で共同作業できます：ノード上に直接コメントを付けられるため、Slackで別スレッドを立てる必要がなく、全員が実際の意思決定の文脈に留まれます。図は内部では引き続きMermaidであるため、AIエージェントがコードを読み取り、狙いを定めた編集を行ったり、チームのコメントをもとにアーキテクチャ決定レコードの下書きを作成してプルリクエスト用に準備したりできます。他者が作ったレイアウトに縛られることもありません。フロー方向の変更、間隔の調整、あるいはコードパネルを開いて構文を手動で編集するなど、すべてボードを離れることなく実行できます。
フローチャートは現在、ビジュアル編集機能に完全対応しています。シーケンス図、クラス図、エンティティ・リレーションシップ図もネイティブ図形としてレンダリングされますが、ビジュアル編集が追いつくまではコードファーストでの利用が推奨されます。
MiroでのMermaidフローチャート作成
- 作成バーを開き、フォーマットを選択してからダイアグラムを選び、コードで作成をクリックします。
- 既にある Mermaid 構文を貼り付ける、テンプレートから開始する、または AI エージェントにコードベースや要件から直接フローチャートを生成させることができます。
- 自動レイアウトにより Miro のネイティブな図形としてレンダリングされるため、線が交差しないように図形を手で動かして調整する必要がありません。
- 図をフォーカスモードで開いて直接編集できます。図形をクリックしてラベルやスタイルを変更したり、フロー方向を調整したり、コードパネルを開いて Mermaid 構文を手で編集したりできます。
- チームを招待して、意思決定が行われている箇所に直接コメントを追加してもらえます。
- 作業が完了したら、画像としてエクスポートする、Mermaid コードをリポジトリにコピーする、またはエージェントに Miro の MCP サーバー経由で図とチームのコメントを読み取らせることができます。
Mermaid を既に知っている場合は、コードパネルに直接入力して始められます。慣れていない場合は、テンプレートから始め、すでに動作するものを編集しながら構文を学んでください。
試せる Mermaid フローチャート例
最初の Mermaid フローチャートをゼロから作成する必要はありません。これらのテンプレートはすべて実際の Mermaid ボードで、開いて内容を確認し、編集できるので、空のキャンバスを見つめる代わりに既に動作するものを変更しながら構文を学べます。
Mermaid を一度も記述したことがない場合は、まずこれを開いてください。本ガイドと同じペースで構文を解説します。方向キーワード、ノードの図形、矢印の種類、そしてスタイルを適用した例をいくつか取り上げ、各例はコードのすぐ横にレンダリング結果を表示します。ライブのボードであり静的な参照ページではないため、ノードのラベルを変更したり図形を差し替えたりすると、レンダリングが即座に更新されます。その即時フィードバックを通じて学ぶことが、構文表を丸暗記するよりも各記号の動作を最も速く理解する方法です。
このテンプレートには、すぐに動作するログインフローがあらかじめ組み込まれています。ユーザーが認証情報を入力すると、アプリがそれを検証し、図は成功時にダッシュボードへ進む経路と、失敗時に再試行へ戻る経路に分岐します。本ガイドの前半で示した完全な例と趣旨が近く、検証ステップを含む認証、登録、承認などのフローをドキュメント化する際に便利なテンプレートです。ノードのラベルや分岐ロジックを置き換えるだけで、レイアウトを変更せずに独自の認証フロー図を作成できます。
このテンプレートは、図が単純な線形フローでは収まりきらなくなったときに使うテンプレートです。サブグラフ（本ガイドで扱った同じグルーピング手法）を中心に構成されており、サービス、API、データストアを明確なラベル付きのセクションに枠でまとめられます。そのため、すべてのノードが一つの平面的な図の中でただ散在する状態を避けられます。導入資料やアーキテクチャレビュー、複数のサービス間の実際のやり取りを示す必要がある図の出発点として最適です。
このテンプレートは、商品カタログの閲覧、決済処理、バックエンドでの受注処理、自動配信されるトランザクションメールなど、E コマースの全工程を可視化します。
これらのテンプレートのいずれかを使い、手順を差し替えるだけで、空のキャンバスから始めるより数分で実用的なフローチャートが作成できます。
よくある質問
Mermaid フローチャートとは？ Mermaid フローチャートは、手で描くのではなく Mermaid の構文でプレーンテキストとして定義するフローチャートです。ノードとそれらをつなぐ矢印を記述すると、Mermaid がレイアウトや図形を含め、自動的に図をレンダリングします。
Mermaid でフローチャートを作成するには？ まず flowchart TD のような方向キーワードで始め、ノードと矢印を追加します。例: A[Start] --> B[End]。角括弧で図形を指定し、矢印にラベルを付けるには -->|label| を使い、関連する手順は subgraph でグループ化します。
Mermaid フローチャートにスタイルを適用できますか？ はい。単発の変更にはインラインスタイルを使用し、複数のノードで再利用するスタイルには classDef と class を使います。図の先頭に %%{init}%% ディレクティブを置いてテーマやカスタムカラーを設定できます。
MiroでMermaidフローチャートを使うには？ 作成バーを開き、フォーマットを選択してからダイアグラムを選び、コードで作成を選択します。Mermaidの構文を貼り付けるか、AIエージェントに生成させると、Miroが編集可能なネイティブ図形としてレンダリングし、図形のスタイル変更やコメント追加、共有ができます。
Mermaidフローチャート向けのMiroの機能は？ MiroのStructured Diagrams with Mermaidは、Mermaidのコードを実際の編集可能な図形としてレンダリングし、コードと図がどちらかの変更に応じて同期を保ち、AIエージェントがMiroのMCPサーバー経由で図を生成したり読み取ったりできるようにします。
ぜひお試しください
Mermaidフローチャートの構文を最速で学ぶには、実際に1つ書いてレンダリングを確認することです。MiroのMermaid diagramエディタを開き、上の例のいずれかを貼り付けて、実際のプロセスに合うように編集してみてください。
関連ページ
新しい働き方を Miro で実現しましょう！
