This is the Miro team, bringing you the updates and insights worth knowing — built to help you work better, with Miro and everything else in your workflow.

最終公開日2026年9月24日

要点：Mermaid フローチャートは手で描く代わりにテキストで記述する図です。A --> B のように入力すると、Mermaid が2つの接続されたボックスを描画します。このガイドでは基本的なノードの図形からスタイル設定やクリックイベントまで、構文のすべてと、そのコードを Miro で実際に編集可能な図に変換する方法までを網羅します。

フローチャートの陳腐化

よくある話です。ダイアグラム作成ツールで20分を費やして図形の位置を揃え、矢印の重なりを解消し、色が意図したとおりに見えるように調整します。エクスポートしてウィキに貼り付け、そのまま次の作業に移ります。3週間後にプロセスが変わっても誰も図を更新せず、現在、唯一の信頼できる情報源は既に実態と異なるスクリーンショットになってしまっています。

図を画像として扱い、コードとして扱わないことが問題です。画像は差分表示やバージョン管理ができませんし、実際のコードベースを読んだAIエージェントが生成することもできません。しかし、Mermaid フローチャートなら可能です。

Mermaid フローチャートの概要

Mermaid フローチャートは、ドラッグアンドドロップのキャンバスではなく、プレーンテキストの構文で定義するフローチャートです。ノードとその接続を数行で記述すると、Mermaid がレイアウト、矢印、図形を含めて図を自動的にレンダリングします。

これは Mermaid の一部で、シーケンス図やクラス図、タイムラインをはじめとする多くの図式に対応するオープンソースのダイアグラム記法です。フローチャートは最も一般的で、その理由は明白です。ほとんどのプロセスや決定木、ワークフローはノードと接続で表現できるからです。

Mermaid は最近再び注目を集めています。理由は単純で、AI モデルが Mermaid 構文を問題なく生成できるためです。AI コーディングエージェントにシステムの図を作らせると、最も慣れている形式として Mermaid 構文を返してくることが多いです。テキストは二次元の画像よりも言語モデルが扱いやすいため、エージェントは図全体を描き直すのではなく、特定箇所を精密に編集できます。

基本構文：方向キーワードと宣言

すべての Mermaid フローチャートは、方向キーワードから始まります。この一行で図が上から下に表示されるか、左から右に表示されるかが決まり、毎回最初に書く要素です。

TD または TB：上から下
BT：下から上
LR：左から右
RL：右から左

1flowchart TD2    A --> B3    B --> C4  style A fill:#fff6b65  style B fill:#fff6b66  style C fill:#fff6b6

1flowchart LR2    Start --> Medium3    Medium --> End4  style A fill:#fff6b65  style B fill:#fff6b66  style C fill:#fff6b6

名前付きで説明的なノード（Start、Medium、End）は、図が数ステップを超えると単一文字よりずっと読みやすくなります。素早いスケッチでは文字を使い、共有する予定の図には実際のラベルに切り替えるとよいです。

括弧構文で決まるノードの形

ノード内のテキストを囲む括弧が、レンダリングされる図形を決定します。メニューから図形を選ぶ必要はありません。正しい記号を入力すれば、Mermaid が残りを自動で判断します。

1flowchart TD2    A[Rectangle]3    B(Rounded)4    C([Stadium])5    D[[Subroutine]]6    E[(Cylindrical)]7    F((Circle))8    G>Asymmetric]

これらの図形のうちいくつかは、把握しておくと便利な特定のユースケースに対応しています。標準的なプロセスのステップには長方形 [Text] を使います。開始点や終了点にはスタジアム形 ([Text]) を使います。ノードが別に定義されたプロセスの呼び出しを表す場合はサブルーチン [[Text]] を使います。データベースやデータストアを表現する際は円筒形 [(Text)] を使います。フロー内の単一で完結したポイントには円形 ((Text)) を使います。

Mermaid には、決定用のひし形や準備ステップ用の六角形など、知っておくべき図形がいくつかあります。スラッシュや疑問符などの特殊文字をラベルに含める場合は、ラベルを引用符で囲む必要があります：

