AI导哈

图表渲染服务

Mermaid MCP Pro 是一款高性能的模型上下文协议服务器，专注于将文本转换为复杂的图表，支持本地和云环境部署。

  • by gr3p1p3
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 gr3p1p3/mermaid-mcp

使用说明

🧜‍♂️ 美人鱼MCP Pro

模型上下文协议的企业级可视化上下文层

美人鱼MCP Pro 是一个高性能的模型上下文协议（MCP）服务器，旨在弥合LLM推理和专业可视化文档之间的差距。它使人工智能模型能够直接在聊天界面内或作为分布式云架构的一部分生成、设计和渲染复杂的图表。

与标准渲染器不同，此服务器具有 双运输引擎，允许在本地开发和可扩展的生产环境之间无缝切换。

⚡ 关键价值主张

  • 🌐 通用传输架构：本地支持 stdio （像Claude这样的本地桌面客户端）， SSE （服务器发送事件）用于持久web连接，以及 无状态HTTP (/mcp)用于无服务器/云原生部署。
  • 🎨 企业品牌引擎：超越默认主题。注入 自定义CSS，企业调色板和品牌兼容排版直接进入渲染管道。
  • 🐳 基础设施不可知：一个完全容器化的基于Chromium的渲染引擎（通过Puppeteer）。没有本地 mermaid-cli 或主机上所需的Node.js依赖关系。
  • 🛠 生产就绪：内置支持水印、自定义徽标和高保真导出（PNG、JPEG、SVG）的动态分辨率缩放。

🐳 Docker快速入门

1.克隆和构建

git clone https://github.com/gr3p1p3/mermaid-mcp.git
cd mermaid-mcp
docker build -t mermaid-mcp .

2.跑步

docker run -d \
  -p 3000:3000 \
  -e PORT=3000 \
  -e MCP_TRANSPORT=sse \
  --name mermaid-server \
  mermaid-mcp

3.验证它是否正在运行

curl http://localhost:3000/health

✅ 退货 200 OK 当渲染引擎准备就绪时。

🚀 架构概述

服务器充当LLM文本输出和无头渲染上下文之间的复杂桥梁：

$$\text｛LLM（美人鱼语法）｝\xlightarrow｛\text｛MCP工具调用｝\text｛服务器（木偶）｝\xrightarrow｛/text｛CSS注入｝\text{图像伪影｝$$

功能概览：

特性 描述
动态渲染 实时将美人鱼字符串转换为视觉资产。
双模 在以下选项之间切换 stdio 为了隐私和 HTTP/SSE 为了提高可扩展性。
主题化 支持 dark, default, forest, neutral，以及 base.
品牌化 自动为内部文档注入徽标和水印。
零配置 预先配置的Docker镜像，用于即时部署。

🖼️ 真实世界渲染示例

此图由实时生成 Mermaid MCP Pro服务器它展示了自定义主题应用程序和高保真输出的潜力。

🛠 工具： generate_diagram

此服务器提供了一个强大的工具来生成图表。

参数

参数 类型 默认值 描述
definition string 必需的 原始Mermaid语法（例如。， graph TD; A-->B).没有标记块。
format enum "png" 输出格式： png, jpg，或 svg.
theme enum "default" 视觉主题： default, dark, forest，或 neutral.
width number 800 图像宽度（像素）（适用于PNG/JPG）。
css string empty 可选的原始CSS注入到图表中。使用它来覆盖字体、颜色或元素样式（例如。， rect { fill: red; }).

⚙️ 配置

服务器行为通过环境变量进行控制。

变量 描述 默认值
PORT 服务器监听的端口 3000
MCP_TRANSPORT 要使用的传输层(sse 或 stdio). stdio
LOGO_URL 嵌入在每个图表右下角的徽标图像的公共URL。 （残疾）
WATERMARK 文本在每个图表的中心呈现为对角线水印。 （残疾）

