Mermaid記法の使い方｜無料のLive Editor（mermaid.live）でフローチャート・シーケンス図を作成

Mermaid（マーメイド）は、テキストを書くとフローチャートやシーケンス図を描画するJavaScriptのライブラリです。本体も公式のオンラインエディタ「Mermaid Live Editor」（mermaid.live）もMITライセンスで、料金はかかりません。有料プランがあるのは、名前の似た別サービス「Mermaid Chart」だけです。注意したいのは、「mermaid live editor」で検索すると、公式ではない類似サービスが上位に並ぶことです。この記事では、無料で使える範囲とMermaid Chartの料金、公式サイトの見分け方、Live Editorの保存・共有の仕組み、図の種類別の記法を、2026年10月時点の版（mermaid 12.2.0）で描画を確かめた例でまとめます。

まとめ：Mermaidの無料の範囲とLive Editorの要点

• Mermaid本体とLive Editorは、どちらもMITライセンスのOSSです。個人利用も業務利用も無料で、Live EditorはDockerで社内にも立てられます。
• 有料なのはMermaid Chart（mermaid.ai）です。無料のBasicのほか、Plusが1ユーザー月10ドル、Premiumが月20ドル（いずれも年払い）です。
• 公式のLive Editorは https://mermaid.live です。検索上位の「Mermaid Viewer」や「mermaid-live-editor.com」は別の運営者のサービスです。
• PNG・SVGのダウンロードとCopy Imageはブラウザの中で処理されます。一方、画像リンク（mermaid.ink）・Kroki・Copy Markdownは、図のコードを含むURLを外部サービスへ渡します。社外秘の図では、この3つを使わないでください。
• 記法は、1行目で図の種類（flowchart・sequenceDiagram など）を宣言して書きます。表示されないときは、宣言の綴り、ノード名の end、全角の記号を最初に疑ってください。

Mermaidとは：テキストから図を描くJavaScriptライブラリ

Mermaidは、Markdownに似た記法で書いた図の定義を、ブラウザ上でSVGとして描画するライブラリです。図がテキストなので、ソースコードと同じリポジトリに置けば変更の差分をGitで追え、「コードは直したのに設計図だけが古い」状態を防げます。

GitHubのmermaid-js/mermaidは2014年11月に作られ、スター数は2026年10月14日時点で約9万です。npmの最新版は2026年10月13日公開の12.2.0です。12系（2026年9月10日の12.0.0〜）では、既定の配色やレイアウトが11系から変わりました。マウスで描く作図ツールとの使い分けは、Excalidrawの使い方とDockerセルフホスト手順｜Reactへの埋め込みまでやPlantUMLとは？記法・使い方・インストールから.puml拡張子まで解説と比べると判断しやすくなります。

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

Mermaid本体とLive Editorが無料と言える根拠

Mermaid本体のリポジトリも、Live Editorのmermaid-js/mermaid-live-editorも、ライセンスはMITです。MITでは、商用利用・改変・再配布ができ、利用料もかかりません。条件は、著作権表示とライセンス文を残すことだけです。mermaid.liveはログインなしで使えます。社外にコードを出したくない場合は、同じソースから自社の環境にLive Editorを立てる方法もあります（後述）。

Mermaid Chart（mermaid.ai）の4プランと無料Basicの上限

Mermaid Chartは、Mermaidの作者Knut Sveidqvist氏がOpen Core Venturesと設立した会社のSaaSです（Mermaid公式ドキュメントのMermaid Chart紹介）。現在のドメインはmermaid.aiです。ビジュアル編集やAIでの図の生成、Confluence・Google Docs・Word・PowerPointへの埋め込みに対応します。料金ページ（2026年10月14日に取得）の内容は次のとおりです。

Basicの図の数は、同じ料金ページの中で表記が割れています。プラン紹介には「3 Diagrams」、比較表には「Up to 6」とあります。Basicは図のサイズにも「Limited (60)」という上限があります。一方、比較表の「Co-editing & external sharing」（共同編集と外部共有）には、Basicにもチェックが付いています。SSOはEnterpriseだけです。

どちらを使うかは、図をどこに保管するかで決めます。Gitで管理するMarkdownに図を書くなら、Mermaid本体だけで足ります。ConfluenceやWordに図を埋め込み、ブラウザ上で複数人が同時に編集したいなら、Mermaid Chartが候補になります。チームで図を7枚以上クラウドに置くなら、Basicの上限を超えるため、Plus以上の契約が前提です。

