Mermaid MCP Server

Model Context Protocol (MCP) ベースのMermaidダイアグラム変換サーバー。AIクライアントに強力なダイアグラム生成機能を提供します。

👁 License
👁 Python
👁 MCP
👁 UV

プロジェクト紹介

Mermaid MCP Serverは、Model Context Protocol (MCP) に基づくプロフェッショナルなMermaidダイアグラム変換サーバーであり、AIクライアントに強力なダイアグラム生成機能を提供します。このプロジェクトは、Mermaidダイアグラムコードを様々な形式の画像ファイル（PNG、JPG、SVG、PDF）に変換でき、ユーザーはMCPプロトコルをサポートする様々なAIクライアントで簡単に高品質なダイアグラムを生成できます。

コア機能

• マルチフォーマット出力: PNG、JPG、SVG、PDFなど複数の画像形式をサポート

• テーマカスタマイズ: default、dark、neutral、forestの4つの美しいテーマを内蔵

• カスタムオプション: 背景色、画像サイズなどのパラメータカスタマイズをサポート

• 構文検証: リアルタイムのMermaid構文検証機能を提供

• サンプルリソース: 豊富なダイアグラムタイプのサンプルコードを内蔵

• エラー処理: 充実したエラー処理メカニズムと分かりやすいエラーメッセージ

• STDIO/SSE デュアルモード: STDIOとSSEの2つの通信モードをサポート

• uvパッケージ管理: 超高速なuvパッケージマネージャーを使用

Related MCP server: mcp-mermaid-validator

機能リスト

技術アーキテクチャ

通信アーキテクチャ

┌─────────────────────────────────────────────────────────────────────────────────┐
│ 通信架构图 │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ ┌─────────────────────────┐ ┌─────────────┐ │
│ │ AI 客户端 │ ◄────► │ Mermaid MCP Server │ ◄────► │ Mermaid API │ │
│ │ (Cursor/Claude) │ │ STDIO/SSE │ │ mermaid.ink│ │
│ └──────────────────┘ └─────────────────────────┘ └─────────────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ AI 对话界面 MCP 协议通信 图表渲染转换 │
│ 生成图表请求 双向数据传输 返回图像数据 │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘

インストール手順

環境要件

• Python 3.12+

• uvパッケージマネージャー（推奨）

依存関係のインストール

方法1：uvを使用してインストール（推奨）

# 克隆仓库
git clone https://github.com/wwwzhouhui/mermaid_mcp_server.git
cd mermaid_mcp_server

# 安装依赖
uv sync

方法2：pipを使用してインストール

pip install -r requirements.txt

使用方法

クライアント設定

Cursorの設定

~/.cursor/mcp.json ファイルに以下の設定を追加します：

STDIOモード（推奨）：

{
 "mcpServers": {
 "mermaid-mcp-server-png-pdf-jpg-svg": {
 "command": "uvx",
 "args": [
 "mermaid-mcp-server-png-pdf-jpg-svg"
 ]
 }
 }
}

SSEモード：

{
 "mcpServers": {
 "mermaid-mcp-server-png-pdf-jpg-svg": {
 "url": "http://127.0.0.1:8003/sse"
 }
 }
}

Cherry Studioの設定

1. Cherry Studioを開く

2. 設定 → MCP Servers → サーバーを追加 に移動

3. パラメータを設定：

   • 名前: mermaid-mcp-server-png-pdf-jpg-svg

   • 説明: Mermaidダイアグラム生成サービス

   • タイプ: STDIO

   • コマンド: uvx

   • 引数: mermaid-mcp-server-png-pdf-jpg-svg

4. 保存して有効化をクリック

👁 Cherry Studio 設定例

Claude Desktopの設定

claude_desktop_config.json ファイルに以下を追加します：

{
 "mcpServers": {
 "mermaid-mcp-server-png-pdf-jpg-svg": {
 "command": "uvx",
 "args": [
 "mermaid-mcp-server-png-pdf-jpg-svg"
 ]
 }
 }
}

