Mermaid記法の基本入門

2026-08-172026-09-05

Mermaid記法は、シンプルなテキストで多彩なダイアグラムを描画できる注目のツールです。本記事では、Mermaid syntaxの基本から活用方法まで、初心者にも分かりやすく解説します。

Mermaid記法とは何か？基礎知識と特徴

Mermaid記法の概要

Mermaid記法は、テキストベースで図やダイアグラムを簡単に作成できるマークアップ言語です。主に「mermaid js」ライブラリによって描画され、MarkdownやHTML内に直接記述するだけで、フローチャートやシーケンス図などを自動生成できます。コードと図を同時に管理できるため、ドキュメントや設計書の可視化に最適です。

例えば、以下のような記述で簡単なフローチャートを作成できます。


flowchart TD
  A[開始] --> B{条件判定}
  B -- Yes --> C[処理1]
  B -- No  --> D[処理2]

flowchart TD
  A[開始] --> B{条件判定}
  B -- Yes --> C[処理1]
  B -- No  --> D[処理2]

Mermaidが注目される理由

Mermaidは、図の修正やバージョン管理が容易な点が大きな魅力です。テキストのみで図を表現できるため、従来の画像編集ツールと比べて変更や共有がしやすく、開発現場やドキュメント作成の効率化に貢献しています。特にMarkdown対応のエディタやGitHubなど、さまざまなプラットフォームでサポートされている点も普及の要因です。

従来の図作成	Mermaid記法
画像編集が必要	テキスト編集のみ
変更・追跡が難しい	バージョン管理が容易

Mermaidでできること・できないこと

Mermaid記法では、フローチャート、シーケンス図、ガントチャート、クラス図など多彩なダイアグラムを作成できます。これにより、業務フローやシステム構成、プロジェクト進行などを視覚的に表現可能です。一方で、複雑なレイアウトや高度なデザイン調整は苦手で、細かい装飾やカスタマイズには限界があります。

できること：主要な図表の自動生成、テキストでの管理、簡単なカスタマイズ
できないこと：複雑な装飾、自由な図形描画、画像としての高度な編集

Mermaid記法の基本構文と用語解説

Mermaidの主要な図表タイプ

Mermaidでは、テキストだけで多様な図表を簡単に作成できます。代表的なものに「フローチャート」「シーケンス図」「ガントチャート」「クラス図」などがあり、用途に応じて使い分けることで業務フローやシステム構成、プロジェクト進行などを視覚的に整理できます。

図表タイプ	用途例	記法例
フローチャート	業務手順や処理の流れ	`flowchart TD`
シーケンス図	システム間のやり取り	`sequenceDiagram`
ガントチャート	プロジェクト管理	`gantt`
クラス図	オブジェクト指向設計	`classDiagram`

基本構文と記述ルール

Mermaid記法では、まず図表タイプを宣言し、その下にノードや関係を記述します。例えばフローチャートならflowchart TDで縦方向を指定し、ノード同士を-->でつなげます。ノード名やラベル、条件分岐もシンプルな記述で表現できます。


flowchart TD
  Start[開始] --> Decision{条件判定}
  Decision -- Yes --> ActionA[処理A]
  Decision -- No --> ActionB[処理B]

インデントや改行は柔軟に使えます。ノード名は英数字推奨で、スペースを含む場合は括弧で囲みます。矢印やラベルの書き方は図表タイプごとに異なるため、公式ドキュメントも参照しましょう。

よく使うキーワード・用語集

Mermaid記法で頻出する用語を押さえておくと理解が深まります。特に「ノード」「エッジ」「ラベル」「方向指定」などは各図表で共通して使われます。以下に主要な用語をまとめます。

用語	意味・用途
ノード（Node）	図内の要素や処理の単位
エッジ（Edge）	ノード同士を結ぶ線や矢印
ラベル（Label）	ノードやエッジに付ける説明文
方向指定（TD, LRなど）	図の流れの向き（Top Down, Left Right）
宣言子	図表タイプを指定するキーワード（例：flowchart, gantt）