公式のLive Editor（mermaid.live）と類似サービスの見分け方

2026年10月14日に「mermaid live editor」で検索すると（日本・Ahrefsで取得）、1位は公式のmermaid.liveでした。2位はMermaid Viewerのドキュメント、4位はmermaid-live-editor.comで、どちらも公式とは別の運営者によるサービスです。App Storeの「Mermaid Live Editor – MMChart」も公式アプリではありません。名前に「Mermaid Live Editor」と入っていても、公式とは限りません。

公式かどうかは、2か所のリンク先で確かめられます。1つはMermaid公式サイト（mermaid.js.org）の「Live Editor」リンクで、行き先は https://mermaid.live/edit です。もう1つはGitHubのmermaid-js/mermaid-live-editorで、リポジトリのWebサイト欄に https://mermaid.live が登録されています。類似サービスにも便利な機能はあります。ただ、社外秘の図を貼る前に、運営者とプライバシーポリシーを自分で確認してください。迷ったら、公式のmermaid.liveか、次の章で紹介するセルフホストを使うのが確実です。

Mermaid Live Editorの使い方：保存・共有・履歴

画面構成：Code・Config・HistoryとActions

画面は、左がエディタ、右がプレビューの2分割です。エディタには「Code」と「Config」の2つのタブがあり、Codeに図の定義、Configにテーマなどの設定をJSONで書きます。過去の状態に戻すときは、時計のアイコンで「History」パネルを開きます。「Sample Diagrams」から図の種類ごとのひな形を読み込めるので、記法を覚える前でも書き始められます。

テーマや手書き風の見た目は、図の先頭にfrontmatterとして書くこともできます。frontmatterに設定を含めると、対応する環境へ図と設定を一緒に渡せます。ただし、反映される設定は貼り付け先のMermaidのバージョンや制限によって異なります。

---
config:
  look: handDrawn
  theme: neutral
---
flowchart LR
    A[下書き] --> B[レビュー] --> C[公開]

PNG・SVGで保存する手順とサイズ指定

保存には、プレビュー側の「Actions」を使います。「PNG」「SVG」のボタンを押すと、その場でファイルがダウンロードされます。PNGは「PNG size」でAuto・Width・Heightを切り替えられ、幅か高さを3〜10000ピクセルの範囲で指定できます。「Copy Image」は、図を画像としてクリップボードにコピーするボタンです。SlackやPowerPointにそのまま貼れます。

共有URLの/editと/viewの違い

Live Editorは図をサーバーに保存しません。図のコードと設定をJSONにまとめ、圧縮してURLの「#」の後ろに埋め込みます。つまり、URLそのものが図のデータです。編集できるURLは https://mermaid.live/edit#pako:… で、パスの edit を view に書き換えると、エディタのない閲覧用の表示になります。図だけを見せたい場合は、/view 版を送ります。ただし、受信者はURLを編集用に変更して図を編集できるため、編集禁止の権限制御にはなりません。

この形式は公開されているソース（src/lib/util/serde.ts）のとおりです。JSONをpakoでdeflate圧縮（レベル9）し、URL安全なBase64にしています。そのため、共有URLだけが手元に残っている図も、Pythonの標準ライブラリでコードに戻せます。下のスクリプトで、公式実装（pako＋js-base64）が作ったURLを復元できることを確かめました。

import base64
import json
import sys
import zlib

def decode(url: str) -> dict:
    # URLの「#」より後ろが図の中身（pako: または base64: で始まる）
    fragment = url.split("#", 1)[1]
    kind, payload = fragment.split(":", 1)
    payload += "=" * (-len(payload) % 4)  # 省略されたパディングを補う
    raw = base64.urlsafe_b64decode(payload)
    if kind == "pako":
        raw = zlib.decompress(raw)
    return json.loads(raw)

if __name__ == "__main__":
    print(decode(sys.argv[1])["code"])

python3 decode_mermaid_url.py "https://mermaid.live/edit#pako:eNqrVkrOT0lVslJKy8kvT85ILCpR8AmKyVNw1NW1c1KqBQCmbwnj"

履歴の保存先と消える条件

