Mermaid オンラインエディタ - Mermaid 構文でフローチャート、シーケンス図、クラス図など21種類の図形

Mermaid はテキスト構文でグラフを生成するツールです。簡単な Mermaid コードを書くことで、フローチャート、シーケンス図、クラス図、状態遷移図、ER 図、ガントチャート、マインドマップ、アーキテクチャ図など、さまざまなグラフを生成できます。

従来のドラッグ＆ドロップ式の作図ツールとは異なり、Mermaid は主にコードでグラフ内のノード、関係、時間順序、データ構造を記述します。コードを修正するとグラフが自動的に再生成されるため、技術ドキュメント、製品設計、プロジェクト管理、ソフトウェア開発、ナレッジ整理などのシーンに特に適しています。

本記事では Mermaid の基本構文を紹介し、Mermaid エディタがレンダリングに対応するグラフの種類、宣言構文、コード例と使用シーン。Mermaid コードを直接オンラインで作成・プレビューしたい場合は、無料でお試しください ProcessOn Mermaid オンラインエディタ。

Mermaid とは？

Mermaid はテキスト構文でグラフを生成するツールです。以下のコードで簡単な Mermaid フローチャートを生成できます：

flowchart TD

A[Start] --> B[Enter information]

B --> C{ Completed?}

C -->|Yes| D[End]

C -->|No| B

レンダリング結果は次のとおりです：

ここで：flowchart TD は、上から下へ配置されるフローチャートを宣言・作成するために使用します。

Mermaid の動作の仕組みは次のようにまとめられます：

Mermaid コードを作成 → コードを解析 → レンダリンググラフ → コードを修正 → グラフリアルタイム更新

そのため、Mermaid を学ぶうえでの鍵の一つは、グラフごとに対応する宣言構文を理解することです。

Mermaid はどのようなグラフに対応していますか？

グラフの種類によって使用する Mermaid の宣言構文は異なります、現在よく使われる Mermaid 図形は次のとおりです：

Mermaid の異なるエディタバージョンではグラフの構文と機能の対応が変わる場合があります。実際に使用する際は、エディタが対応している構文を基準にしてください。

Mermaid フローチャート

基本構文

Mermaid では flowchart 宣言を使ってフローチャートを作成します。最も簡単な書き方は次のとおりです：

flowchart TD

A[Start] --> B[Arrange]

B --> C[End]

レンダリング結果

ここで：

• flowchart：フローチャートの作成を宣言
• TD：上から下へ配置
• A[Start]：ノードを作成
• -->：矢印付きの接続線を作成

Mermaid のフローチャートでは LR（左から右へ）、RL（右から左へ）、BT（下から上へ） などの方向設定も使用できます。例：

flowchart LR

A[Start] --> B[Arrange] --> C[End]

これはフローチャートが左から右へ配置されることを示します。

よく使う構文

Mermaid でフローチャートを生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/flowchart

フローチャートは業務プロセス、ワークフロー、アルゴリズムの流れ、システムの流れ、意思決定の流れなどのシーンに適しています。無料でお試しください Mermaid フローチャートオンラインエディタ。

Mermaid シーケンス図

基本構文

Mermaid では sequenceDiagram 宣言を使ってシーケンス図を作成します。最も簡単な例：

sequenceDiagram

Alice->>John: Hello John

John-->>Alice: Hello Alice

レンダリング結果

ここで：

• sequenceDiagram：Mermaid のシーケンス図を作成することを表します
• ->>：実線の矢印で、非同期メッセージ呼び出しを表します
• -->>：破線の矢印で、非同期の応答または戻りメッセージを表します

よく使う構文

Mermaid でシーケンス図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/sequence-diagram

シーケンス図は、ユーザーとシステム、システム同士、サービス同士の間で時間順に発生するインタラクションの記述に適しています。無料でお試しください Mermaid シーケンス図オンラインエディタ。

Mermaid クラス図

基本構文

Mermaid では classDiagram 宣言を使ってクラス図を作成します。

classDiagram

Animal <|-- Duck

Animal <|-- Fish

