Mermaid記法の使い方を完全ガイド｜無料のLive Editorでフローチャート・シーケンス図を作成

Mermaid（マーメイド）は、テキストを書くだけでフローチャートやシーケンス図などのダイアグラムを生成できるオープンソースのツールです。MITライセンスで提供されており、Mermaid本体も公式のオンラインエディタ「Mermaid Live Editor（mermaid.live）」も完全に無料で使えます。インストール不要でブラウザからすぐに試せるのが大きな魅力です。

この記事では、Mermaidの基本から、Live Editorの使い方、フローチャート・シーケンス図・ガントチャート・クラス図・ER図といった図の種類別の記法、無料で使える範囲と有料版の違い、VSCodeやGitHubでの使い方までをまとめて解説します。コードを書く感覚で図を作りたい方は、ぜひ最後までご覧ください。

まとめ

Mermaidは、テキストを書くだけでフローチャートやシーケンス図などを生成できる無料のオープンソースツールです。Live Editor（mermaid.live）を使えばインストール不要で今すぐ始められ、図の種類ごとに宣言キーワードを変えるだけで、同じ感覚で多彩なダイアグラムを描けます。

まずはLive Editorでフローチャートから試し、慣れてきたらVSCodeやGitHubといった日常の開発環境に取り込んでみてください。図をテキストで管理できるようになると、ドキュメントの更新と保守がぐっと楽になります。

Mermaidとは？テキストでダイアグラムを描くツール

Mermaidは、Markdownに似たシンプルな記法でダイアグラムを定義し、それをブラウザ上で図としてレンダリングするJavaScript製のツールです。図をマウス操作で描くのではなく、テキストで記述するため、ソースコードと同じようにGitでバージョン管理でき、変更履歴の追跡や差分比較が容易になります。

Markdownファイルに直接埋め込めるうえ、GitHubやGitLabはMermaidのコードブロックをそのまま図として表示できます。ドキュメントとコードを一元管理したい開発現場や、仕様書・設計書をテキストで運用したいチームと特に相性が良いツールです。

Mermaidは2014年に、スウェーデンのソフトウェアアーキテクトであるKnut Sveidqvist氏によって開発が始まりました。「コードは更新されるのに図だけが古くなる（ドキュメントの陳腐化）」という課題を解決するために、図をテキストとしてバージョン管理する発想から生まれています。現在はオープンソースコミュニティによって活発に開発が続けられ、対応する図の種類も増え続けています。

Mermaidは無料？料金とMermaid Chartの違い

結論として、Mermaid本体とLive Editorは無料です。MITライセンスのオープンソースであり、ライブラリ自体に有料プランは存在しません。Live Editor（mermaid.live）、VSCodeの拡張機能、GitHubでのレンダリングなど、一般的な用途はすべて無料でまかなえます。

一方で、名前が似ている「Mermaid Chart」は別のSaaS製品です。Mermaid Chartはリアルタイムの共同編集、AIによる図の自動生成、ビジュアルエディタ、Google DocsやMicrosoft Teamsなどとの連携といったチーム向け機能を提供する有料サービスで、無料プラン（フリーミアム）に加え、有料プランが用意されています。つまり「個人で図を書いて共有する」だけなら無料のMermaidで十分で、料金が発生するのはチーム向けの高度な機能を使う場合だけ、と理解しておけば間違いありません。

※料金やプラン内容は変動するため、最新の価格は公式の料金ページで確認してください。

Mermaid Live Editor（mermaid.live）の使い方

Mermaidをもっとも手軽に試せるのが、公式のオンラインエディタ「Mermaid Live Editor」です。mermaid.live にアクセスするだけで、インストールもアカウント登録もなしにすぐ使えます。

画面は左側がコードの入力欄、右側がプレビューに分かれており、左にMermaid記法を書くとリアルタイムで右側に図が描画されます。試行錯誤しながら図を組み立てられるため、記法を覚える最初の練習場所としても最適です。基本的な使い方は次の3ステップです。

• mermaid.live を開く（インストール・ログイン不要）
• 左の入力欄にMermaid記法を入力する（右側に図がリアルタイムで表示される）
• メニューからSVG/PNGで書き出す、またはURLをコピーして共有する

作成した図は、画面のメニューからSVGやPNG形式で書き出し（エクスポート）でき、資料やブログにそのまま貼り付けられます。また、図の内容はURLに保存されるため、そのURLを共有すれば他の人とそのまま見せ合えるのも便利な点です。レビューやチームでの確認に役立ちます。

Mermaid記法の書き方【図の種類別】

Mermaidでは、最初に「どの図を描くか」を宣言するキーワードを書き、続けてノード（要素）やメッセージを定義していきます。コメントは行頭に %% を付けると記述でき、図には表示されません。ここでは代表的な5種類の図の記法を見ていきましょう。

フローチャート（flowchart / graph）

業務プロセスやアルゴリズムの流れを表す、もっとも基本的な図です。flowchart または graph に続けて方向を指定し、ノードを矢印 --> でつなぎます。

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

先頭の TD は上から下（Top Down）方向を意味します。LR にすれば左から右、ほかに RL（右→左）、BT（下→上）が指定できます。ノードの形は [ ] が四角形、( ) が角丸、{ } がひし形（条件分岐）です。

シーケンス図（sequenceDiagram）

システムや人の間でやり取りされるメッセージの流れを時系列で表す図です。participant で登場人物を定義し、実線の矢印 ->> でリクエスト、点線の矢印 -->> でレスポンスを表します。