1flowchart TD2H{Rhombus}3    I{<!-- -->{Hexagon}}4    J["s3/"]5    K["s4!"]6    L(("s5?"))

リンクと矢印 — ノードの接続

矢印は、あるステップが次のステップにどのようにつながるかを示します。Mermaid では、その接続の強さや任意性に応じて、複数の種類の矢印が用意されています。

1flowchart td2A --> B          %% solid arrow3A --- B          %% solid line4A -.-> B         %% dotted5A ==> B          %% thick6A -->|label| B   %% with text7A -- text --> B  %% alt label8style A fill:#e7e7e79style B fill:#c6dcff10  linkStyle 5 stroke:#bd0a0a11  linkStyle 4 color:#bd0a0a,stroke:#6631d7

それぞれ意味が異なります：--> は標準の実線矢印、 --- は矢じりのない実線でゆるい関連を示し、 -.-> はオプションや非同期の経路を表す点線矢印、==> は重要経路を示す太い矢印です。矢印にラベルを付けるには、-->|ラベル| または -- ラベル --> のいずれかを使用します。どちらも同じ動作をします。また、図内での位置（最初が0、2番目が1、…）で矢印を指定する linkStyle を使えば、ボード上のすべての矢印ではなく特定の接続だけの色を変更できます。

各ペアを個別に書く代わりに、複数のノードを1行でつなぐこともできます：

1flowchart td2A & B --> C & D  %% multi3style A fill:#fff6b64  style B fill:#c6dcff5  style C fill:#edfaf26  style D fill:#ffc6c67

その一行は、4つの個別の矢印記述と同じ役割を果たします。小さな工夫ですが、情報量の多い図のコードを読みやすく保ちます。

サブグラフ：グループ化と階層構造

実際のシステムには区画があります：フロントエンドやバックエンド、実は3工程が1つに見えている決済ステップなどです。サブグラフを使うと、関連するノードをひとまとめにしてボックス化し、そのボックス内だけ別のフロー方向を設定することもできます。

1flowchart TB2    subgraph frontend3        direction LR4        UI --> API5    end6    subgraph backend7        API --> DB8    end9    frontend --> backend

ここで覚えておくべき点が2つあります。まず、サブグラフ内の方向指定は親フローチャートの方向を上書きするため、全体の図が上から下に流れていてもフロントエンド部分だけを左から右に配置できます。次に、サブグラフは他のノードと同様にリンクできるため、上の例でフロントエンド --> バックエンドとつながっているのは、両側がさらに箱を含む箱になっていても機能するということです。

テーマ設定と %%{init}%% ディレクティブ

フローチャートの色をブランドに合わせたい場合、インシデントの重大度を示したい場合、あるいは単に好みに合わせたい場合、%%{init}%% ディレクティブを使えばノードを1つ描く前に色を設定できます。図の最初の行に記述する必要があります。

1%%{init: {2  "theme": "base", 3  "themeVariables": {4    "primaryColor": "#ADF0C7",5    "primaryTextColor": "#067429",6    "edgeLabelBackground": "#FFFEEE",7    "lineColor": "#36352F"8  }9}}%%10flowchart LR11    A[Start] --> B{Choice}12    B -->|yes| C[Done]13    B -->|no| D[Retry]

Mermaid には 5 つの組み込みテーマがあり、default、dark、forest、neutral、base が含まれます。base のみが themeVariables オブジェクト全体へのアクセスを提供するため、プリセットのパレットではなくカスタムカラーを使いたい場合は base から始めます。

インタラクション：クリックイベントとコールバック

フローチャートは静的である必要はありません。ノードにリンクを開かせたり、JavaScript 関数を実行させたり、ホバー時にツールチップを表示させたりできます。図がドキュメントとしても使われる場合に便利です。

1flowchart TD2    A[Visit Miro]3    B[Hover Tooltip]4    C[Open Docs]56    click A "https://miro.com" _blank7    click B callback "Tooltip"8    click C href "/docs" "Open docs"91011%% JS callback12%% <script>13%%   const callback = (id) =>14%%     alert('Clicked ' + id);15%% </script>

