claude-mermaid
活跃·★ 150·MIT·更新于 2026-05-28
★ 时下流行★ 视觉/多模态★ 开发者工具
一个MCP服务器，用于在Claude Code中渲染Mermaid图表，提供实时重载功能和内置的专家指导技能。
Claude Mermaid是一个MCP服务器，用于在Claude Code中渲染Mermaid图表，提供实时重载和内置的AI技能以获取专家指导。它通过在浏览器中自动更新预览来简化迭代图表开发，从而优化图表修改流程。
#Mermaid#图表绘制#实时重载#AI助手#MCP服务器#代码编辑器插件#可视化
01
功能特性
01实时重载：编辑时图表在浏览器中自动刷新
02多种保存格式：导出为SVG、PNG或PDF
03内置技能：包含一个Claude技能，提供创建图表的最佳实践和专家指导
04交互式预览：通过拖动平移图表，使用浏览器控件缩放，一键重置位置
05多重预览：使用`preview_id`同时处理多个图表
02
兼容性
Claude Code
集成开发环境
已通过文档验证
Codex
MCP客户端
已通过文档验证
Cursor
MCP客户端
已通过文档验证
VSCode (with Cline Extension)
MCP客户端
已通过文档验证
Windsurf
MCP客户端
已通过文档验证
Gemini CLI
MCP客户端
已通过文档验证
03
快速开始
1
$ git clone https://github.com/veelenga/claude-mermaid.git
2
$ cd claude-mermaid
3
$ npm install
4
$ npm run build
5
$ npm install -g .
04
使用场景
↳通过实时反馈快速开发和优化Mermaid图表
↳将Mermaid图表绘制直接集成到Claude Code的工作流程中
↳生成并导出多种格式（SVG、PNG、PDF）的图表用于文档
↳利用AI指导获取图表创建的最佳实践
05
同类工具
相关搜索
评论
登录后发表评论
- SSasha Clark2026年4月26日
Good for developers who use Mermaid for technical diagrams in AI-assisted workflows.
- LLogan Nguyen2026年4月21日
Mermaid diagram preview via MCP lets Claude render and iterate on diagrams.
- OOaklyn Thompson2026年3月22日
Works reliably with standard Mermaid diagram syntax.
- CCasey Anderson2026年3月13日
Preview capability closes the feedback loop between diagram code and visual output.