/ ディレクトリ / プレイグラウンド / mcp-mermaid
← 全サーバー ↗ GitHub
● コミュニティ hustcc ⚡ 即起動

mcp-mermaid

作者 hustcc · hustcc/mcp-mermaid

検証済みのMermaidダイアグラムやチャートを、SVG・PNG・ホストURLとしてチャットから直接生成できます。別途レンダラーは不要です。

mcp-mermaidはMermaidダイアグラムを動的に生成し、base64、SVGテキスト、保存ファイル、またはホストURLとして返します。構文検証と複数ラウンドの自動修正機能を備えており、不正なMermaid構文も自動的に修正されます。インフォグラフィック（タイムライン、比較、プロセス）にも対応しています。

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

ライブデモ

実際の動作

mermaid.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mermaid",
      "command": "npx",
      "args": [
        "-y",
        "mcp-mermaid"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "mermaid": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-mermaid"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

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

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： mcp-mermaid

テキストからシステムアーキテクチャ図を生成する

👤 設計ドキュメントを書いているエンジニア ⏱ ~10 min beginner

使うタイミング： ドキュメントにアーキテクチャを記述済みで、チャットから離れずにダイアグラムを作りたいとき。

前提条件
  • mcp-mermaidがインストール済みであること — MCPクライアントのコンフィグで npx -y mcp-mermaid を設定
フロー
  1. システムを説明する
    Here's my architecture: Cloudflare → API (Node) → Postgres + Redis → Worker (Go). Generate a Mermaid flowchart showing this.✓ コピーしました
    → 有効なMermaidソースがSVGとしてレンダリングされる
  2. スタイルを調整する
    Make Cloudflare blue, Postgres green, Redis red. Use dashed edges for async.✓ コピーしました
    → 修正されたダイアグラム
  3. ファイルに保存する
    Output as PNG file at ./docs/arch.png with white background.✓ コピーしました
    → ディスク上にファイルが生成される

結果： 設計ドキュメントにそのまま貼れるアーキテクチャPNG。

注意点
  • 非常に複雑なダイアグラムはMermaidのレイアウト制限に達する — 複数のダイアグラムに分割するか、subgraphでグルーピングする
  • テーマの色がドキュメントに合わない — デフォルトに頼らず、テーマ設定を明示的に指定する
組み合わせ： filesystem

バグレポート用のシーケンス図を作成する

👤 厄介な競合状態のバグを報告するエンジニア ⏱ ~5 min beginner

使うタイミング： 誰がいつ誰を呼び出すかをテキストで説明すると読みにくいとき。

フロー
  1. シーケンスを説明する
    Client sends POST, API starts transaction, writes to DB, crashes before commit. Meanwhile a retry comes in from the client. Draw a sequence diagram.✓ コピーしました
    → 並列ライフラインを含む明確なシーケンス図
  2. Issueにインラインで埋め込む
    Give me the Mermaid source so I can paste into a GitHub issue (which renders Mermaid natively).✓ コピーしました
    → そのまま貼り付けられるソース

結果： レビュアーが10秒で把握できるバグレポート。

組み合わせ： github

タイムラインからプロジェクトのガントチャートを生成する

👤 単発のためにガントチャートソフトに課金したくないプロジェクトリーダー ⏱ ~5 min beginner

使うタイミング： PRDやキックオフ向けのアドホックなタイムラインが必要なとき。

フロー
  1. フェーズを列挙する
    Phases: Discovery (2 weeks), Design (3 weeks), Implementation (6 weeks), QA (2 weeks overlap with impl last 2 weeks). Starting 2026-05-01. Make a gantt.✓ コピーしました
    → 有効なガントチャートソース
  2. PNGを出力する
    Save as PNG and also give me the URL I can embed in the PRD.✓ コピーしました
    → PNGパス + ホストURL

結果： 1分以内にPRD用のタイムライングラフィックが完成。

組み合わせ

他のMCPと組み合わせて10倍の力を

mermaid + filesystem

生成したダイアグラムをバージョン管理されたアセットとして保存する

Generate architecture diagram v2 as ./docs/arch-v2.png and update the reference in ./docs/README.md.✓ コピーしました
mermaid + github

MermaidソースをPRの説明に記載する — GitHubがネイティブでレンダリングする

Draft a PR description explaining the data flow change, include a Mermaid sequence diagram inline.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
generate_mermaid source: str (Mermaid DSL), output: base64|svg|mermaid|file|svgUrl|pngUrl, theme?, backgroundColor? あらゆるダイアグラム生成時 free (local render) or 1 API call for hosted URLs
validate_mermaid source: str 構文に不安がある場合、生成前に検証する free

コストと制限

運用コスト

APIクォータ
ローカルレンダリングは無料。ホストURL出力はmermaid.inkを使用し、常識的な範囲の利用なら無料です
呼び出しあたりのトークン
少量 — ダイアグラムDSLはコンパクト
金額
無料
ヒント
GitHub/docsなどネイティブレンダリング対応の環境では 'mermaid' 出力を優先してください。PNG/SVGはサーバーサイドレンダリングが必要な場合のみ使用します。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： なし
データ送信先： base64/svgはローカルレンダリング。ホストURLはmermaid.inkを使用

トラブルシューティング

よくあるエラーと対処法

Mermaid parse error

LLMが不正なDSLを出力しました。まず validate_mermaid で検証してください。mcp-mermaidは2回目のパスで自動修正も行います。

確認： validate_mermaid on the source
PNG output fails in Docker

ヘッドレスブラウザが必要です。ブラウザがバンドルされている公式Dockerイメージを使用してください。

確認： docker run hustcc/mcp-mermaid
Diagram too big, gets cut off

subgraphに分割するか、複数のダイアグラムに分けてください。

代替案

mcp-mermaid 他との比較

代替案代わりに使う場面トレードオフ
PlantUML MCPPlantUMLのより豊富なUML表現を使いたいときJavaランタイムが必要
antv-chart / mcp-server-chartダイアグラムよりもデータチャートが必要なとき出力の形式が異なる
Raw Mermaid via the web editorチャットワークフロー外で作業しているときMCP連携なし

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る