MERMAID-MCP-APP

Mermaid MCP App

ライブプレビュー、テーマ切り替え、全画面編集に対応したインタラクティブな Mermaid ダイアグラムをレンダリングする、ストリーム可能な MCP App サーバーです。

デモ

ライブプレビュー、パン/ズームコントロール、全画面モード対応のインタラクティブなダイアグラム編集

機能

• 完全レンダリング - ダイアグラムの全生成を待ってから表示（部分的/ストリーミング出力なし）
• SVGO 最適化 - 自動 SVG 最適化でファイルサイズを約 85% 削減
• ダークモード - システムテーマを自動検出し、ニュートラルグレーパレットを適用
• インタラクティブなパン/ズーム - ホイールズームとドラッグコントロールで大規模ダイアグラムをナビゲート
• 全画面エディター - Mermaid 構文をライブプレビュー付きで編集、ズームコントロール（+/−/1:1）対応
• テーマ切り替え - ライト、ダーク、カスタム（エージェント提供）テーマ
• 全ダイアグラムタイプ対応 - フローチャート、シーケンス、クラス、ステート、ER、ガント、パイ、Git グラフなど
• スピナー付きエクスポート - SVGO 最適化された SVG をクリップボードにコピー（スピナーで進捗を表示）
• クライアント側レンダリング - サーバー依存なし、ブラウザで完全に動作

クイックスタート

リモート（Vercel）

ホストされたエンドポイントを使用：https://mermaid-mcp-app.vercel.app/mcp

クライアントでリモート MCP サーバーとして追加します。例えば claude.ai では：Settings → Connectors → Add custom connector → 上記 URL を貼り付け。

インストール

npm install

開発

ホットリロード付きの開発サーバーを起動：

npm run dev

サーバーは http://localhost:3001/mcp で起動します

ビルド

本番用にビルド：

npm run build

以下を作成します：

• dist/mcp-app.html - 単一ファイルバンドル UI
• dist/server.js - MCP サーバー
• dist/index.js - CLI エントリーポイント

使用方法

ローカル（HTTP）

npm run serve
# or
node dist/index.js

ローカル（stdio）

node dist/index.js --stdio

Vercel へのデプロイ

リモートアクセス用に Vercel にデプロイ：

npx vercel

MCP エンドポイントは https://mermaid-mcp-app.vercel.app/mcp で利用可能になります

MCP ツール

read_me

全ダイアグラムタイプの例を含む包括的な Mermaid 構文リファレンスを返します。

使用方法：create_view の前に呼び出して Mermaid 構文を学習します。

create_view

Mermaid ダイアグラムをレンダリングします。ダイアグラムは表示前に完全にレンダリングされます（段階的/ストリーミングレンダリングなし）。

パラメータ：

• mermaid（文字列、必須）- Mermaid ダイアグラム構文
• theme（文字列、オプション）- 以下のいずれか：default（自動検出）、forest、dark、neutral、base
• title（文字列、オプション）- ダイアグラムの上に表示するタイトル

注意事項：

• デフォルトテーマはシステムダークモードを自動検出し、ニュートラルグレーパレットを適用
• エージェントは組み込み Mermaid テーマ（forest、dark、neutral、base）を指定でき、UI では「カスタム」として表示
• 全画面モードはズームコントロール（+、−、1:1、ホイールズーム）とパン/ドラッグを含む

例：

{
  "mermaid": "flowchart TD\n  A[Start] --> B[End]",
  "theme": "forest",
  "title": "Simple Flow"
}

export_svg（アプリのみ）

レンダリングされたダイアグラムを SVGO を使用して最適化された SVG としてエクスポート。UI エクスポートボタン（処理中はスピナーアイコン）で呼び出されます。

最適化：

• SVGO は SVG サイズを約 85% 削減（例：334KB → 51KB）
• 座標を小数点以下 2 桁に丸める
• viewBox と mermaid ID を保持して適切なレンダリングを確保

アーキテクチャ

• サーバー：Node.js と Express + MCP SDK
  • Streamable HTTP と stdio トランスポートの両方に対応
  • リクエストごとのステートレス設計（セッションなし）
• UI：React 19 と Mermaid.js
  • importmap 経由で CDN からロード（Mermaid は jsdelivr、React は esm.sh）
  • ゼロサーバー依存のクライアント側レンダリング
  • Vite + vite-plugin-singlefile 経由の単一ファイル HTML バンドル（約 402KB）
  • エクスポート用の SVGO サーバー側最適化
• ビルド：TypeScript + Vite + Bun
  • 型安全なサーバーおよびクライアントコード
  • 最適化された本番バンドル

ファイル構成

mermaid-mcp-app/
├── src/
│   ├── server.ts          # MCP server with tool registration + SVGO
│   ├── main.ts            # Transport layer (HTTP + stdio)
│   ├── mcp-app.html       # HTML shell with importmap
│   ├── mcp-app.tsx        # React UI component
│   ├── theme-vars.ts      # Mermaid theme color palettes
│   └── global.css         # Styles (dark mode, animations)
├── api/
│   └── mcp.ts            # Vercel serverless handler
├── dist/                  # Build output
├── scripts/
│   └── setup-bun.mjs     # Auto-install bun
├── package.json
├── tsconfig.json          # Client TS config
├── tsconfig.server.json   # Server TS config
├── vite.config.ts         # Vite bundler config
├── vercel.json           # Vercel deployment config
└── manifest.json         # MCP app manifest

テクノロジー

• MCP SDK - Model Context Protocol
• ext-apps - MCP Apps 拡張機能
• Mermaid.js - ダイアグラム生成
• SVGO - SVG 最適化 (サーバー側)
• React 19 - UI フレームワーク
• Vite - ビルドツール
• TypeScript - 型安全性
• Bun - ビルドバンドラー

ライセンス

MIT