mermaid-live-mcp - From prompt to diagram in seconds

mermaid-live-mcp

ライブブラウザプレビュー機能を備えた、Mermaid の図を生成する MCP サーバーです。図をリアルタイムでレンダリングし、SVG／PNG へのエクスポートに対応しています。

インストール

Claude Desktop

Claude Desktop の設定（macOS では ~/Library/Application Support/Claude/claude_desktop_config.json）に追加します。

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

Cursor

プロジェクトのルートにある .cursor/mcp.json に追加します。

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

Claude Code

claude mcp add mermaid -- npx -y mermaid-live-mcp

Windsurf

~/.codeium/windsurf/mcp_config.json に追加します。

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

ツール

ツール	説明
generate_mermaid	Mermaid 構文から図を生成し、ブラウザでライブプレビューを開きます
update_diagram	図の Mermaid 構文を置き換え、ライブプレビューを再レンダリングします
list_diagrams	現在のセッションで生成されたすべての図を一覧表示します
export_diagram	図の SVG をディスクに書き込みます

仕組み

AI アシスタントに図の作成を依頼すると、mermaid-live-mcp は次の処理を行います。

1. Mermaid 構文を解析します
2. ライブプレビューを表示するブラウザーのタブを開きます
3. WebSocket 経由で図を SVG としてリアルタイムにレンダリングします
4. SVG と PNG のエクスポート用ダウンロードボタンを表示します

図への変更は即座にブラウザーへ反映されるため、ページを更新する必要はありません。

対応する図の種類

フローチャート、シーケンス図、クラス図、状態図、ER 図、ガントチャート、円グラフ、Git グラフ、マインドマップ、タイムラインなど、Mermaid のすべての図の種類に対応しています。

開発

pnpm install
pnpm build

プロジェクト構成

パッケージ	説明
packages/mcp-server	MCP サーバー（mermaid-live-mcp として公開）
packages/preview	WebSocket 経由のライブブラウザプレビュー
packages/core	図の解析、レイアウト、SVG レンダリング
packages/cli	コマンドラインインターフェイス

ライセンス

MIT