Historyパネルには、自動保存の「Timeline」と、保存ボタン（Save current state）で残す「Saved」の2つのタブがあります。どちらもブラウザのlocalStorageに保存されます。Timelineは60秒ごとに、直前の記録から内容が変わっていれば1件追加され、最大30件まで残ります。31件目からは古いものが消えます。Savedにはソース上の件数上限がなく、ブラウザのlocalStorageの容量まで残せます。どちらもブラウザの中にしかないため、別のPCやシークレットウィンドウには引き継がれず、サイトデータを消せば履歴も消えます。パネルのダウンロードボタンで履歴をJSONファイルに書き出せるので、PCを替える前に書き出しておいてください。

社外秘の図をLive Editorで書くときの注意点

Actionsのボタンには、ブラウザの中で処理が終わるものと、図のコードを外部サービスへ渡すものが混在しています。Live Editorのソース（2026年10月13日時点の2.0.67）と、mermaid.live本番の設定ファイル（netlify.toml）を読んで整理すると、次のようになります。

外部へ渡る3つの操作は、圧縮した図のコードをURLのパスに入れたリンクを作ります。外部リンクとKrokiはクリックした時点で、Copy Markdownはコピーした文字列が貼り付け先で画像として読み込まれた時点で、mermaid.inkやkroki.ioに図のコードが届きます。ブラウザはURLの「#」より後ろをサーバーに送らないので、mermaid.liveの共有URLを開くだけでは、図の中身はmermaid.liveのサーバーに届きません。ただし、その共有URLを社外の人に送れば、受け取った人は誰でも図を復元できます。URLを渡すことは、図のコードを渡すことと同じです。なお、mermaid.live本番では、アクセス解析のPlausible（p.mermaid.live）も有効になっています。

業務の図を気兼ねなく扱いたいなら、Live Editorを社内に立てます。READMEのDocker手順では、公開イメージを次のコマンドで起動します。

docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor

起動後は http://localhost:8000 で開けます。ただし、公開イメージは既定の環境変数（mermaid.inkとkroki.ioへのリンク）のままビルドされていて、起動時に上書きできません。外部リンクを消すには、MERMAID_RENDERER_URL と MERMAID_KROKI_RENDERER_URL を空にして、自分でイメージをビルドします。READMEにも、空にすればActionsの該当リンクが消えると書かれています。図を含む設計書を、権限管理や版管理ごと社内で運用したい場合は、文書管理システム開発の段階から相談できます。

Mermaid記法の書き方：図の種類別の基本

Mermaidは、図の種類の宣言に続けて要素とつながりを書きます。frontmatterを使う場合は、宣言より前に設定やタイトルを置きます。%% で始まる行はコメントです。以下のコードは、すべてmermaid-cli 12.0.0（中のmermaidは12.2.0）でエラーなく描画できることを確かめています。図の種類ごとの細かい記法はマーメイド記法の書き方｜フローチャート・シーケンス図・ER図をテキスト管理する手順にまとめているので、ここでは各図の骨格だけを示します。

フローチャート（flowchart）の分岐と形

---
title: 経費精算の承認フロー
---
flowchart TD
    A([申請]) --> B{金額は5万円以上?}
    B -->|はい| C[部長が承認]
    B -->|いいえ| D[課長が承認]
    C --> E[(会計システムへ登録)]
    D --> E
    E --> F([完了])

TD は上から下への向きです。ほかに LR（左→右）、RL、BT を指定できます。ノードの形は括弧で決まり、[ ] が四角、([ ]) が端丸、{ } がひし形（分岐）、[( )] が円柱（DB）です。graph TD と書いても動きますが、表記を統一して読みやすくするため、これから書くなら flowchart にそろえてください。

シーケンス図（sequenceDiagram）の分岐と番号

sequenceDiagram
    autonumber
    actor U as ユーザー
    participant W as Webサーバー
    participant D as DB
    U->>W: ログイン要求
    activate W
    W->>D: 認証情報を照会
    D-->>W: 結果
    alt 認証成功
        W-->>U: トークンを返す
    else 認証失敗
        W-->>U: 401エラー
    end
    deactivate W

->> は実線（要求）、-->> は点線（応答）の矢印です。autonumber を書くとメッセージに通し番号が付き、レビューで「3番の応答が無い」のように場所を指せます。alt〜else〜end は、UMLの複合フラグメントの書き方です。ライフラインやフラグメントの意味はシーケンス図とは？UMLの書き方とライフライン・複合フラグメント・Mermaid実装を解説で解説しています。

ガントチャート（gantt）の依存と休日

