VS Codeでマーメイド記法のシーケンス図を描く手順

マーメイド記法を使って、Visual Studio Code（VS Code）でシーケンス図を描く手順と運用方法をわかりやすく解説します。

VS Codeでマーメイド記法を使う準備

Mermaid記法をVS Codeで使うには、事前のツール導入が不可欠です。このセクションでは、必要な拡張機能や導入手順を紹介します。

VS CodeでMermaid記法を使うには、拡張機能を導入することでリアルタイムプレビューも可能になります。

必要なツール・拡張機能

拡張機能のインストール手順

1. VS Codeを起動
2. 拡張機能（Extensions）パネルを開く
3. 「Markdown Preview Mermaid Support」で検索
4. [Install] をクリックしてインストール

マーメイド記法の基本：シーケンス図の書き方

ここでは、実際にMermaid記法でシーケンス図をどのように記述するかを具体例とともに解説します。

📄 記述例（.mdファイル内）

```mermaid
sequenceDiagram
    participant User
    participant System
    User->>System: Request Login
    System-->>User: Return Result
```　

✏️ 書き方のポイント

• ““mermaid` と ““` のブロックで囲む
• UTF-8エンコードで保存
• Markdown形式の .md ファイル内に記述

🖥️ プレビュー方法

• Ctrl + Shift + V でMarkdownプレビューを表示
• 拡張機能が有効なら、Mermaid図が表示される

💡 補足：複数図の切り替えや行番号指定

• 複数のMermaidブロックを同一Markdown内に記述可能
• Mermaidブロックは他のMarkdown要素と組み合わせても問題なし
• コメントも %% コメント内容 で記述でき、視認性やメモにも便利です

シーケンス図の確認・出力

作成したMermaid図を画像として保存したい場合や、他のツールで活用したい場合の手順を解説します。

画像として保存するには？

Mermaid Live Editorを活用すれば、簡単に画像（PNG/SVG）として出力できます。

✅ Mermaid Live Editorでは、コードブロック（mermaid … ）で囲む必要はありません。sequenceDiagramなどの記法をそのまま貼り付けて使用します。

1. https://mermaid.live にアクセス
2. VS Codeで記述したマーメイド記法を貼り付け
3. 「Export」からPNGまたはSVGを選択してダウンロード

Mermaidシーケンス図の予約語と構文（サンプル付き）

Mermaidでシーケンス図を記述する際に使う基本的なキーワード（予約語）とその意味を以下にまとめます。すべてVS CodeやLive Editorで利用できます。

記述例：構文をまとめて活用するサンプル

```mermaid
sequenceDiagram
    autonumber
    participant A
    participant B
    participant C

    A->>B: 初期処理
    activate B
    Note right of B: 中間処理
    B-->>A: 応答
    deactivate B

    alt 条件が真
        A->>C: 条件付き処理
    else 条件が偽
        A->>C: 別の処理
    end

    loop 繰り返し処理
        C->>C: 自己呼び出し
    end

    opt オプション処理
        C-->>A: オプション応答
    end

    par 並列処理
        A->>B: 並列1
    and
        A->>C: 並列2
    end

    rect rgb(240,240,255)
        A->>B: 色付きの囲いブロック内
    end

    A-x C: 終了処理
```　

知っておきたいTips集

Mermaidをより便利に活用するための小技や注意点をまとめました。実務で役立つ知識も含まれています。

Mermaidをより便利に活用するための小技や注意点をまとめました。実務で役立つ知識も含まれています。

1. テーマを変更して見やすくする

Mermaidではテーマを設定できます。ただし、VS Codeの「Markdown Preview Mermaid Support」拡張ではこのテーマ指定（%%{ init: { 'theme': 'forest' } }%% など）が反映されない場合があります。正確な表示を確認したい場合は Mermaid Live Editor や Mermaid CLI の利用を推奨します。以下のように記述することで、図全体の配色やフォントが変更されます。

記述例：

%%{ init: { 'theme': 'forest' } }%%
```mermaid
sequenceDiagram
    participant A
    participant B
    A->>B: テーマ付きシーケンス図
```　

利用できるテーマ：default, forest, dark, neutral など

2. コメントで記述を整理する

Mermaid記法では %% を使ってコメントを入れることができます。

⚠ ただし、VS Codeの「Markdown Preview Mermaid Support」では %% コメント がコメントとして無視されず、図中にそのまま表示されることがあります。Live EditorやMermaid CLIを使用すると正しくコメント扱いされます。

💡 補足：現時点では VS Code では %% コメント がそのまま表示されてしまうため、Markdownのコメント機能（<!-- コメント -->）で補足を書くのが有効です。

記述例：

%% ここからログインフロー
```mermaid
sequenceDiagram
    participant User
    participant System
    User->>System: ログイン要求
```　

3. ノート（注釈）を図に入れる

Mermaidのシーケンス図では、Note を使って処理の流れに注釈を追加できます。操作や仕様の補足を図中に書きたいときに便利です。

記述例：

```mermaid
sequenceDiagram
    participant A
    participant B
    A->>B: リクエスト送信
    Note right of B: ここで処理を検証
```　

📌 Note right of B や Note left of A のように、表示位置を調整できます。

4. .mmdファイルとCLIによる図の自動生成

Mermaidの図を .mmd という専用ファイルに分けて保存し、それをコマンド（CLI）で画像として自動出力する方法があります。

この方法を使えば、図を何度も使い回したり、大量の図を一括で画像化したりすることができます。設計資料やマニュアルを自動化して生成したいときに便利です。

🔧 詳細な補足：

• .mmd ファイルは、図だけを保存するテキストファイルです。
• たとえば login_flow.mmd というファイルを作っておけば、設計書・README・プレゼンなどに共通で使い回せます。
• CLI（コマンドラインツール）を使えば、以下のように自動でSVGなどの画像に変換できます。

npx @mermaid-js/mermaid-cli -i login_flow.mmd -o login_flow.svg

※ npx と Node.js が必要です。

この仕組みをCIツールに組み込めば、Markdownの更新にあわせて図も自動で更新される仕組みをつくることも可能です。

運用のポイントと活用法

図をチームや業務でうまく運用するためのコツや活用シーンをご紹介します。

推奨ワークフロー

• VS CodeでMarkdownファイルに記述
• Gitでバージョン管理
• チーム内でLive EditorやVS Code拡張を併用してレビュー
• 必要に応じて画像として出力してドキュメントに挿入

活用例

• 設計レビュー資料の図表化
• READMEや設計書への図挿入
• 状態遷移やAPIフローの視覚化
• 開発チーム内のナレッジ共有：設計方針や仕様の流れを図で共有することで認識齟齬を防止
• 非エンジニアとの連携：Markdownベースで簡単に可視化できるため、ビジネスサイドにも伝わりやすい

まとめ

VS Codeと適切な拡張機能、そしてMermaid Live Editorを組み合わせることで、シーケンス図をはじめとする様々な図をMarkdownベースで効率的に管理・共有できます。

✅ マーメイド記法を活用するポイント：

• VS CodeでMarkdown＋Mermaidを記述
• 拡張機能でリアルタイムプレビュー
• Live Editorで画像出力も可能
• スタイルやテーマ指定で視認性をカスタマイズ
• チーム・CI連携にも応用可能

ドキュメントの可視性と保守性を高めたい方は、ぜひこの手法を取り入れてみてください。