Continue.devの設定

config.json ファイルに以下を追加します：

{
 "mcpServers": {
 "mermaid-mcp-server-png-pdf-jpg-svg": {
 "command": "uvx",
 "args": [
 "mermaid-mcp-server-png-pdf-jpg-svg"
 ]
 }
 }
}

サービスの起動

STDIOモード（デスクトップクライアント向けに推奨）

uv run python main.py

SSEモード（ネットワーク接続用）

uv run python main.py --sse

設定説明

環境変数の設定

利用可能なツール

1. convert_mermaid_to_image

Mermaidダイアグラムコードを様々な形式の画像ファイルに変換します

パラメータ：

• mermaid_code (string): Mermaidダイアグラムコード

• output_format (string, オプション): 出力形式。png、jpg、svg、pdfをサポート。デフォルトは "png"

• theme (string, オプション): テーマスタイル。default、dark、neutral、forestをサポート。デフォルトは "default"

• background_color (string, オプション): 背景色。16進数コード

• width (number, オプション): 画像幅（ピクセル）

• height (number, オプション): 画像高さ（ピクセル）

サポートされている出力形式: PNG、JPG、SVG、PDF

2. validate_mermaid_syntax

Mermaidダイアグラムコードの構文の正しさを検証します

パラメータ：

• mermaid_code (string): 検証するMermaidダイアグラムコード

戻り値:

• valid (boolean): 検証が通過したかどうか

• error_message (string): エラーメッセージ（検証失敗時）

3. get_supported_options

コンバーターがサポートするオプションを取得します

戻り値:

• themes (array): サポートされているテーマリスト

• formats (array): サポートされている形式リスト

サポートされているダイアグラムタイプ

• フローチャート (Flowchart): プロセスやアルゴリズムの表現用

• シーケンス図 (Sequence Diagram): オブジェクト間の相互作用の表現用

• ガントチャート (Gantt Chart): プロジェクト進捗管理用

• 円グラフ (Pie Chart): データの割合の表現用

• Gitグラフ (Git Graph): Gitコミット履歴の表現用

• マインドマップ (Mind Map): 知識構造の表現用

• クラス図 (Class Diagram): クラス構造の表現用

使用例

フローチャートの例

请使用 convert_mermaid_to_image 工具生成一个流程图：
flowchart TD
 A[开始] --> B{判断条件}
 B -->|是 | C[执行动作 1]
 B -->|否 | D[执行动作 2]
 C --> E[结束]
 D --> E

シーケンス図の例

请使用 convert_mermaid_to_image 工具生成一个时序图，使用深色主题：
sequenceDiagram
 participant 用户
 participant 系统
 participant 数据库

 用户->>系统：登录请求
 系统->>数据库：验证用户
 数据库-->>系统：返回结果
 系统-->>用户：登录成功

構文検証の例

首先使用 validate_mermaid_syntax 验证语法，然后使用 convert_mermaid_to_image 生成图表

リソース例

ダイアグラムサンプルの取得

以下のリソースURIを通じて、様々なタイプのダイアグラムサンプルを取得できます：

• mermaid://examples/flowchart - フローチャートの例

• mermaid://examples/sequence - シーケンス図の例

• mermaid://examples/gantt - ガントチャートの例

• mermaid://examples/pie - 円グラフの例

• mermaid://examples/gitgraph - Gitグラフの例

• mermaid://examples/mindmap - マインドマップの例

• mermaid://examples/class - クラス図の例

プロジェクト構造

mermaid_mcp_server/
├── mermaid_mcp_server/ # 核心模块
│ ├── __init__.py
│ └── main.py # 主程序入口
├── requirements.txt # 依赖列表（pip）
├── pyproject.toml # 项目配置（uv）
├── .env.example # 环境变量示例
├── README.md # 项目文档
└── .vscode/ # VSCode 配置
 └── settings.json

開発ガイド

ローカル開発

# 克隆仓库
git clone https://github.com/wwwzhouhui/mermaid_mcp_server.git
cd mermaid_mcp_server