gantt
    title 社内ツール開発
    dateFormat YYYY-MM-DD
    excludes weekends
    section 設計
    要件定義        :done, req, 2026-11-02, 5d
    基本設計        :active, des, after req, 7d
    section 実装
    実装            :impl, after des, 10d
    リリース判定    :milestone, after impl, 0d

after req のようにタスクIDを指定すると、前のタスクが終わった後に始まります。excludes weekends を書くと土日を期間から外して計算するので、営業日ベースの日程を引けます。

クラス図とER図の関連・多重度・キー表現

classDiagram
    class 注文 {
        +int 注文ID
        +Date 注文日
        +合計金額() int
    }
    class 明細 {
        +int 数量
        +小計() int
    }
    class 顧客 {
        +string 氏名
    }
    顧客 "1" --> "0..*" 注文 : 発注する
    注文 "1" *-- "1..*" 明細 : 含む

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    CUSTOMER {
        int id PK
        string name
    }
    ORDER {
        int id PK
        int customer_id FK
        date ordered_at
    }
    ORDER_ITEM {
        int order_id FK
        int quantity
    }

クラス図の *-- はコンポジション（明細は注文なしでは存在しない）、"1" --> "0..*" は多重度付きの関連です。ER図の ||--o{ は「1対0以上」、||--|{ は「1対1以上」を表します。属性の後ろに PK・FK を付けると、主キー・外部キーとして表示されます。カーディナリティの読み方はER図とは？書き方・エンティティやリレーション・カーディナリティを実装目線で解説が詳しいです。

状態遷移図（stateDiagram-v2）の開始・終了と差し戻し

stateDiagram-v2
    [*] --> 下書き
    下書き --> 申請中 : 提出
    申請中 --> 承認済 : 承認
    申請中 --> 下書き : 差し戻し
    承認済 --> [*]

[*] は開始と終了の状態で、状態名には日本語をそのまま使えます。「差し戻し」のように戻りがある遷移は、フローチャートより状態遷移図のほうが読み違いが起きにくくなります。

Mermaid記法チートシート：宣言キーワード早見表

主な図の種類と宣言キーワードの抜粋です。frontmatterを使う場合は、その後に宣言を書きます。掲載したキーワードはmermaid 12.2.0で描画を確かめました。12.2.0では、xychart・sankey・block・packet・treemap は末尾の -beta を付けても付けなくても動きます。ただし、GitHubなど同梱しているMermaidが古い環境では、-beta 付きでないと動かないことがあります。

UMLの図としてどれを書くべきかの判断は、UMLとは：仕様2.5.1の14種類の図と実務で使う4種類・PlantUMLとMermaidの書き方で整理しています。

GitHub・Notion・Confluence・VS Code・TeamsでMermaidを使う方法

GitHubでのMermaid表示とバージョン確認

GitHubでは、言語に mermaid を指定したコードフェンスを書くだけで図になります。GitHub Docsによると、表示できるのはIssue、Discussion、プルリクエスト、wiki、Markdownファイルです。拡張子 .mmd か .mermaid で保存したファイルも、リポジトリ上で図として表示されます。GitHubが使っているMermaidのバージョンは、中身を info の1行だけにしたmermaidブロックで確認できます。Live Editorで描けた図がGitHubで描けないときは、まずこのバージョンの差を疑ってください。

NotionのコードブロックでのMermaid表示

Notionは、2021年12月23日のリリースで、コードブロックでのMermaid描画に対応しました。コードブロックの左上にある言語の選択で「Mermaid」を選ぶと、コード・プレビュー・分割表示を切り替えられます。2022年8月には、/mermaid でMermaid用のコードブロックを直接作れるようになりました。

Confluence CloudのMarketplaceアプリ導入

Confluence Cloudで図として表示するには、Atlassian Marketplaceのアプリを使います。Mermaid Chart社自身が出しているMermaid Chart for Confluenceは、アプリ自体が無料です。2026年10月14日時点の掲載はバージョン2.2.0（2026年9月30日公開）、インストール数4,108、対応はConfluence Cloudのみでした。内蔵エディタはアカウントなしで使えます。AIでの生成とリアルタイム共同編集を使うには、Mermaid Chartのアカウント連携が必要です。Marketplaceには似た名前の他社アプリも複数あるので、提供元が「Mermaid Chart Inc」かどうかを確かめてから入れてください。

VS Code 1.121以降の標準Mermaidプレビュー

VS Codeは1.121（2026年5月）から、拡張機能なしでもMarkdownプレビューにMermaid図が表示されます。以前の定番だった拡張機能「Markdown Preview Mermaid Support」が残っていると、描画処理が競合して図が出ない場合があります。設定と拡張機能の選び方はVSCodeでMermaidを使う方法｜標準プレビュー・拡張機能の選び方・PNG/SVG出力【2026年9月】、表示されないときの切り分けはVSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処で解説しています。

Microsoft Teamsでの画像・共有URLによる図の共有

Mermaid Chartの連携一覧（2026年10月14日に確認）には、Confluence・Jira・Google Docs・Word・PowerPoint・ChatGPT・Claude Codeなどが並んでいますが、Microsoft Teamsはありません。Teamsで図を共有するときは、Live Editorの「Copy Image」で画像として貼るか、/view の共有URLを送ってください。

Mermaidの図が表示されないときの原因と直し方

次の3つは、mermaid-cli 12.0.0で実際にエラーを出して確かめた、よくある原因です。

• 宣言キーワードの大文字小文字：sequencediagram や SEQUENCEDIAGRAM と書くと、UnknownDiagramError: No diagram type detected になります。sequenceDiagram・classDiagram・stateDiagram-v2 は、大文字の位置まで正確に書く必要があります。
• ノード名の end：フローチャートで start --> end と書くと、Parse error on line 2 の後に got 'end' と表示されます。end は予約語です。End のように先頭を大文字にするか、E[end] のように表示ラベルとして書きます。
• 全角の記号：矢印を全角のマイナス記号で −−> と書くと、Lexical error on line 2. Unrecognized text. になります。日本語入力のまま記号を打った場合に起きやすい誤りです。ノードのラベルは日本語で問題ありませんが、矢印と括弧は半角で書いてください。

エラーの行がわからないときは、コードをmermaid.liveに貼ると該当行が示されます。Live Editorで描けるのに貼り付け先で描けない場合は、まずMermaidのバージョンとコードフェンスの言語指定を確認します。設定の制限や追加プラグインの干渉も原因になり得ます。手元で画像に書き出すときは、mermaid-cliを使います。mermaid-cli 12.0.0はNode.js 22.13以上が必要で、出力サイズは -w ではなく --size で指定します。

npm install -g @mermaid-js/mermaid-cli
mmdc -i flow.mmd -o flow.png
mmdc -i flow.mmd -o flow.svg -b transparent

よくある質問

Mermaid Live Editorは無料ですか？

無料です。mermaid.liveはMITライセンスのOSSで、ログインせずに図の作成・PNG／SVGの保存・URLでの共有ができます。料金が発生するのは、別サービスのMermaid Chart（mermaid.ai）の有料プランを契約した場合だけです。

Mermaid Live Editorはいくらですか？Mermaid Chartの料金は？

Live Editorは0円です。Mermaid ChartはBasic（無料）、Plus（1ユーザー月10ドル）、Premium（月20ドル）、Enterprise（個別見積もり）の4プランで、PlusとPremiumは年払いです（2026年10月14日時点）。

Mermaidは業務・商用で使っても大丈夫ですか？

使えます。MITライセンスは商用利用・改変・再配布を認めていて、条件は著作権表示とライセンス文を残すことだけです。図を外部サービスに送りたくない場合は、Live Editorを社内に立てるだけでなく、「社外秘の図をLive Editorで書くときの注意点」の手順で、mermaid.inkとKrokiへのリンクを無効にしてビルドします。

ConfluenceでMermaidを使うには？

Confluence Cloudでは、Atlassian Marketplaceの「Mermaid Chart for Confluence」（提供元Mermaid Chart Inc・アプリは無料）を入れて、ページに図を挿入します。AI生成と共同編集を使うには、Mermaid Chartのアカウント連携が必要です。

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

Notionは、コードブロックの言語を「Mermaid」にすれば図が表示されます。Teamsは、Mermaid Chartの公式連携一覧に載っていないため、Live Editorの「Copy Image」で画像を貼るか、閲覧専用の /view URLを送る方法が手軽です。

関連記事

• マーメイド記法の書き方｜フローチャート・シーケンス図・ER図をテキスト管理する手順
• VSCodeでMermaidを使う方法｜標準プレビュー・拡張機能の選び方・PNG/SVG出力【2026年9月】
• VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処
• PlantUMLとは？記法・使い方・インストールから.puml拡張子まで解説
• Excalidrawの使い方とDockerセルフホスト手順｜Reactへの埋め込みまで