Mermaid Diagram Generator MCP服务器

支持主题与背景色定制的图表转PNG工具

安装使用

复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:

帮我安装这个 AI Skill:Mermaid Diagram Generator MCP服务器。
它的用途是:支持主题与背景色定制的图表转PNG工具
完整的 Skill 内容见:https://321skill.com/skills/mermaid-diagram-generator-mcp服务器/raw/index.md
请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。

提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。

使用示例

“请帮我生成一个展示微服务架构的流程图,使用dark主题和透明背景,导出为PNG。”,它会解析你的Mermaid代码,应用指定的主题和背景色,然后生成一个高清的PNG图片文件供你下载使用。或者,你可以直接粘贴一段Mermaid代码并说:“把这个图转成PNG,用forest主题。”

介绍

这个Skill解决了在AI对话中快速生成并导出专业图表的问题。传统上,在AI中绘制图表后,用户需要手动截图或复制代码到外部工具才能获得可用于文档的图片,过程繁琐且难以保证样式统一。

使用时,你只需在对话中提供Mermaid图表代码,并指定主题(如dark, forest, neutral)和背景色(如透明或十六进制颜色),该Skill便会生成对应的PNG图片文件。整个过程在AI对话中一气呵成,无需切换应用。

它非常适合需要频繁在技术文档、演示文稿或报告中插入架构图、流程图、时序图等可视化内容的工作者。无论是编写设计文档还是制作教学材料,都能显著提升效率。

建议在生成图表前,先构思好图表的逻辑结构。虽然该Skill支持主题定制,但复杂的图表布局和样式(如自定义节点形状、精细的线条样式)仍需遵循Mermaid语法本身的能力范围。

核心特点

与仅能生成Mermaid代码或预览图的同类工具相比,本Skill的核心区别在于能直接在AI对话中将代码渲染为可定制主题和背景色的PNG图片文件,实现了从代码到成品图片的“一键导出”。

注意事项

不适合需要生成超出Mermaid语法支持的复杂图表或需要高度交互式图表的场景。

常见问题

支持哪些Mermaid图表类型?

支持Mermaid官方语法定义的所有图表类型,如流程图、时序图、类图、状态图、甘特图等。

生成的PNG图片清晰度如何?

生成的PNG图片为高清输出,适合嵌入文档、演示文稿或网页,背景色和主题样式均可定制。

给 AI 助手的安装指引

如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:

请访问 https://321skill.com/skills/mermaid-diagram-generator-mcp服务器/raw/index.md 读取 Mermaid Diagram Generator MCP服务器 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。