class Animal {

+String name

+eat()

}

class Duck {

+swim()

}

レンダリング結果

ここで：

• classDiagram：Mermaid のクラス図を作成することを表します
• <|--：継承関係を表します
• +String name：公開された属性またはメソッドを表します

よく使う構文

クラスメンバの先頭に付く +、-、# などの記号は、異なる可視性を表すことができます。

Mermaid でクラス図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/class-diagram

クラス図はソフトウェア設計、オブジェクト指向モデリング、プログラム構造分析などのシーンに適しています。無料でお試しください Mermaid クラス図オンラインエディタ。

Mermaid 状態遷移図

基本構文

Mermaid では stateDiagram-v2 宣言を使って状態遷移図を作成します。

stateDiagram-v2

state "Pending Payment" as Pending

[*] --> Pending

Pending --> Paid

Paid --> Shipped

Shipped --> Completed

Completed--> [*]

レンダリング結果

ここで：

• stateDiagram-v2：Mermaid の状態遷移図を作成することを表します
• [*] -->：最初の状態へ遷移することを表します
• -->：状態遷移を表します
• --> [*]：状態フローの終了を表します

よく使う構文

Mermaid で状態遷移図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/state-diagram

状態遷移図は、注文状態、ワークフロー状態、ユーザー状態、システム状態、ステートマシンなどの表現に適しています。無料でお試しください Mermaid 状態遷移図オンラインエディタ。

Mermaid ER 図

基本構文

Mermaid では erDiagram 宣言を使ってエンティティ関係図、つまり ER 図を作成します。

erDiagram

