--- title: "Mermaid記法の使い方｜無料のLive Editor（mermaid.live）でフローチャート・シーケンス図を作成" url: "https://www.issoh.co.jp/tech/details/3374/" published: 2024-08-22 updated: 2026-10-14 categories: ["開発"] publisher: "株式会社一創" --- # Mermaid記法の使い方｜無料のLive Editor（mermaid.live）でフローチャート・シーケンス図を作成 Mermaid（マーメイド）は、テキストを書くとフローチャートやシーケンス図を描画するJavaScriptのライブラリです。本体も公式のオンラインエディタ「Mermaid Live Editor」（[mermaid.live](https://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](https://github.com/mermaid-js/mermaid)は2014年11月に作られ、スター数は2026年10月14日時点で約9万です。npmの最新版は2026年10月13日公開の[12.2.0](https://www.npmjs.com/package/mermaid)です。12系（2026年9月10日の12.0.0〜）では、既定の配色やレイアウトが11系から変わりました。マウスで描く作図ツールとの使い分けは、[Excalidrawの使い方とDockerセルフホスト手順｜Reactへの埋め込みまで](/tech/details/17487/)や[PlantUMLとは？記法・使い方・インストールから.puml拡張子まで解説](/tech/details/4649/)と比べると判断しやすくなります。 ## Mermaidは無料？料金とMermaid Chartとの違い ### Mermaid本体とLive Editorが無料と言える根拠 Mermaid本体のリポジトリも、Live Editorの[mermaid-js/mermaid-live-editor](https://github.com/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紹介](https://mermaid.js.org/ecosystem/mermaid-chart.html)）。現在のドメインはmermaid.aiです。ビジュアル編集やAIでの図の生成、Confluence・Google Docs・Word・PowerPointへの埋め込みに対応します。[料金ページ](https://mermaid.ai/pricing)（2026年10月14日に取得）の内容は次のとおりです。 | プラン | 料金 | 図の数 | AIクレジット | 閲覧専用席 | | ---------- | --------------- | --------- | ------- | ----- | | Basic | 無料 | 3または6（下記） | 15 | なし | | Plus | 1ユーザー月10ドル（年払い） | 無制限 | 年300 | なし | | Premium | 1ユーザー月20ドル（年払い） | 無制限 | 年2,000 | 無制限 | | Enterprise | 個別見積もり | 無制限 | 無制限 | 無制限 | 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」と入っていても、公式とは限りません。 | サービス | URL | 運営 | | ----------------------- | ----------------------- | -------------------- | | Mermaid Live Editor（公式） | mermaid.live | mermaid-js（GitHub組織） | | Mermaid Viewer | docs.mermaidviewer.com | 別の運営者 | | Mermaid記法エディタ | mermaid-live-editor.com | 別の運営者 | | MMChart（iOSアプリ） | App Store | 別の運営者（アプリ内課金あり） | 公式かどうかは、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`）を読んで整理すると、次のようになります。 | 操作 | 処理する場所 | 社外秘の図 | | ------------------- | -------------------- | ------- | | PNG・SVGボタン（ダウンロード） | ブラウザ内 | 使える | | Copy Image | ブラウザ内 | 使える | | PNG・SVG横の外部リンク | mermaid.ink | 使わない | | Kroki | kroki.io | 使わない | | Copy Markdown | 貼った先でmermaid.inkが画像化 | 使わない | | Save diagram・AI系の機能 | mermaid.ai | 契約内容を確認 | 外部へ渡る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手順](https://github.com/mermaid-js/mermaid-live-editor)では、公開イメージを次のコマンドで起動します。 ``` 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の該当リンクが消えると書かれています。図を含む設計書を、権限管理や版管理ごと社内で運用したい場合は、[文書管理システム開発](/service/business%5Fsystem/document-management/)の段階から相談できます。 ## Mermaid記法の書き方：図の種類別の基本 Mermaidは、図の種類の宣言に続けて要素とつながりを書きます。frontmatterを使う場合は、宣言より前に設定やタイトルを置きます。`%%` で始まる行はコメントです。以下のコードは、すべてmermaid-cli 12.0.0（中のmermaidは12.2.0）でエラーなく描画できることを確かめています。図の種類ごとの細かい記法は[マーメイド記法の書き方｜フローチャート・シーケンス図・ER図をテキスト管理する手順](/tech/details/17351/)にまとめているので、ここでは各図の骨格だけを示します。 ### フローチャート（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実装を解説](/tech/details/13482/)で解説しています。 ### ガントチャート（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図とは？書き方・エンティティやリレーション・カーディナリティを実装目線で解説](/tech/details/13484/)が詳しいです。 ### 状態遷移図（stateDiagram-v2）の開始・終了と差し戻し ``` stateDiagram-v2 [*] --> 下書き 下書き --> 申請中 : 提出 申請中 --> 承認済 : 承認 申請中 --> 下書き : 差し戻し 承認済 --> [*] ``` `[*]` は開始と終了の状態で、状態名には日本語をそのまま使えます。「差し戻し」のように戻りがある遷移は、フローチャートより状態遷移図のほうが読み違いが起きにくくなります。 ## Mermaid記法チートシート：宣言キーワード早見表 主な図の種類と宣言キーワードの抜粋です。frontmatterを使う場合は、その後に宣言を書きます。掲載したキーワードはmermaid 12.2.0で描画を確かめました。12.2.0では、`xychart`・`sankey`・`block`・`packet`・`treemap` は末尾の `-beta` を付けても付けなくても動きます。ただし、GitHubなど同梱しているMermaidが古い環境では、`-beta` 付きでないと動かないことがあります。 | 図の種類 | 宣言キーワード | 主な用途 | | --------- | --------------------- | ------------ | | フローチャート | flowchart（graph） | 業務フロー・処理の流れ | | シーケンス図 | sequenceDiagram | API・画面間のやり取り | | クラス図 | classDiagram | オブジェクト設計 | | 状態遷移図 | stateDiagram-v2 | ステータスの遷移 | | ER図 | erDiagram | テーブル設計 | | ガントチャート | gantt | 日程・依存関係 | | 円グラフ | pie | 構成比 | | マインドマップ | mindmap | 発想の整理 | | タイムライン | timeline | 沿革・ロードマップ | | Gitグラフ | gitGraph | ブランチ戦略 | | ユーザージャーニー | journey | 体験の段階と満足度 | | 4象限チャート | quadrantChart | 優先度の評価 | | C4図 | C4Context | システム構成 | | アーキテクチャ図 | architecture-beta | クラウド構成 | | カンバン | kanban | タスクの状態 | | XYチャート | xychart（xychart-beta） | 棒・折れ線グラフ | | サンキー図 | sankey（sankey-beta） | 量の流れ | UMLの図としてどれを書くべきかの判断は、[UMLとは：仕様2.5.1の14種類の図と実務で使う4種類・PlantUMLとMermaidの書き方](/tech/details/17464/)で整理しています。 ## GitHub・Notion・Confluence・VS Code・TeamsでMermaidを使う方法 ### GitHubでのMermaid表示とバージョン確認 GitHubでは、言語に `mermaid` を指定したコードフェンスを書くだけで図になります。[GitHub Docs](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams)によると、表示できるのはIssue、Discussion、プルリクエスト、wiki、Markdownファイルです。拡張子 `.mmd` か `.mermaid` で保存したファイルも、[リポジトリ上で図として表示](https://docs.github.com/en/repositories/working-with-files/using-files/working-with-non-code-files)されます。GitHubが使っているMermaidのバージョンは、中身を `info` の1行だけにしたmermaidブロックで確認できます。Live Editorで描けた図がGitHubで描けないときは、まずこのバージョンの差を疑ってください。 ### NotionのコードブロックでのMermaid表示 Notionは、2021年12月23日の[リリース](https://www.notion.com/releases/2021-12-23)で、コードブロックでのMermaid描画に対応しました。コードブロックの左上にある言語の選択で「Mermaid」を選ぶと、コード・プレビュー・分割表示を切り替えられます。2022年8月には、`/mermaid` でMermaid用のコードブロックを直接作れるようになりました。 ### Confluence CloudのMarketplaceアプリ導入 Confluence Cloudで図として表示するには、Atlassian Marketplaceのアプリを使います。Mermaid Chart社自身が出している[Mermaid Chart for Confluence](https://marketplace.atlassian.com/apps/1234056/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月】](/tech/details/6583/)、表示されないときの切り分けは[VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処](/tech/details/2334/)で解説しています。 ### Microsoft Teamsでの画像・共有URLによる図の共有 Mermaid Chartの[連携一覧](https://mermaid.ai/plugins)（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図をテキスト管理する手順](/tech/details/17351/) - [VSCodeでMermaidを使う方法｜標準プレビュー・拡張機能の選び方・PNG/SVG出力【2026年9月】](/tech/details/6583/) - [VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処](/tech/details/2334/) - [PlantUMLとは？記法・使い方・インストールから.puml拡張子まで解説](/tech/details/4649/) - [Excalidrawの使い方とDockerセルフホスト手順｜Reactへの埋め込みまで](/tech/details/17487/) --- 出典: [Mermaid記法の使い方｜無料のLive Editor（mermaid.live）でフローチャート・シーケンス図を作成]()（株式会社一創）