Mermaid MCP Server

Ein auf dem Model Context Protocol (MCP) basierender Mermaid-Diagramm-Konvertierungsserver, der KI-Clients leistungsstarke Funktionen zur Diagrammerstellung bietet.

👁 License
👁 Python
👁 MCP
👁 UV

Projekteinführung

Mermaid MCP Server ist ein professioneller, auf dem Model Context Protocol (MCP) basierender Mermaid-Diagramm-Konvertierungsserver, der KI-Clients leistungsstarke Funktionen zur Diagrammerstellung bietet. Das Projekt kann Mermaid-Diagrammcode in verschiedene Bildformate (PNG, JPG, SVG, PDF) konvertieren, sodass Benutzer problemlos hochwertige Diagramme in verschiedenen KI-Clients erstellen können, die das MCP-Protokoll unterstützen.

Kernfunktionen

• Ausgabe in mehreren Formaten: Unterstützt verschiedene Bildformate wie PNG, JPG, SVG und PDF

• Designanpassung: Integrierte Unterstützung für vier elegante Designs: default, dark, neutral und forest

• Benutzerdefinierte Optionen: Unterstützt die Anpassung von Parametern wie Hintergrundfarbe und Bildgröße

• Syntaxvalidierung: Bietet eine Echtzeit-Validierungsfunktion für Mermaid-Syntax

• Beispielressourcen: Enthält eine Vielzahl von Beispielcodes für Diagrammtypen

• Fehlerbehandlung: Umfassender Fehlerbehandlungsmechanismus und benutzerfreundliche Fehlermeldungen

• STDIO/SSE-Dualmodus: Unterstützt sowohl STDIO- als auch SSE-Kommunikationsmodi

• uv-Paketverwaltung: Verwendet den extrem schnellen uv-Paketmanager

Related MCP server: mcp-mermaid-validator

Funktionsliste

Technische Architektur

Kommunikationsarchitektur

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

Installationsanleitung

Systemanforderungen

• Python 3.12+

• uv-Paketmanager (empfohlen)

Abhängigkeiten installieren

Methode 1: Installation mit uv (empfohlen)

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

# 安装依赖
uv sync

Methode 2: Installation mit pip

pip install -r requirements.txt

Gebrauchsanweisung

Client-Konfiguration

Cursor-Konfiguration

Fügen Sie die folgende Konfiguration in der Datei ~/.cursor/mcp.json hinzu:

STDIO-Modus (empfohlen):

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

SSE-Modus:

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

Cherry Studio-Konfiguration

1. Öffnen Sie Cherry Studio

2. Gehen Sie zu Einstellungen → MCP Servers → Server hinzufügen

3. Konfigurationsparameter:

   • Name: mermaid-mcp-server-png-pdf-jpg-svg

   • Beschreibung: Mermaid-Diagrammerstellungsdienst

   • Typ: STDIO

   • Befehl: uvx

   • Parameter: mermaid-mcp-server-png-pdf-jpg-svg

4. Klicken Sie auf Speichern und Aktivieren

👁 Cherry Studio Konfigurationsbeispiel

Claude Desktop-Konfiguration

Fügen Sie dies in der Datei claude_desktop_config.json hinzu:

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

Continue.dev-Konfiguration

Fügen Sie dies in der Datei config.json hinzu:

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

Dienst starten

STDIO-Modus (empfohlen für Desktop-Clients)

uv run python main.py

SSE-Modus (für Netzwerkverbindungen)

uv run python main.py --sse

Konfigurationshinweise

Umgebungsvariablen-Konfiguration

Verfügbare Tools

1. convert_mermaid_to_image

Konvertiert Mermaid-Diagrammcode in Bilddateien verschiedener Formate

Parameter:

• mermaid_code (string): Mermaid-Diagrammcode

• output_format (string, optional): Ausgabeformat, unterstützt png, jpg, svg, pdf, Standard ist "png"

• theme (string, optional): Designstil, unterstützt default, dark, neutral, forest, Standard ist "default"

• background_color (string, optional): Hintergrundfarbe, Hexadezimalcode

• width (number, optional): Bildbreite (Pixel)

• height (number, optional): Bildhöhe (Pixel)

Unterstützte Ausgabeformate: PNG, JPG, SVG, PDF

2. validate_mermaid_syntax

Überprüft die syntaktische Korrektheit des Mermaid-Diagrammcodes

Parameter:

• mermaid_code (string): Der zu validierende Mermaid-Diagrammcode

Rückgabeergebnisse:

• valid (boolean): Ob die Validierung erfolgreich war

• error_message (string): Fehlermeldung (falls die Validierung fehlschlägt)

3. get_supported_options

Ruft die vom Konverter unterstützten Optionen ab

Rückgabeergebnisse:

• themes (array): Liste der unterstützten Designs

• formats (array): Liste der unterstützten Formate

Unterstützte Diagrammtypen

• Flussdiagramm (Flowchart): Zur Darstellung von Abläufen und Algorithmen

• Sequenzdiagramm (Sequence Diagram): Zur Darstellung von Interaktionen zwischen Objekten

• Gantt-Diagramm (Gantt Chart): Für das Projektfortschrittsmanagement

• Kreisdiagramm (Pie Chart): Zur Darstellung von Datenanteilen

• Git-Diagramm (Git Graph): Zur Darstellung der Git-Commit-Historie

• Mindmap: Zur Darstellung von Wissensstrukturen

• Klassendiagramm (Class Diagram): Zur Darstellung von Klassenstrukturen

Anwendungsbeispiele

Beispiel für ein Flussdiagramm

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

Beispiel für ein Sequenzdiagramm

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

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

