Mermaid SVG MCP Server

Mermaid SVG MCP服务器

一个简化的模型上下文协议（MCP）服务器，从Mermaid图语法生成SVG文件。这是一个简化的版本，仅专注于SVG生成，没有多种导出格式的复杂性。

特性

• 单聚焦：仅生成SVG输出-不生成base64、PNG或文件输出
• 主题支持：支持5个内置美人鱼主题（默认、基础、森林、黑暗、中性）
• 背景颜色：图表的可定制背景颜色
• 自定义文件名：用于控制输出文件名的可选文件名参数
• 自定义CSS样式：将自定义CSS注入样式节点、边、标签等
• SVG Defs注入：通过添加自定义渐变、图案、过滤器和标记 `` 块
• 清洁API：简单、专注的工具界面
• 基于木偶：使用无头浏览器进行可靠渲染

安装

来自npm（推荐）

npm install -g mermaid-svg-mcp

来源

git clone 
cd mermaid-svg-mcp
npm install
npm run build

用法

作为MCP服务器

添加到MCP客户端配置中（通常在 mcp.json 或Claude桌面配置）：

使用npx（推荐-不需要全局安装）：

{
  "mcpServers": {
    "mermaid-svg": {
      "command": "npx",
      "args": ["-y", "mermaid-svg-mcp"]
    }
  }
}

使用全局安装：

{
  "mcpServers": {
    "mermaid-svg": {
      "command": "mermaid-svg-mcp"
    }
  }
}

使用本地开发版本：

{
  "mcpServers": {
    "mermaid-svg": {
      "command": "node",
      "args": ["/path/to/mermaid-svg-mcp/dist/index.js"]
    }
  }
}

工具接口

服务器提供了一个工具： generate_mermaid_svg

参数：

• mermaid （必填）：美人鱼图语法
• theme （可选）：主题名称-以下选项之一：默认、基础、森林、黑暗、中性
• backgroundColor （可选）：背景的CSS颜色值（默认值：“白色”）
• filename （可选）：SVG文件的自定义文件名（不带扩展名）
• customCSS （可选）：注入SVG的自定义CSS样式 `` 用于对图表外观进行细粒度控制的块
• svgDefs （可选）：将原始SVG标记注入到 ` 块——用于渐变、图案、过滤器、标记等。参考它们 customCSS 通过 url(#id)`

例子：

{
  "mermaid": "graph TD\\n    A[Start] --> B{Decision}\\n    B -->|Yes| C[Success]\\n    B -->|No| D[Try Again]\\n    D --> A",
  "theme": "dark",
  "backgroundColor": "#f0f0f0",
  "filename": "my-flowchart"
}

自定义CSS示例：

{
  "mermaid": "graph TD\\n    A[Start] --> B[End]",
  "customCSS": ".node rect { fill: #ff6347; stroke: #333; } .edgeLabel { font-size: 14px; font-weight: bold; }"
}

渐变边框示例（svgDefs+customCSS）：

{
  "mermaid": "graph TD\\n    A[Start] --> B{Decision}\\n    B -->|Yes| C[Success]\\n    B -->|No| D[Retry]",
  "svgDefs": "

",
  "customCSS": ".node rect, .node polygon { stroke: url(#borderGrad); stroke-width: 3px; }"
}

退货：

• 使用指定或自动生成的文件名将SVG文件保存到磁盘
• 返回带有文件路径的确认消息

常见CSS选择器

使用时 customCSS，这些选择器针对常见的Mermaid图元素：

支持的图表类型

支持所有标准Mermaid图类型：

• 流程图
• 顺序图
• 类图
• 状态图
• ER图
• 用户旅程
• 甘特图
• 饼图
• 还有更多。..

发展

npm run dev    # Run in development mode
npm run build  # Build for production
npm start      # Run built version

与原始MCP的比较

此简化版本删除了：

• 多种输出格式（base64、文件、URL生成）
• 文件系统操作
• 复杂的配置选项
• PNG渲染选项

并重点关注：

• 仅清理SVG输出
• 简单参数界面
• 可靠的渲染
• 最小依赖性

许可证

麻省理工学院