sequenceDiagram
    participant ユーザー
    participant サーバー
    ユーザー->>サーバー: リクエストを送信
    サーバー-->>ユーザー: レスポンスを返す

APIの動作やマイクロサービス間の通信を説明するときに重宝します。

ガントチャート（gantt）

プロジェクトのスケジュール管理に使う図です。gantt で宣言し、dateFormat で日付の書式、section でフェーズ、各行でタスクと期間を定義します。

gantt
    title プロジェクトスケジュール
    dateFormat YYYY-MM-DD
    section 開発フェーズ
    要件定義 :a1, 2026-04-01, 10d
    設計     :after a1, 15d

クラス図（classDiagram）

オブジェクト指向設計でクラスの構造や関係を表す図です。<|-- で継承関係を示します。

classDiagram
    クラスA <|-- クラスB
    クラスA : +属性1
    クラスA : +メソッド1()
    クラスB : +属性2

ER図（erDiagram）

データベース設計でテーブル（エンティティ）同士の関係を表す図です。||--o{ のような記号でリレーション（一対多など）を表現します。

erDiagram
    USER ||--o{ POST : "has"
    USER {
      int user_id
      string name
    }
    POST {
      int post_id
      string title
    }

このほかにも、状態遷移図（stateDiagram-v2）、円グラフ（pie）、マインドマップ（mindmap）、ユーザージャーニーマップなど、多様な図がサポートされています。使いたい図の宣言キーワードを変えるだけで、同じ感覚で記述できます。

VSCode・GitHubでMermaidを使う

Live Editor以外にも、ふだんの開発環境にMermaidを取り込む方法があります。

VSCodeでは、拡張機能「Markdown Preview Mermaid Support」を入れると、Markdownファイル内のMermaidコードをプレビューで図として確認しながら編集できます。具体的な導入手順やシーケンス図の作成例は、VSCodeでMermaidを使ったシーケンス図の作成方法と自動コード生成で詳しく解説しています。さらにAIの補助で図を自動生成したい場合は、mermAIdとは何か？Mermaidとの違いや特徴を詳しく解説もあわせてご覧ください。

GitHub・GitLabでは、Markdown内に ```mermaid で囲んだコードブロックを書くだけで、図がそのままレンダリングされます。READMEやIssue、プルリクエストに図を直接埋め込めます。

ローカルで画像ファイルとして書き出したい場合は、Node.js環境に mermaid-cli を導入します。

npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.png

Mermaid記法チートシート（早見表）

主要な図の種類と、先頭に書く宣言キーワード、主な用途をまとめました。

図がうまく表示されないときのチェックポイント

Mermaidは記法が少しでもずれると図が描画されません。表示されないときは、次の点を順に確認すると原因を切り分けられます。

• 宣言キーワードの綴り：先頭の sequenceDiagram や classDiagram は大文字・小文字まで正確に書く（誤記だと認識されない）。flowchart・gantt などは小文字。
• コードブロックの言語指定：GitHubやNotionでは言語を必ず mermaid にする。指定がないと普通のコードとして表示される。
• 全角スペース・全角記号の混入：インデントや矢印に全角が紛れると構文エラーになる。半角で統一する。
• バージョン差：新しい図種・構文は使用中のMermaidのバージョンによっては未対応のことがある。最新のLive Editorで動くか試すと切り分けやすい。

Live Editorは構文エラーの箇所を示してくれるため、原因特定にはまず mermaid.live に貼り付けて確認するのが確実です。

よくある質問（FAQ）

Mermaid Live Editorとは何ですか？

ブラウザ上でMermaid記法を書くと、リアルタイムで図をプレビューできる公式のオンラインエディタです。mermaid.live にアクセスすればインストール不要で使え、SVG/PNGでの書き出しやURLでの共有ができます。

Mermaidは無料ですか？

はい。Mermaid本体はMITライセンスのオープンソースで、Live Editorも無料で使えます。有料なのはチーム向け機能を備えた別サービス「Mermaid Chart」だけで、基本的な図の作成・共有に料金はかかりません。

Mermaidに対応したエディタは？

公式のLive Editorのほか、VSCode（Markdown Preview Mermaid Support などの拡張機能）、GitHub・GitLab、Notion、Confluenceなど多くのツールがMermaidまたはMermaid Chart連携に対応しています。

Live Editorで作った図は共有できますか？

できます。図の内容はURLに保存されるため、そのURLを送るだけで相手に同じ図を見せられます。SVG・PNGとして書き出してファイルで共有することも可能です。

MermaidとMermaid Chartの違いは何ですか？

Mermaidは無料・オープンソースのライブラリ（とLive Editor）です。Mermaid Chartはそれを基盤にした有料SaaSで、リアルタイム共同編集やAI生成、各種ツール連携などのチーム向け機能が追加されています。

TeamsやNotionでMermaidは使えますか？

NotionはコードブロックでMermaidの描画に対応しており、テキストを書くだけで図を表示できます。Microsoft Teamsについては、Mermaid Chartの連携機能を使って図を共有・埋め込みするのが一般的です。社内ドキュメントやチャットに図を載せたい場合に活用できます。関連する内容として、Doxygenもご覧ください。

関連記事

• VSCodeでMermaidを使ったシーケンス図の作成方法と自動コード生成
• mermAIdとは何か？Mermaidとの違いや特徴を詳しく解説
• 執筆効率を左右するMarkdown Live Editorの基本機能と選定基準
• PlantUMLとは？基本的な概要と特徴を徹底解説