これらの用語を理解しておくと、Mermaidの構文やエラーの原因も把握しやすくなります。

Mermaid記法の書き方・実践ステップ

Mermaid記法の記述手順

Mermaid記法では、まず図の種類を宣言し、ノードや関係性をテキストで記述します。たとえばフローチャートならflowchart TDと書き、ノード同士を-->でつなげます。ノード名やラベルは自由に設定でき、分岐やループも簡単に表現できます。

記述はMarkdownや対応エディタのコードブロック内で行い、Mermaid対応プラグインを使えば図をプレビューできます。まずはシンプルな図から始めてみましょう。

サンプルコードと出力例

Mermaid記法の基本例として、フローチャートのサンプルを紹介します。上が記法、下が出力イメージです。

flowchart TD
  A[開始] --> B{条件判定}
  B -- はい --> C[処理A]
  B -- いいえ --> D[処理B]
  C --> E[終了]
  D --> E

flowchart TD
  A[開始] --> B{条件判定}
  B -- はい --> C[処理A]
  B -- いいえ --> D[処理B]
  C --> E[終了]
  D --> E

WordPressやMarkdownでの利用方法

WordPressでMermaid記法を使うには、専用プラグインやカスタムHTMLブロックを利用します。Mermaid.jsを読み込むことで、<pre><code class="mermaid">...</code></pre>形式のコードが自動で描画されます。Markdown環境では、Mermaid対応エディタや拡張機能を使えば、コードブロック内のmermaid syntaxがそのまま図として表示されます。


flowchart TD
  A[開始] --> B[処理]
  B --> C[終了]

Mermaid記法の応用例と学習の進め方

よく使われる実用例・テンプレート集

Mermaid記法は業務フローやシステム構成図、プロジェクト管理など幅広い場面で使われます。特に「flowchart mermaid」や「sequence diagram」は、要件定義や開発ドキュメントでよく利用される代表的な図表です。

以下はMermaid図表のサンプルです。テンプレートを使うことで、作図作業を効率化できます。

flowchart TD
A[開始] --> B{条件分岐}
B -- はい --> C[処理1]
B -- いいえ --> D[処理2]
C --> E[終了]
D --> E

flowchart TD
A[開始] --> B{条件分岐}
B -- はい --> C[処理1]
B -- いいえ --> D[処理2]
C --> E[終了]
D --> E

システム構成クラス図

classDiagram
User --> "1" Account
Account : +balance
Account : +deposit()

classDiagram
User --> "1" Account
Account : +balance
Account : +deposit()

学習を深めるためのリソース

Mermaid記法をさらに理解するには、公式ドキュメントやサンプル集の活用が効果的です。公式サイトには「mermaid syntax」の詳細やdiagram例が豊富に掲載されています。GitHubやQiitaのコミュニティ投稿も参考になります。

これらのリソースを使い、「markdown mermaid」形式で図を作成・共有してみると理解が深まります。

次のステップ：応用・カスタマイズ方法

Mermaid.jsはテーマ変更やノードのスタイル調整、独自アイコン追加などカスタマイズ性も高いです。たとえば%%{init: {'theme':'forest'}}%%でテーマ指定ができます。

また、JavaScript APIを使えばWebアプリへの組み込みや、WordPressでの動的図表生成も可能です。CI/CDパイプライン図や複雑なER図の自動生成など、業務に直結した応用も広がっています。

テーマやスタイルのカスタマイズ
JavaScript連携による動的描画
複雑な図表の自動生成・再利用

Mermaid記法は、シンプルなテキスト記述で多様なダイアグラムを作成できる強力なツールです。MarkdownやWeb環境と親和性が高く、エンジニアやドキュメント作成者に広く利用されています。基本構文や主要な図表タイプを理解し、ツールや拡張機能を活用することで、効率的に図解を作成できます。応用例や学習リソースも豊富なので、段階的にスキルアップが可能です。