MCP Catalogs
← 首页claude-mermaid screenshot

claude-mermaid

by veelenga·★ 146·综合分 50

用于渲染 Mermaid 图表的 MCP 服务器，支持实时预览和导出功能。

developer-toolsproductivityother
18
Forks
0
活跃 Issue
本月
最近提交
2 天前
收录于

概述

Claude Mermaid MCP Server 是一个专门用于在 Claude Code 中创建和可视化 Mermaid 图表的工具。它提供实时预览功能，让用户能够看到图表随更改自动更新。该服务器支持多种导出格式（SVG、PNG、PDF）、多种主题，并提供交互式预览控制，包括平移、缩放和重置功能。此外，它还包含一个内置技能，提供图表创建最佳实践的专家指导。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

你:在开发规划会议期间实时创建和迭代优化架构图
你:生成随文档更改自动更新的文档流程图
你:为系统设计生成序列图并通过可导出格式分享
你:除了 Claude Code，我还能在其他 MCP 客户端上使用这个工具吗？
你:所有导出格式都支持实时预览吗？

什么时候选它

当你需要创建、编辑和迭代 Mermaid 图表，并需要实时预览功能时选择它，特别是如果你已经在使用 Claude Code。

什么时候不要选它

如果你需要 Mermaid 不支持的图表功能，或者在无法安装命令行工具的环境中工作，请不要选择它。

此 server 暴露的工具

从 README 抽取出 2 个工具
  • mermaid_previewdiagram: string, preview_id: string, format: string = 'svg', theme: string = 'default', background: string = 'white', width: number = 800, height: number = 600, scale: number = 2

    Render and open a live preview of a Mermaid diagram

  • mermaid_savesave_path: string, preview_id: string, format: string = 'svg'

    Save the current live diagram to a specified path

可对比工具

mermaid-cliplantuml-mcpdiagrams-api

安装

安装

**插件安装（推荐）**

在 Claude Code 中，添加市场并安装插件：

/plugin marketplace add veelenga/claude-mermaid
/plugin install claude-mermaid@claude-mermaid

然后重启 Claude Code 以激活插件。

**通过 npm 安装：**

npm install -g claude-mermaid

**对于 Claude Desktop**（如果不使用 Claude Code）：

添加到您的 Claude Desktop 配置中：

{
  "mcpServers": {
    "mermaid": {
      "command": "claude-mermaid"
    }
  }
}

FAQ

除了 Claude Code，我还能在其他 MCP 客户端上使用这个工具吗？
是的，该服务器兼容任何 MCP 兼容客户端，包括 Codex、Cursor、带 Cline 扩展的 VSCode、Windsurf 和 Gemini CLI。README 中提供了每个客户端的配置说明。
所有导出格式都支持实时预览吗？
实时预览仅适用于 SVG 格式。PNG 和 PDF 格式无法进行实时预览，但可以从预览中保存。

claude-mermaid 对比

claude-mermaid vs mcp-server-chartclaude-mermaid vs everythingclaude-mermaid vs filesystemclaude-mermaid vs timeclaude-mermaid vs memory
GitHub →

最后更新于 · 由 README + GitHub 公开数据自动生成。