USER ||--o{ ORDER : places

ORDER ||--|{ PRODUCT : contains

レンダリング結果

ここで：

erDiagram：Mermaid の ER 図を作成することを表します

||--o{：1 対多の接続、1 つのエンティティが複数のエンティティに対応することを表します、空でも可

||--|{：1 対多の接続、1 つのエンティティが複数のエンティティに対応することを表します、最低 1 個

よく使う構文

Mermaid で ER 図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/er-diagram

ER 図はエンティティ、属性、エンティティ間の関係を表すことができ、データベース設計でよく使用されます。無料でお試しください Mermaid ER 図オンラインエディタ。

Mermaid マインドマップの構文

基本構文

Mermaid では mindmap 宣言を使ってマインドマップを作成します。

mindmap

root((Mermaid))

Flowchart

Sequence diagram

Class diagram

Gantt chart

Mind map

レンダリング結果

ここで：

• Mindmap：Mermaid のマインドマップを作成することを表します
• root(())：作成円形のルートトピック

よく使う構文

Mermaid でマインドマップを生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/mindmap

マインドマップは主にインデントで階層関係を表すため、ナレッジ整理、ブレインストーミング、講義ノート、情報アーキテクチャに最適です。無料でお試しください Mermaid マインドマップオンラインエディタ。

Mermaid ガントチャート

基本構文

Mermaid では gantt 宣言を使ってガントチャートを作成します。

gantt

title Project Plan

dateFormat YYYY-MM-DD

section Design

Requirements Analysis:a1, 2026-01-01, 3d

UI Design:after a1, 2d

section Development

Front-end Development:2026-01-06, 4d

Back-end Development:2026-01-07, 4d

レンダリング結果

ここで：

• gantt：Mermaid のガントチャートを作成することを表します
• title：ガントチャートのタイトルを表します
• dateFormat：タイムラインの日付解析形式を定義します
• section：異なるタスクグループを表します

よく使う構文

Mermaid でガントチャートを生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/gantt

Mermaid のガントチャートはプロジェクト計画、タスク調整、開発進捗、プロジェクト管理に適しています。無料でお試しください Mermaid ガントチャートオンラインエディタ。

Mermaid ユーザージャーニー図

基本構文

Mermaid では journey 宣言を使ってユーザージャーニー図を作成します。

journey

title User purchases a product

section Browse

Search for products: 5: User

View details: 4: User

section Place order

Add to cart: 5: User

Complete payment: 3: User

レンダリング結果

ここで：

• journey：Mermaid のユーザージャーニー図を作成することを表します
• title：ユーザージャーニー図のタイトルを表します
• section：フロー段階のグループを表します
• Search for products: 5: User：段階内の具体的なタスク、満足度の分岐、参加する役割を定義します

よく使う構文

Mermaid でユーザージャーニー図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/user-journey-diagram

ユーザージャーニー図は、顧客が製品に触れてから目標を達成するまでのさまざまなステップと体験を分析するのに適しています。無料でお試しください Mermaid ユーザージャーニー図オンラインエディタ。

Mermaid タイムライン

基本構文

Mermaid では timeline 宣言を使ってタイムラインを作成します。

timeline

title Mermaid Development History

2019 : Project Development

2020 : Feature Expansion

2021 : More Diagram Types

レンダリング結果

ここで：

• timeline：Mermaid のタイムラインを作成することを表します
• title：タイムラインのタイトルを表します
• 2019 : プロジェクトの発展：時間点に対応するイベントを定義します

よく使う構文

Mermaid でタイムラインを生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/timeline

タイムラインは歴史的な出来事、プロジェクトの発展、製品のイテレーション、時系列情報の表示に適しています。無料でお試しください Mermaid タイムラインオンラインエディタ。

Mermaid 象限図の構文

基本構文

Mermaid では quadrantChart 宣言を使って象限図を作成します。

quadrantChart

title Product Positioning

x-axis Low Price--> High Price

y-axis Low Quality--> High Quality

quadrant-1 High-end

quadrant-2 Quality-focused

quadrant-3 Basic

quadrant-4 Value-for-money

Product A: [0.8, 0.7]

Product B: [0.3, 0.8]

レンダリング結果

ここで：

• quadrantChart：Mermaid の象限図を作成することを表します
• x-axis：横軸の両端のラベルを定義します
• y-axis：縦軸の両端のラベルを定義します
• quadrant-1：右上の象限内の注釈テキストを設定します
• quadrant-2：左上の象限内の注釈テキストを設定します
• quadrant-3：左下象限内の注釈テキストを設定します
• quadrant-4：右下象限内の注釈テキストを設定します
• Product A: [0.8, 0.7]：座標点を定義します。x/y の値は 0〜1 です

Mermaid で象限図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/quadrant-chart

象限図は製品ポジショニング、優先度分析、競合分析、2 次元分類に適しています。無料でお試しください Mermaid 象限図オンラインエディタ。

Mermaid かんばん図

基本構文

Mermaid のかんばん図は、タスクの状態（未処理、進行中、完了など）に従って作業項目を整理するために使用します。典型的な構造は次のように表せます：

kanban

Todo

Task A

Task B

Doing

Task C

Done

Task D

レンダリング結果

ここで；

• kanban：Mermaid の作成を表しますかんばん図
• Todo：かんばんを作成しますステータス分類
• Task A：具体的なタスクを表します

Mermaid でかんばん図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/kanban

かんばん図はプロジェクト管理、タスク追跡、開発プロセス、ワークフロー管理に適しています。無料でお試しください Mermaid かんばん図オンラインエディタ。

Mermaid 要件図

基本構文

要件図は、要件、機能、システム要素の間の関係を表すために使用できます、Mermaid では requirementDiagram 宣言を使って要件図を作成します。

requirementDiagram

requirement userRequirement {

id: 1

text: Customers can purchase products

risk: low

verifymethod: test

}

レンダリング結果

ここで：

• requirementDiagram：Mermaid の要件図を作成することを表します
• requirement userRequirement { }：基本要件を定義します
• text：要件の名前を定義します
• risk：リスクレベルを定義します
• verifymethod：検証方法を定義します

よく使う構文

Mermaid による要件図詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/requirement-diagram

要件図は製品要件分析、システムエンジニアリング、要件トレーサビリティに適しています。無料でお試しください Mermaid 要件図オンラインエディタ。

Mermaid 円グラフ

基本構文

Mermaid では pie 宣言を使って円グラフを作成します。

pie showData

title Population Share by Continent

"Asia" : 59.5

"Africa" : 18.0

"Europe" : 9.0

"North America" : 7.5

"South America" : 5.5

"Oceania" : 0.5

レンダリング結果

ここで：

• pie：Mermaid の円グラフを作成することを表します
• pie showData：データ値を表示する Mermaid の円グラフを作成することを表します
• title：円グラフのタイトルを表します
• "Asia" : 59.5：データの分類と割合を定義します

Mermaid で円グラフを生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/pie-chart

円グラフは比率と構成関係を表すのに適しています。無料でお試しください Mermaid 円グラフオンラインエディタ。

Mermaid サンキー図

基本構文

サンキー図は主に、異なるノード間の流量、リソース、資金、データの流れを表すために使用します、Mermaid では sankey-beta 宣言を使ってサンキー図を作成します。

sankey-beta

A,B,50

A,C,30

B,D,20

C,D,30

レンダリング結果

ここで：

• sankey-beta：Mermaid の サンキー図
• A,B,50：データの流れを定義します：ソース、ターゲット、流量値
• A：左側のノードで、データの入力元を表します
• B：右側のノードで、データの出力先を表します
• 50：流量の大きさを表します

Mermaid でサンキー図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/sankey-diagram

サンキー図は、ある数値の集合から別の数値の集合への流れを表示するための可視化グラフです。無料でお試しください Mermaid サンキー図オンラインエディタ。

Mermaid XY図

基本構文

Mermaid では xychart-beta 宣言を使って XY 図を作成します。

xychart-beta

title "Monthly Sales Data"

x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]

y-axis " Sales (million)" 0 --> 100

line [20, 30, 40, 35, 50, 60]

bar [30, 50, 35, 20, 45, 40]

レンダリング結果

ここで：

• xychart-beta：Mermaid の XY 図を作成することを表します
• title：xy 図のタイトルを表します
• x-axis：横軸のカテゴリとタイトルを表します
• y-axis：縦軸の範囲とタイトルを表します
• line：折れ線グラフのデータ系列を定義します
• bar：棒グラフのデータ系列を定義します

よく使う構文

Mermaid で xy 図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/xy-chart

XY 図はデータの変化、数値比較、簡単なデータ可視化の表示に適しています。無料でお試しください Mermaid XY 図オンラインエディタ。

Mermaid レーダーチャート

基本構文

レーダーチャートは、複数の対象を複数の次元で比較するのに適しています。たとえば能力評価、製品指標、ソリューションの比較などです。Mermaid では radar-beta 宣言を使ってレーダーチャートを作成します。

radar-beta

title "Competency Assessment Radar Chart"

axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]

curve A["Chenlaoda"] {80, 90, 70, 85}

curve B["Wangxiaoer"] {60, 70, 90, 80}

レンダリング結果

ここで：

• radar-beta：Mermaid のレーダーチャート図
• title：レーダーチャートのタイトルを定義します
• axis：レーダーチャートの次元と名前を定義します
• curve：データ系列の名前と各次元の数値を定義します

よく使う構文

Mermaid でレーダーチャートを生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/radar-chart

レーダーチャートは、データを円形フォーマットで明確かつ簡潔に表現する必要がある開発者、データサイエンティスト、エンジニアに特に役立ちます。無料でお試しください Mermaid レーダーチャートオンラインエディタ。

Mermaid Git グラフ

基本構文

Mermaid では gitGraph 宣言を使って Git グラフを作成します。

gitGraph

commit

branch develop

checkout develop

commit

checkout main

merge develop

レンダリング結果

ここで：

• gitGraph：Mermaid の Git グラフを作成することを表します
• commit：コミットの作成を表します
• commit id:""：コミット名を設定します
• branch：ブランチの作成を表します
• checkout：ブランチの切り替えを表します
• merge：ブランチのマージを表します

Mermaid で Git グラフを生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/git-graph

Git グラフは Git のコミット、ブランチ作成、ブランチ切り替え、マージなどのバージョン管理プロセスを表すのに適しています。無料でお試しください Mermaid Git グラフオンラインエディタ。

Mermaid C4 図

基本構文

Mermaid C4 図はソフトウェアアーキテクチャのモデリングに使用し、ソフトウェアシステム、コンテナ、コンポーネント、およびそれらの関係を異なるレベルから記述できます。

C4Context

title C4 Diagram of the Business System

Person(user, " User", " System user")

System(system, " Business System", " Core business system")

Rel(user, system, "Uses")

レンダリング結果

ここで：

• C4Context：C4 コンテキスト図を作成することを表します
• title：C4 図のタイトルを表します
• Person(user, " User", " System user")：システムを利用するユーザーまたは役割を表します
• System(system, " Business System", " Core business system")：分析が必要なソフトウェアシステムを表します
• Rel(user, system, "Uses")：2 つの要素間の呼び出し、インタラクション、データ受け渡しの関係を定義します

よく使う構文

Mermaid で C4 図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/c4-diagram

C4 図はソフトウェアアーキテクチャ設計、システム分析、技術ドキュメントに適しています。無料でお試しください Mermaid C4 図オンラインエディタ。

Mermaid アーキテクチャ図

基本構文

Mermaid では architecture-beta 宣言を使ってアーキテクチャ図を作成します。

architecture-beta

group api(cloud)[API server]

service server(server)[server] in api

service database(database)[databasa] in api

server:R --> L:database

レンダリング結果

ここで：

• architecture-beta：Mermaid のアーキテクチャ図を作成することを表します。
• group api(cloud)[API server]：アーキテクチャグループを作成します
• service server(server)[server] in api：アーキテクチャコンポーネントまたはサービスモジュールを作成します、アーキテクチャグループ内に配置します
• server:R --> L:database：ノードの接続方向を指定します。server の右側から database の左側を指します

Mermaid でアーキテクチャ図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/architecture-diagram

アーキテクチャ図は、サーバー、データベース、クラウドサービス、アプリケーションサービス、および異なるシステムコンポーネント間の関係を表すのに適しています。無料でお試しください Mermaid アーキテクチャ図オンラインエディタ。

Mermaid ブロック図

基本構文

ブロック図は主にモジュールと接続関係によってシステム構造を表現します、Mermaid では block-beta 宣言を使ってブロック図を作成します。

block-beta

A space B

A["User"] --> B["Application"]

B space C

B --> C["Database"]

レンダリング結果

ここで：

• block-beta：Mermaid のブロック図を作成することを表します
• space：各ユニットまたはモジュールの間隔を広げます
• -->：実線の矢印で、関係の向きを表します

Mermaid でブロック図を生成する詳細な構文は、以下のページをご覧ください： https://www.processon.io/ja/mermaid/block-diagram

ブロック図はシステムモジュール、機能構造、技術アーキテクチャ、コンポーネント関係などのシーンに適しています。無料でお試しください Mermaid ブロック図オンラインエディタ。

Mermaid パケット図

基本構文

パケット図は主に、ネットワークパケットやプロトコルのデータ構造におけるフィールドと長さを表すために使用します、Mermaid では packet-beta 宣言を使ってパケット図を作成します。

packet-beta

0-7: "Version"

8-15: "Type"

16-31: "Length"

レンダリング結果

ここで：

• packet-beta：Mermaid のパケット図を作成することを表します
• 0-7: "Version "：フィールドが占める bit 範囲を表します

パケット図はネットワークプロトコル、パケット構造、技術仕様ドキュメントに適しています。無料でお試しください Mermaid パケット図オンラインエディタ。

Mermaid の構文がわからない場合はどうすればよいですか？

Mermaid の構文に詳しくなくても、Mermaid を使えないわけではありません。図形を生成するには、次のようないくつかの方法があります：

無料で Mermaid テンプレートを使用する

まず要件に近いテンプレートを選択し、その中のノード、テキスト、関係を変更します。この方法は Mermaid を初めて使用するユーザーに適しています。

AI による Mermaid コードの生成

必要なグラフを自然言語でそのまま記述できます。たとえば：

EC サイトの注文処理フローを作成します。ユーザーの注文、支払い、在庫チェック、出荷、注文完了を含みます。

AI は記述に基づいて Mermaid コードを生成し、実際の要件に応じて修正できます。

AI を使ったコードのチェックと修正

Mermaid コードに構文エラーがある場合は、AI に問題の特定とコードの修正を支援してもらえます。

画像認識によるコード生成

既存のフローチャート、アーキテクチャ図、その他の構造化されたグラフについては、画像認識によって Mermaid コードを生成し、そのまま編集を続けることができます。

Mermaid オンラインエディタにはどのような機能がありますか？

Mermaid オンラインエディタは通常、3 つの中核的な課題を解決する必要があります：コードの作成、グラフのプレビュー、結果のエクスポート。さらに、テンプレートと AI も Mermaid の利用ハードルを下げることができます。

たとえば ProcessOn Mermaid オンラインエディタを例にすると、ブラウザで直接次のことができます：

• Mermaid コードを作成する

• 既存の Mermaid コードを貼り付ける

• リアルタイムでのレンダリングとプレビューグラフ

• 無料で Mermaid テンプレートを使用する

• 自然言語 AI による Mermaid グラフの生成

• AI による Mermaid コードのチェックと修正

• 次の方法で、画像認識を利用して Mermaid コードを生成する

• 生成された図形を二次編集および修正できます

• PNG、PDF、SVG、JPG、Markdown 形式のエクスポート

そのため、Mermaid を頻繁に作成する必要がある図形ユーザーにとって、ProcessOn Mermaid オンラインエディタでは Mermaid コードの作成、図形生成、二次編集、エクスポートと共有を 1 つの作業環境に集約できます。

Mermaid のフローチャート、シーケンス図、クラス図から、ガントチャート、マインドマップ、象限図、サンキー図、Git グラフ、C4 図、アーキテクチャ図まで、すべて Mermaid 構文で作成と編集できます。

ぜひ使って Mermaid オンラインエディタで、オンラインで Mermaid コードを作成し、グラフを生成しましょう。

よくある質問

Mermaid の構文を覚えるのは難しいですか？

Mermaid の基本構文は比較的簡単で、ほとんどのグラフではグラフ宣言、ノード、接続線、テキストといった基本的な書き方を押さえるだけで十分です。たとえば、sequenceDiagram はシーケンス図を宣言するために使用し、flowchart はフローチャートを宣言するために使用します。グラフの種類によって構文ルールが異なるため、複雑なグラフでは対応するパラメータや設定をさらに学ぶ必要があります。

Mermaid のコードを書き間違えると、なぜグラフを生成できないのですか？

Mermaid は構文構造に敏感です。よくある原因には、グラフ宣言の誤り、ノードや接続線の構文の不足、インデントや特殊文字の扱いの誤り、現在の Mermaid バージョンでサポートされていない構文の使用などがあります。

Mermaid と従来の作図ソフトウェアの違いは何ですか？

Mermaid は主にテキストコードでグラフを記述しますが、従来の作図ソフトウェアは通常、図形のドラッグ、接続線の作図、スタイルの調整によってグラフを作成します。

Mermaid のグラフは保存して再利用できますか？

できます。Mermaid のグラフの中核となる内容はテキストコードであるため、コードを Markdown、コードファイル、その他 Mermaid をサポートするドキュメントに保存し、必要なときに再度レンダリングできます。

これは Mermaid と画像のみのグラフとの重要な違いでもあります：画像が保存するのは最終結果ですが、Mermaid のコードはグラフの構造情報も同時に保存します。

Mermaid と Markdown にはどのような関係がありますか？

Mermaid は Markdown と一緒に使用されることがよくありますが、両者は同じ構文ではありません。

Markdown は主に構造化テキストの作成に使用し、Mermaid はコードでグラフを生成するために使用します。Mermaid に対応した Markdown エディタでは、Mermaid コードを Markdown ドキュメントに埋め込むことができ、グラフとテキストの説明を同じドキュメントに配置できます。