注： 即使 MCP_TRANSPORT 设置为 sse无国籍者 /mcp 端点对直接HTTP POST请求保持活动状态。

🖼 品牌：徽标和水印

您可以通过设置以下一个或两个环境变量来标记每个生成的图表。这两个特征是 选择加入 --如果变量未设置或为空，则不会添加任何内容。

LOGO_URL

将其设置为任何PNG、JPG或SVG图像的公共URL。它将在 右下角 每张图的透明度为60%。

LOGO_URL=https://example.com/your-logo.png

WATERMARK

将其设置为任何文本字符串。它将沿对角线呈现 中心 每个图表都以大的半透明灰色字体显示。

WATERMARK="© My Company"

组合示例（Docker）

docker run -d \
  -p 3000:3000 \
  -e PORT=3000 \
  -e MCP_TRANSPORT=sse \
  -e LOGO_URL=https://example.com/logo.png \
  -e WATERMARK="Internal Use Only" \
  --name mermaid-server \
  mermaid-mcp

组合示例（Docker Compose）

services:
  mermaid-mcp:
    build: .
    ports:
      - "3000:3000"
    environment:
      - PORT=3000
      - MCP_TRANSPORT=sse
      - LOGO_URL=https://example.com/logo.png
      - WATERMARK=Internal Use Only
    restart: always

提示： 如果 LOGO_URL 如果无法访问，服务器会记录一条警告并正常继续——徽标嵌入会被优雅地跳过，而不会阻止图的生成。

📦 如何跑步

1.本地（Node.js）

要在您的计算机上直接运行服务器：

# Set variables and start the server
PORT=3000 MCP_TRANSPORT=sse npm start

品牌：

PORT=3000 MCP_TRANSPORT=sse LOGO_URL=https://example.com/logo.png WATERMARK="Draft" npm start

2.使用Docker（CLI）

使用注入环境变量 -e 标志：

# Build the image
docker build -t mermaid-mcp .

# Run the container
docker run -d \
  -p 3000:3000 \
  -e PORT=3000 \
  -e MCP_TRANSPORT=sse \
  --name mermaid-server \
  mermaid-mcp

3.使用Docker Compose

将此添加到您的 docker-compose.yml:

services:
  mermaid-mcp:
    build: .
    ports:
      - "3000:3000"
    environment:
      - PORT=3000
      - MCP_TRANSPORT=sse
    restart: always

4.检验员测试

npm run build && npx @modelcontextprotocol/inspector node dist/index.js

🔌 API和连通性

Mermaid MCP Pro旨在实现最大的灵活性。它提供了一个适应您的基础设施的多功能界面，无论是本地CLI还是云级集群。

端点 方法 描述 协议
/sse GET 握手：初始化持久EventSource流。 MCP（SSE）
/messages POST 指挥桥：将JSON-RPC有效载荷发送到活动会话。 MCP（SSE）
/mcp POST 无状态网关：单请求执行。非常适合无服务器。 HTTP
/health GET 存活探针：退货 200 OK 如果发动机准备就绪。 HTTP

🧠 实施说明

无状态HTTP模式(/mcp)

此端点允许在没有会话管理开销的情况下进行高并发渲染。非常适合：

  • CI/CD管道：在文档中自动生成图表。
  • Webhook集成：触发器从外部事件渲染。

健康检查和可靠性

这 /health 端点不仅检查服务器；它验证了 Chromium渲染引擎 状态。

  • 在你的 docker-compose.yml 或K8s livenessProbe 以确保零停机渲染。

📝 示例请求（无状态）

如果你想在没有MCP客户端的情况下测试服务器，你可以使用 curl:

curl -X POST http://localhost:3000/mcp \
-H "Content-Type: application/json" \
-d '{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "generate_diagram",
    "arguments": {
      "definition": "graph TD; Start --> Stop",
      "format": "png",
      "theme": "dark"
    }
  }
}'

相关 MCP