Agent Skills
返回列表
💻

Mermaid CLI 图表即代码渲染器

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/mermaid-cli-diagram-as-code-renderer。

技能介绍

要解决的问题

写技术文档的人都遇到过这种麻烦：图表每改一次，就得打开绘图工具手动改一次，改完重新导出、再替换，图和文档慢慢就不同步了。Git diff 里更尴尬——二进制图片被改动，review 的人根本看不出改了什么。

它是怎么工作的

这个技能的核心思路是"图表即代码"：用纯文本写图表定义，交给命令行渲染成图片。

  • 输入：.mmd 文本文件，里面是 Mermaid 的图定义语法
  • 输出：SVG、PNG、PDF 三种格式
  • 调用方式：mmdc -i input.mmd -o output.svg 一条命令完成转换

因为源文件是纯文本，图表可以被版本管理追踪，diff 里能清楚看到每条连线和每个节点的增删，CI 流水线里也能自动重新生成。

适用边界与注意点

  • 渲染能力取决于上游 Mermaid 库的语法支持，遇到复杂定制图表时要先确认语法是否被支持
  • 需要准备匹配的运行环境（Node.js 环境，或直接使用容器镜像）
  • 文本定义本身不保证布局美观，结构清晰的图才能渲染出好的效果

使用场景

  • 在编写技术文档时，需要将系统架构图、流程图以代码形式维护，避免二进制图片的版本管理问题
  • 需要将Mermaid语法的图表批量渲染为SVG或PDF，用于CI/CD流程中的自动生成
  • 在代码审查中，通过文本diff追踪图表变更，确保图表与文档同步更新
  • 需要为开源项目的README或设计文档生成可版本化的图表，方便社区协作修改

适合人员

  • 技术文档工程师：需要将图表源文件纳入Git版本管理，避免手动导出替换的重复劳动
  • DevOps工程师：需要在CI流水线中自动生成架构图，随代码更新实时反映系统变化
  • 开源项目维护者：需要将文档中的图表定义为纯文本，方便社区贡献者通过PR修改
  • 后端开发工程师：需要为API文档或部署流程生成可代码化管理的流程图