PolarHub
  • Agents
  • MCP Servers
  • Skills
  • PolarBear
PolarHub © 2026
MCP Serversdeveloper-toolsMermaid-MCP 服务器
返回「developer-tools」

Mermaid-MCP 服务器

modelscope·@peng-shawn/mermaid-mcp-server

developer-tools0下载LocalModelScope

简介

一个将Mermaid图表转换为PNG图像的模型上下文协议(MCP)服务器。

MCP Server 详情

来自 ModelScope 索引

Mermaid MCP 服务器

一个模型上下文协议 (MCP) 服务器,可以将 Mermaid 图表转换为 PNG 图像。此服务器允许 AI 助手和其他应用程序使用 Mermaid markdown 语法从文本描述生成可视化图表。

功能

  • 将 Mermaid 图表代码转换为 PNG 图像
  • 支持多种图表主题(默认、森林、暗色、中性)
  • 可自定义背景颜色
  • 使用 Puppeteer 进行高质量的无头浏览器渲染
  • 实现 MCP 协议,以便与 AI 助手无缝集成
  • 灵活的输出选项:直接返回图像或保存到磁盘
  • 带有详细错误信息的错误处理

工作原理

服务器使用 Puppeteer 启动无头浏览器,将 Mermaid 图表渲染为 SVG,并截取渲染图表的屏幕截图。过程包括:

  1. 启动无头浏览器实例
  2. 创建包含 Mermaid 代码的 HTML 模板
  3. 加载 Mermaid.js 库
  4. 将图表渲染为 SVG
  5. 将渲染的 SVG 截图作为 PNG
  6. 直接返回图像或将图像保存到磁盘

构建

npx tsc

使用

与 Claude 桌面版一起使用

"mcpServers": {
  "mermaid": {
    "command": "npx",
    "args": [
      npx @peng-shawn/mermaid-mcp-server
    ]
  }
}

与 Cursor 和 Cline 一起使用

env CONTENT_IMAGE_SUPPORTED=false npx @peng-shawn/mermaid-mcp-server

你可以在 ./diagrams 下找到一系列 Mermaid 图表,这些图表是使用 Cursor 代理通过提示 "generate mermaid diagrams and save them in a separate diagrams folder explaining how renderMermaidPng work" 生成并保存的。

使用检查器运行

使用检查器运行服务器以进行测试和调试:

npx @modelcontextprotocol/inspector node dist/index.js

服务器将启动并在 stdio 上监听 MCP 协议消息。

了解更多关于检查器的信息,请访问这里。

通过 Smithery 安装

要通过 Smithery 自动安装 Claude Desktop 的 Mermaid 图表生成器:

npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude

Docker 和 Smithery 环境

在 Docker 容器(包括通过 Smithery)中运行时,你可能需要处理 Chrome 依赖项:

  1. 服务器现在默认尝试使用 Puppeteer 的捆绑浏览器

  2. 如果遇到浏览器相关的错误,你有两个选择:

    选项 1:在构建 Docker 镜像期间:

    • 在安装 Puppeteer 时设置 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
    • 在你的 Docker 容器中安装 Chrome/Chromium
    • 在运行时设置 PUPPETEER_EXECUTABLE_PATH 指向 Chrome 安装路径

    选项 2:使用 Puppeteer 的捆绑 Chrome:

    • 确保你的 Docker 容器具有 Chrome 所需的依赖项
    • 不需要设置 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
    • 代码将自动使用捆绑浏览器

对于 Smithery 用户,最新版本应该无需额外配置即可工作。

API

服务器公开了一个工具:

  • generate: 将 Mermaid 图表代码转换为 PNG 图像
    • 参数:
      • code: 要渲染的 Mermaid 图表代码
      • theme: (可选)图表的主题。选项:"default"、"forest"、"dark"、"neutral"
      • backgroundColor: (可选)图表的背景颜色,例如 'white'、'transparent'、'#F0F0F0'
      • name: 生成文件的名称(当 CONTENT_IMAGE_SUPPORTED=false 时必需)
      • folder: 保存图像的绝对路径(当 CONTENT_IMAGE_SUPPORTED=false 时必需)

generate 工具的行为取决于 CONTENT_IMAGE_SUPPORTED 环境变量:

  • 当 CONTENT_IMAGE_SUPPORTED=true(默认):工具直接在响应中返回图像
  • 当 CONTENT_IMAGE_SUPPORTED=false:工具将图像保存到指定文件夹,并返回文件路径

环境变量

  • CONTENT_IMAGE_SUPPORTED: 控制图像是直接在响应中返回还是保存到磁盘
    • true(默认):图像直接在响应中返回
    • false:图像保存到磁盘,需要 name 和 folder 参数

示例

基本用法

// Generate a flowchart with default settings
{
  "code": "flowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    B -->|No| D[End]"
}

使用主题和背景颜色

