Mermaid Diagram Generator

🚀 海妖（Mermaid）モデルコンテキストプロトコルサーバ

このプロジェクトは、Mermaid MCP サーバを使用して様々なチャートを生成および管理する方法を詳細に説明しています。機能、動作原理、構築手順、使用方法、API 情報などが含まれています。

✨ 主な機能

• フローチャート、シーケンスダイアグラム、クラスダイアグラムなど、複数のチャートタイプをサポートします。
• 異なるテーマ（デフォルト、forest、dark）を設定できます。
• カスタム背景色をサポートします。
• コマンドラインツールとプログラミングインターフェースを介したインタラクションを提供します。
• チャートをファイルとして保存するか、直接出力することができます。

🔧 技術詳細

Mermaid MCP サーバは、Puppeteer と Mermaid.js をベースに実装されています。ユーザーから提供された JSON リクエストを解析し、対応する Mermaid チャートを生成します。その後、Puppeteer を使用して生成された SVG 画像をキャプチャし、PNG 形式に変換してクライアントに返します。

📦 インストール

1. リポジトリをクローンします：

git clone https://github.com/yourusername/mermaid-mcp.git
cd mermaid-mcp

2. 依存関係をインストールします：

npm install

3. サービスを起動します：

npm run dev

📦 構築手順

npm run dev # 開発モードでサーバを起動
npm run build # 本番環境用にビルド

💻 使用例

基本的な使用法

{
  "code": "graph LR\nA --> B\nB --> C"
}

テーマと背景色の設定

{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

指定パスに保存

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "クラスダイアグラムの例",
  "folder": "/var/www/diagrams"
}

📚 ドキュメント

API

リクエスト形式

HTTP POST リクエストで、Body は JSON 形式です：

{
  "code": string,
  "theme": string,
  "backgroundColor": string,
  "name": string,
  "folder": string
}

レスポンス形式

成功時のレスポンス：

{
  "status": "success",
  "data": {
    "url": "http://example.com/diagram.png"
  }
}

失敗時のレスポンス：

{
  "status": "error",
  "message": "エラーメッセージ"
}

環境変数

よくある質問

Q: クライアントで直接 Mermaid をレンダリングすることはできますか？

A: 現在はサポートされておらず、サーバを介して解析と生成を行う必要があります。

Q: 大きなサイズのチャートはどのように処理しますか？

A: Mermaid.js の設定パラメータを調整してレンダリング品質を最適化するか、チャンク単位で読み込むことができます。

プロジェクト構造

mermaid-mcp/
├── src/         # ソースコードディレクトリ
│   ├── index.ts     # エントリーファイル
│   └── types.ts    # 型定義
├── public/       # 静的リソースディレクトリ
└── package.json  # 依存関係管理ファイル

📄 ライセンス

このプロジェクトは MIT ライセンスの下で公開されています。詳細な条項は、LICENSE ファイルを参照してください。