ノード A は新しいタブでリンクを開きます。ノード B は callback という名前の JavaScript 関数を呼び出し、ホバー時に表示されるテキスト「Tooltip」を表示します。ノード C は現在のタブで相対リンクを開き、それぞれ固有のホバーテキストを持ちます。このパターンは、図のノードが対応する runbook やチケットに直接リンクする社内ドキュメントで最もよく見られます。

スタイリング：色・クラス・マークダウンラベル

単一のノードでは一度きりのスタイル指定でも問題ありませんが、すぐに繰り返しが増えます。classDef を使えばスタイルを一度定義してフローチャート全体で再利用できます。ノードが5つか6つを超えると、この違いが重要になります。

1flowchart LR2    A[Node A]3    B[Node B]4    C[Node C]5    D[Node D] --> E[Node E]67    %% Inline style8    style A fill:#f9f,stroke:#333,stroke-width:2px910    %% Reusable class definition11    classDef error fill:#fdd,stroke:#c00,color:#90012    classDef success fill:#dfd,stroke:#0a01314    %% Assign class15    class A,B error16    class C success1718    %% Shorthand class assignment19    D:::success --> E:::error

クラスの割り当ては2通りあります。単独行に class A,B error と書く方法、または省略形 D:::success を使ってインラインで指定する方法です。どちらも同じ効果です。コードの読みやすさを優先して使い分けてください。

表現豊かなラベルを使うには、まず HTML ラベルを無効化してください。そうすると Mermaid はノードやエッジ内で基本的な Markdown 書式をサポートします。

1---2config:3  htmlLabels: false4---5flowchart LR6subgraph "One"7  a("`The **cat**8  in the hat`") -- "edge label" --> b{<!-- -->{"`The **dog** in the hog`"}}9end10subgraph "`**Two**`"11  c("`The **cat**12  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")13end

すべてを組み合わせた実践例

このログインフローは、これまでに解説した要素のほとんどを 1 つの図にまとめたものです：図形、サブグラフ、スタイルクラス、再試行ループ、クリックイベントを含みます。

1flowchart TD2    Start((Start)) --> Login[/Enter creds/]3    Login --> Check{Valid?}4    Check -->|yes| Home[Dashboard]:::ok5    Check -->|no| Err[Show error]:::bad6    Err -.retry.-> Login7    Home ==> Logout([Logout])89    subgraph auth10        direction LR11        Login --> Check12    end1314    classDef ok fill:#dfd,stroke:#0a015    classDef bad fill:#fdd,stroke:#c0016    click Home "/dashboard" _self

ここにある新しい要素はほとんどありません。前のセクションで出てきた図形、矢印、サブグラフ、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 エージェントがそれを読み取り、特定の箇所を編集したり、チームのコメントからアーキテクチャ決定記録のような文書を下書きしてプルリクエストとして提出できる形で準備したりできます。他人のレイアウトに縛られることもありません。フローの向きを変えたり、間隔を調整したり、コードパネルを開いて構文を手で編集したりと、いずれもボードを離れることなく行えます。

フローチャートは現在、完全なビジュアル編集体験に対応しています。シーケンス図、クラス図、エンティティ関係図（ER 図）もネイティブ図形としてレンダリングされますが、ビジュアル編集が追いつくまではコード優先で扱う想定です。

Miro での Mermaid フローチャート作成

作成バーを開き、フォーマットを選択してからダイアグラムを選び、コードで作成をクリックします。
既存の Mermaid 構文を貼り付ける、テンプレートから始める、または AI エージェントにコードベースや要件から直接フローチャートを生成させることができます。
自動レイアウトでネイティブな Miro 図形としてレンダリングされるため、ボックスを手作業で微調整して線が交差しないようにする必要がありません。
ダイアグラムをフォーカスモードで開き、直接編集します。図形をクリックしてラベルやスタイルを変更したり、フローの方向を調整したり、コードパネルを開いて Mermaid 構文を手で編集したりできます。
意思決定が行われている箇所に直接チームを招待して、ダイアグラム上でコメントしてもらいます。
完了したら、画像としてエクスポートする、Mermaid コードをリポジトリにコピーする、またはエージェントに Miro の MCP サーバー経由でダイアグラムとチームのコメントを読み取らせることができます。

