AI导哈

Mermaid SVG生成服务

一个简化的Mermaid图表SVG生成服务器，专注于从Mermaid语法生成SVG文件，支持主题定制、背景颜色调整和自定义CSS样式。

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

使用说明

Mermaid SVG MCP服务器

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

特性

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

安装

来自npm（推荐）

npm install -g mermaid-svg-mcp

来源

git clone <repository-url>
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样式 <style> 用于对图表外观进行细粒度控制的块
  • svgDefs （可选）：将原始SVG标记注入到 <defs> 块——用于渐变、图案、过滤器、标记等。参考它们 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": "<linearGradient id=\"borderGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#ff6347\"/><stop offset=\"100%\" stop-color=\"#4CAF50\"/></linearGradient>",
  "customCSS": ".node rect, .node polygon { stroke: url(#borderGrad); stroke-width: 3px; }"
}

退货：

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

常见CSS选择器

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

选择器 目标
.node rect 流程图节点背景
.node circle 圆形节点
.node polygon 钻石/决策节点
.label 节点标签文本
.edgeLabel 边缘/箭头上的文字
.edgePath path 边缘/箭头线
.cluster rect 子图背景
.messageText 序列图消息
.taskText 甘特图任务标签
.entityBox ER图实体框

支持的图表类型

支持所有标准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输出
  • 简单参数界面
  • 可靠的渲染
  • 最小依赖性

许可证

麻省理工学院

相关 MCP