Peng Shawn Mermaid MCP Server

🚀 精霊魚チャート MCP サーバー

精霊魚チャート（Mermaid）MCP サーバーは、テキストベースのチャート描画ツールです。フローチャート、シーケンス図、クラス図、タイムシーケンス図など、さまざまなチャートタイプをサポートしています。MCP クライアントと統合することで、チャット画面から直接精霊魚チャートを使用してチャートを生成し、共有することができます。

✨ 主な機能

• 多様なチャートタイプのサポート：フローチャート、シーケンス図、クラス図、タイムシーケンス図などを含みます。
• テーマ切り替え：複数のチャートスタイルが組み込まれており、ユーザーは必要に応じて異なるテーマを選択できます。
• 背景色設定：チャートの背景色をカスタマイズでき、視覚的な効果を向上させます。
• 高いコード設定可能性：簡単なテキスト入力で複雑なチャートを生成できます。
• 柔軟な統合性：Claude desktop、Cursor などのさまざまな MCP クライアントとシームレスに統合できます。

🔧 技術詳細

精霊魚チャートサーバーは、ユーザーの入力コマンドを受け取り、その中のチャート記述とパラメータを解析します。その後、Mermaid レンダリングエンジンを使用してテキストをグラフィックに変換します。生成された画像は、MCP プロトコルを介してクライアントに送信され、表示または保存することができます。

📦 インストール

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

   git clone https://github.com/your-repo.git
   

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

   npm install
   

3. 開発サーバーを起動します：

   npm run dev
   

💻 使用例

基本的な使用法

{
  "code": "flowchart\n    A -> B: Message from A to B\n    B -> C: Message from B to C"
}

高度な使用法

Claude desktop との統合

Claude desktop はすでに精霊魚チャートをサポートしていますが、MCP サーバーを使用することで、より多くのカスタマイズ機能を実現できます。

その他のツール

• Cursor：Cursor で使用する場合は、CONTENT_IMAGE_SUPPORTED=false を設定する必要があります。
• Glama：Glama プラットフォームに直接統合できます。

📚 ドキュメント

API

MCP サーバーは以下のインターフェースを提供します：

{
  "code": "your_mermaid_code",
  "theme": "forest|dark|light",
  "backgroundColor": "#hex_code",
  "name": "file_name",
  "folder": "/path/to/save"
}

環境変数

• CONTENT_IMAGE_SUPPORTED：レスポンスで直接画像を返すかどうかを制御します。値は true または false です。

よくある質問

⚠️ 重要提示

• Claude desktop はすでに精霊魚チャートをサポートしていますが、なぜこのサーバーが必要なのですか？ Claude の組み込みサポートでは theme と backgroundColor パラメータがサポートされていません。また、独立したサーバーを使用することで、さまざまな MCP クライアント間でチャートを簡単に共有できます。
• なぜ Cursor で CONTENT_IMAGE_SUPPORTED=false を設定する必要があるのですか？ Cursor は現在、レスポンスで直接画像を返すことをサポートしていないためです。

リリース

このプロジェクトは、GitHub Actions を使用して自動化されたリリースプロセスで npm に公開されます。

方法一：リリーススクリプトを使用する（推奨）

1. コードをコミットし、リポジトリにプッシュします。
2. リリースコマンドを実行します：

   npm run release 0.1.4
   

   または、セマンティックバージョンの増分を使用します：

   npm run release patch|minor|major
   

方法二：手動で公開する

1. プロジェクトをビルドします。
2. パッケージ化して npm にアップロードします。

📄 ライセンス

このプロジェクトは MIT License を使用しています。