すでに Mermaid を知っている場合は、コードパネルに直接入力して始められます。まだの場合はテンプレートから開始し、すでに動作する例を編集しながら構文を学んでください。

さらに試せる Mermaid フローチャート例

最初の Mermaid フローチャートを一から書く必要はありません。これらのテンプレートはすべて、開いて閲覧・編集できる実際の Mermaid ボードです。空のキャンバスを見つめる代わりに、すでに動作するものを変更しながら構文を学べます。

Miro における Mermaid ダイアグラム入門

Mermaid をまだ書いたことがない場合は、まずこちらを開いてください。本ガイドと同じペースで構文を順に確認します。方向キーワード、ノードの形、矢印の種類、そしていくつかのスタイル付き例を取り上げ、各例はコードのすぐ隣にレンダリングされた図が表示されます。このボードは静的なリファレンスページではなくライブボードなので、ノードのラベルを変更したり図形を入れ替えたりすると、レンダリングが即時に更新されます。その即時のフィードバックループにより、ただ構文表を暗記するより各記号が実際に何をするかを最速で学べます。

Mermaid コードによるユーザー認証フロー

既に動作するログインフローが組み込まれています。ユーザーが認証情報を入力し、アプリがそれを検証すると、図はダッシュボードへの成功経路または再試行へ戻る失敗経路に分岐します。本ガイドの前半の完全な例と趣旨が近く、検証ステップを含む認証、登録、承認フローを文書化する際に便利なテンプレートです。ノードのラベルと分岐ロジックを差し替えれば、レイアウトを変えることなく独自の認証フロー図を作成できます。

マイクロサービスの技術アーキテクチャ

図が単純な線形フローでは収まりきらなくなったときに使えるテンプレートです。サブグラフを中心に構成されており、本ガイドで紹介したグルーピング手法と同様に、サービス、API、データストアを明確にラベル付けしたセクションにまとめられます。各ノードを平面的に並べる代わりに、実際の通信関係をわかりやすく示せます。オンボーディング資料、設計レビュー、あるいは複数のサービスが個別の動作だけでなくどのように相互にやり取りしているかを示す必要がある図に適した出発点です。

E コマース注文フロー

このテンプレートは、商品カタログの閲覧、決済処理、バックエンドでのフルフィルメント、自動送信される取引通知メールまでを含む、E コマースの一連のプロセスを可視化します。

これらのテンプレートを選んで手順を差し替えるだけで、空のキャンバスから始めるより数分で実用的なフローチャートが作成できます。

よくある質問

Mermaid フローチャートとは何ですか？ Mermaid の構文でプレーンテキストとして定義するフローチャートで、手で図を描くのではなく、ノードとそれらをつなぐ矢印を記述すると、Mermaid がレイアウトや図形も含めて図を自動的に描画します。

Mermaid でフローチャートを作成するには？ まず flowchart TD のような方向指定キーワードから始め、ノードと矢印を追加します。例: A[Start] --> B[End]。角括弧で図形を指定し、矢印のラベルは -->|label| のように書き、関連するステップは subgraph でグループ化します。

Mermaid フローチャートのスタイル設定はできますか？ はい。単発の変更にはインラインスタイルを使用し、複数のノードで使い回すスタイルは classDef と class を使います。図の先頭に %%{init}%% ディレクティブを置くことでテーマやカスタムカラーを設定できます。

Miro で Mermaid フローチャートを使う方法 作成バーを開き、[フォーマット]、[ダイアグラム] の順に選択し、[コードで作成] を選びます。Mermaid 構文を貼り付けるか、AI エージェントに生成させると、Miro が編集可能なネイティブ図形としてレンダリングし、スタイルの変更、コメント、共有ができます。

Miro の Mermaid フローチャート向け機能 Miro の Structured Diagrams with Mermaid は、Mermaid コードを実際の編集可能な図形としてレンダリングし、コードと図を相互に同期させ、AI エージェントが Miro の MCP サーバー経由で図を生成したり読み取ったりできるようにします。