Beispiel für Syntaxvalidierung

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

Ressourcenbeispiele

Diagrammbeispiele abrufen

Diagrammbeispiele verschiedener Typen können über die folgenden Ressourcen-URIs abgerufen werden:

• mermaid://examples/flowchart - Beispiel für ein Flussdiagramm

• mermaid://examples/sequence - Beispiel für ein Sequenzdiagramm

• mermaid://examples/gantt - Beispiel für ein Gantt-Diagramm

• mermaid://examples/pie - Beispiel für ein Kreisdiagramm

• mermaid://examples/gitgraph - Beispiel für ein Git-Diagramm

• mermaid://examples/mindmap - Beispiel für eine Mindmap

• mermaid://examples/class - Beispiel für ein Klassendiagramm

Projektstruktur

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

Entwicklungsleitfaden

Lokale Entwicklung

# 克隆仓库
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

Debug-Modus

Aktivieren der detaillierten Protokollausgabe:

export LOG_LEVEL=DEBUG
uv run python main.py

Häufig gestellte Fragen (FAQ)

A:

1. Überprüfen Sie die Netzwerkverbindung und die Firewall-Einstellungen

2. Stellen Sie sicher, dass die mermaid.ink API erreichbar ist

3. Überprüfen Sie die Proxy-Einstellungen

A:

1. Verwenden Sie das Tool validate_mermaid_syntax, um die Syntax zu überprüfen

2. Konsultieren Sie die offizielle Mermaid-Dokumentation

3. Verwenden Sie den Code aus den Beispielressourcen

A:

1. Vereinfachen Sie den Diagramminhalt

2. Teilen Sie es in mehrere kleine Diagramme auf

3. Passen Sie die Bildgrößenparameter an

A:

1. Installieren Sie den uv-Paketmanager: curl -LsSf https://astral.sh/uv/install.sh | sh

2. Oder verwenden Sie die globale Paketinstallation mit pip

3. Überprüfen Sie die PATH-Umgebungsvariable

A:

1. Stellen Sie sicher, dass der Dienst im SSE-Modus gestartet wurde

2. Überprüfen Sie, ob Port 8003 belegt ist

3. Stellen Sie sicher, dass die URL-Konfiguration korrekt ist

A:

1. Erhöhen Sie die Bildgrößenparameter

2. Wählen Sie ein geeignetes Design

3. Optimieren Sie die Struktur des Mermaid-Codes

A:

1. Überprüfen Sie die Geschwindigkeit der Netzwerkverbindung

2. Erhöhen Sie die Umgebungsvariable REQUEST_TIMEOUT

3. Vereinfachen Sie die Komplexität des Diagramms

A:

1. Stellen Sie sicher, dass der Name des Designs korrekt geschrieben ist

2. Überprüfen Sie, ob das Design unterstützt wird

3. Versuchen Sie es mit einem anderen Designnamen

A:

1. Verwenden Sie den Parameter background_color

2. Das Format ist ein hexadezimaler Farbcode (z. B. #FFFFFF)

3. Wird nur von einigen Ausgabeformaten unterstützt

Technische Austauschgruppe

Treten Sie gerne unserer technischen Austauschgruppe bei, um Ihre Erfahrungen und Feedback-Vorschläge zu teilen:

👁 WeChat-Bild_20260501235133_120_6

Kontakt zum Autor

• WeChat: laohaibao2025

• E-Mail: 75271002@qq.com

👁 WeChat-QR-Code

Spenden

Wenn dieses Projekt für Sie hilfreich ist, laden Sie mich gerne auf einen Kaffee ein ☕

WeChat Pay

👁 WeChat Pay

Star History

Wenn Ihnen das Projekt gefällt, geben Sie uns gerne einen Star ⭐

👁 Star History Chart

Lizenz

MIT-Lizenz

Änderungsprotokoll

v0.1.0 (Aktuelle Version)

• ✅ Erstveröffentlichung

• ✅ Unterstützung für die Ausgabe in mehreren Formaten (PNG, JPG, SVG, PDF)

• ✅ Integration von vier Designstilen (default, dark, neutral, forest)

• ✅ Bereitstellung von Syntaxvalidierung und Beispielressourcen

• ✅ Unterstützung für STDIO- und SSE-Dualmodus-Kommunikation

v0.0.3 (2025-07-21)

• ✅ Erstveröffentlichung

• ✅ Unterstützung für die Konvertierung von Diagrammen in mehreren Formaten

• ✅ Syntaxvalidierungsfunktion

• ✅ Beispielressourcenfunktion

Beitragende

Wir freuen uns über Issues und Pull Requests, um dieses Projekt zu verbessern!

1. Forken Sie dieses Repository

2. Erstellen Sie einen Feature-Branch: git checkout -b feature/amazing-feature

3. Committen Sie Ihre Änderungen: git commit -m 'Add amazing feature'

4. Pushen Sie den Branch: git push origin feature/amazing-feature

5. Erstellen Sie einen Pull Request

Hinweise

• Die Diagrammerstellung kann einige Sekunden dauern, bitte haben Sie etwas Geduld

• Stellen Sie sicher, dass die Netzwerkverbindung normal ist, da der Dienst von der Online-API mermaid.ink abhängt

• Die generierten Bilddaten werden im base64-Format zurückgegeben

• Komplexe Diagramme können eine längere Erstellungszeit erfordern

Viel Spaß beim Erstellen schöner Diagramme mit Mermaid! 🎨✨

Maintenance

Resources

• GitHub Repository
Need Help?
• Reddit Discussion
Related Servers

Tools

• convert_mermaid_to_imageA
• get_supported_optionsA
• validate_mermaid_syntaxB