Realize,Inc.

投稿日: 2026年04月18日

009. 「Mermaid Live Editor」で図解をコード管理する

#Diagram_as_Code #Mermaid #ドキュメント管理 #DX

システム構成図やシーケンス図を「画像」として保存すると、修正のたびに元データを探し、書き出し直す手間が発生する。
Mermaid を導入すれば、テキスト（コード）を書くだけで図解が自動生成され、Git等のバージョン管理とも極めて相性が良くなる。

1. Mermaid Live Editor とは

ブラウザ上で Mermaid の構文をリアルタイムにプレビュー・編集できる公式エディタ。
インストール不要で、作成した図は画像(PNG/SVG)として出力できるほか、Markdownへ直接埋め込むためのコードも取得可能。

2. 基本的な使い方

エディタ画面の左側にコードを入力すると、右側に図が即座に描画される。

■ フローチャート (graph)

処理の流れやシステム構成を記述する。方向は TD (Top-Down) や LR (Left-to-Right) で指定可能。

graph TD
    A[Start] --> B{判定}
    B -- Yes --> C[処理A]
    B -- No --> D[処理B]
    C --> E[End]
    D --> E

■ シーケンス図 (sequenceDiagram)

API連携やユーザーの遷移など、時系列のやり取りを可視化する。

sequenceDiagram
    participant User
    participant App
    participant DB
    User->>App: ログイン試行
    App->>DB: ユーザー照会
    DB-->>App: 結果返却
    App-->>User: ログイン成功

3. 2026年現在の活用ポイント

  • AI連携: 「ChatGPTやGeminiに『○○の構成をMermaid形式で出力して』と指示し、出たコードをLive Editorに貼る」手法が、現在最も効率的な図解作成術である。
  • GitHub / VS Code連携: GitHubのREADMEやVS Code（拡張機能導入済み）では、Mermaidコードをそのまま貼るだけで図としてレンダリングされる。
  • デザイン調整: 画面左下の「CONFIG」タブから、テーマ（Default, Dark, Forest等）を一瞬で切り替えられる。

4. 保存と共有

「Actions」ボタンから、用途に合わせて出力形式を選択する。

  • Save as PNG / SVG: 資料作成やスライドへの貼り付け用。
  • Copy Markdown: GitHubやNotionへの埋め込み用。
  • Actions -> Copy Link: 現在の編集状態をURLとして保存。チームへの共有に最適。

5. まとめ

図解を「描く」のではなく「書く」スタイルへ移行することで、ドキュメントの鮮度は劇的に向上する。
まずは Live Editor のサンプル集（Sample Diagrams）を触り、その手軽さを体感してほしい。

免責事項

本記事の内容は、投稿時点における個人的な備忘録としてまとめたものです。正確性には万全を期しておりますが、GitHubの仕様変更や利用規約の改定により、内容が古くなっている可能性があります。本記事を参考に操作を行ったことによるいかなる損害についても、当方では一切の責任を負いかねますのでご了承ください。最新の情報は公式ドキュメントをご確認ください。

無償ソフト公開活動へのご支援

NetEnumをはじめ、NetEnumMobile、オンラインソフト、FreeTools など、 弊社では20年以上にわたり各種ソフトを無償で公開してまいりました。
これまでのご利用へのお気持ちや、公開継続へのご支援をいただけますと大変励みになります。
業務利用されている方からのご支援も歓迎しております。

300円のご支援 1,000円のご支援 3,000円のご支援 任意金額でご支援

※ ご支援は特定ソフトの更新や機能追加をお約束するものではなく、 無償ソフト公開活動全体の維持・運営に活用させていただきます。
※ Stripeの安全な決済ページへ移動します（決済画面の表示名は仕様上「ECサイト」となりますが、当社のStripeアカウントによる決済です）

次世代メンバー募集中