// Generate a sequence diagram with forest theme and light gray background
{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

保存到磁盘(当 CONTENT_IMAGE_SUPPORTED=false 时)

// Generate a class diagram and save it to disk
{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}

常见问题

Claude 桌面版不是已经通过 canvas 支持 mermaid 了吗?

是的,但它不支持 theme 和 backgroundColor 选项。此外,拥有一个专用服务器使得使用不同的 MCP 客户端创建 mermaid 图表变得更加容易。

为什么在与 Cursor 一起使用时需要指定 CONTENT_IMAGE_SUPPORTED=false?

Cursor 还不支持在响应中内联图像。

发布

此项目使用 GitHub Actions 自动化发布过程到 npm。

方法 1:使用发布脚本(推荐)

  1. 确保所有更改都已提交并推送
  2. 使用特定版本号或语义版本增量运行发布脚本:
    # 使用特定版本号
    npm run release 0.1.4
    
    # 使用语义版本增量
    npm run release patch  # 增加补丁版本(例如,0.1.3 → 0.1.4)
    npm run release minor  # 增加次要版本(例如,0.1.3 → 0.2.0)
    npm run release major  # 增加主版本(例如,0.1.3 → 1.0.0)
    
  3. 脚本将执行以下操作:
    • 验证版本格式或语义增量
    • 检查是否位于主分支
    • 检测并警告文件之间的版本不匹配
    • 一致更新所有版本引用(package.json、package-lock.json 和 index.ts)
    • 创建包含所有版本更改的单个提交
    • 创建并推送 git 标签
    • GitHub 工作流将自动构建并发布到 npm

方法 2:手动过程

  1. 更新你的代码并提交更改
  2. 创建并推送带有版本号的新标签:
    git tag v0.1.4  # 使用适当的版本号
    git push origin v0.1.4
    
  3. GitHub 工作流将自动:
    • 构建项目
    • 根据标签中的版本号发布到 npm

注意:你需要在你的 GitHub 仓库设置中配置 NPM_TOKEN 密钥。为此,请执行以下步骤:

  1. 生成具有发布权限的 npm 访问令牌
  2. 转到你的 GitHub 仓库 → 设置 → 密码和变量 → 操作
  3. 创建一个名为 NPM_TOKEN 的新仓库密钥,其值为你的 npm 令牌

徽章

smithery 徽章

<a href="https://glama.ai/mcp/servers/lzjlbitkzr"> <img width="380" height="200" src="https://glama.ai/mcp/servers/lzjlbitkzr/badge" alt="mermaid-mcp-server MCP 服务器" /> </a>

许可证

MIT

相关 MCP Servers(来自「developer-tools」)

【稳定版】12306MCP火车票服务

一个为大型语言模型(LLM)设计的、高可用的12306余票查询工具服务,现已搭载智能会话管理引擎。 12306-MCP-Server 将复杂的12306余票查询接口封装为符合 Model Context Protocol (MCP) 规范的工具集,允许AI Agent通过自然语言无缝查询实时火车票、中转换乘和经停站信息。 从 v1.0.0 版本开始,项目引入了全新的智能会话管理系统,通过会话池、动态User-Agent轮换和自动错误恢复机制,将服务的稳定性与反屏蔽能力提升至全新高度。

Alphar/Railway-Real-Time-MCP-Server

阿里云可观测 MCP 服务

阿里云可观测 MCP服务,提供了一系列访问阿里云可观测各产品的工具能力,覆盖产品包含阿里云日志服务SLS、阿里云应用实时监控服务ARMS、阿里云云监控等,任意支持 MCP 协议的智能体助手都可快速接入。

@aliyun/alibabacloud-observability-mcp-server

北大法宝法条识别—法律MCP

自动从文本中识别并提取法律条文,例如在合同、案件描述或法律文书中,精准定位涉及的具体法律条文(如“《民法典》第585条”),并将文本中的法律问题与对应法条内容关联,提取法规名称的服务。

@pkulaw-ai/mcp_server_law_recognition

哔哩哔哩API服务器

用于哔哩哔哩API的MCP服务器,支持视频搜索、用户内容获取等多种操作,适用于哔哩哔哩内容管理和数据分析场景。

myalone/bilibili

菜谱

看起来您想要翻译一份英文技术文档,但您提供的内容中只有"asd"这个字符串,并没有实际的文档内容。请提供需要翻译的具体英文技术文档文本,这样我才能帮助您进行准确的翻译。如果有特定部分或格式要求,请一并告知。

lcd18601611267/whateat

串口智控

一座通过串行通信将物理硬件设备与人工智能大语言模型连接起来的桥梁,允许用户使用自然语言命令控制硬件。

@mcp2everything/mcp2serial

自动安装

点击按钮会唤起 PolarBear 客户端,并把当前 MCP Server 的 Markdown 详情文档地址传给客户端。

/api/mcps/peng-shawn-mermaid-mcp-server/markdown
打开 PolarBear 安装查看 Markdown 文档

手动安装

在 PolarBear 或其他支持 MCP 的客户端中,新建 MCP Server,并参考下方来源或安装提示配置。

npx tsc

基本信息

分类
developer-tools / image-and-video-processing
运行方式
No
许可证
MIT License
详情文件
peng-shawn-mermaid-mcp-server.md