# 安装依赖
uv sync

# 配置环境变量
cp .env.example .env

# 启动服务（STDIO 模式）
uv run python main.py

# 启动服务（SSE 模式）
uv run python main.py --sse

デバッグモード

詳細なログ出力を有効にする：

export LOG_LEVEL=DEBUG
uv run python main.py

よくある質問

A:

1. ネットワーク接続とファイアウォールの設定を確認してください

2. mermaid.ink APIにアクセス可能か確認してください

3. プロキシ設定を確認してください

A:

1. validate_mermaid_syntaxツールを使用して構文をチェックしてください

2. Mermaid公式ドキュメントを参照してください

3. サンプルリソース内のコードを使用してください

A:

1. ダイアグラムの内容を簡略化してください

2. 複数の小さなダイアグラムに分割してください

3. 画像サイズパラメータを調整してください

A:

1. uvパッケージマネージャーをインストールしてください：curl -LsSf https://astral.sh/uv/install.sh | sh

2. またはpipを使用してグローバルにパッケージをインストールしてください

3. PATH環境変数を確認してください

A:

1. サービスがSSEモードで起動していることを確認してください

2. ポート8003が使用されていないか確認してください

3. URL設定が正しいことを確認してください

A:

1. 画像サイズパラメータを大きくしてください

2. 適切なテーマを選択してください

3. Mermaidコードの構造を最適化してください

A:

1. ネットワーク接続速度を確認してください

2. REQUEST_TIMEOUT環境変数を増やしてください

3. ダイアグラムの複雑さを簡略化してください

A:

1. テーマ名のスペルが正しいか確認してください

2. そのテーマがサポートされているか確認してください

3. 別のテーマ名を試してください

A:

1. background_colorパラメータを使用してください

2. 形式は16進数カラーコード（例：#FFFFFF）です

3. 一部の出力形式のみサポートされています

技術交流グループ

技術交流グループに参加して、使用感やフィードバックを共有してください：

👁 微信图片_20260501235133_120_6

作者への連絡

• WeChat: laohaibao2025

• メール: 75271002@qq.com

👁 微信二维码

寄付

このプロジェクトが役に立った場合は、コーヒーを一杯ご馳走していただけると嬉しいです ☕

WeChat Pay

👁 微信支付

Star History

プロジェクトが気に入ったら、Starを付けていただけると励みになります ⭐

👁 Star History Chart

License

MIT License

更新履歴

v0.1.0 (現在のバージョン)

• ✅ 初回バージョンリリース

• ✅ PNG、JPG、SVG、PDFのマルチフォーマット出力をサポート

• ✅ 4つのテーマスタイル（default、dark、neutral、forest）を統合

• ✅ 構文検証およびサンプルリソース機能を提供

• ✅ STDIOおよびSSEのデュアルモード通信をサポート

v0.0.3 (2025-07-21)

• ✅ 初回バージョンリリース

• ✅ マルチフォーマットダイアグラム変換をサポート

• ✅ 構文検証機能

• ✅ サンプルリソース機能

貢献ガイド

このプロジェクトを改善するために、IssueやPull Requestを歓迎します！

1. このリポジトリをForkする

2. 特徴ブランチを作成：git checkout -b feature/amazing-feature

3. 変更をコミット：git commit -m 'Add amazing feature'

4. ブランチにプッシュ：git push origin feature/amazing-feature

5. Pull Requestを提出する

注意事項

• ダイアグラムの生成には数秒かかる場合がありますので、お待ちください

• ネットワーク接続が正常であることを確認してください。サービスはオンラインAPIであるmermaid.inkに依存しています

• 生成された画像データはbase64形式で返されます

• 複雑なダイアグラムは生成に時間がかかる場合があります

Enjoy creating beautiful diagrams with Mermaid! 🎨✨

Maintenance

Resources

• GitHub Repository
Need Help?
• Reddit Discussion
Related Servers

Tools

• convert_mermaid_to_imageA
• get_supported_optionsA
• validate_mermaid_syntaxB