关于 drawing-mermaid-diagrams
用于制作 Mermaid 图表的技能，关注图表在文档和开发环境中的清晰呈现。内容涵盖图表类型选择、渲染器兼容性、验证及常见语法问题。
主要功能
- 01按内容选择合适的图表类型
- 02考虑宿主 Mermaid 版本差异
- 03渲染图表以验证语法
- 04检查布局和标签可读性
- 05规避常见 Mermaid 解析问题
适用场景
- 01为 Markdown 文档制作图表
- 02为未知渲染器准备图表
- 03排查 Mermaid 渲染错误
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/drawing-mermaid-diagrams确认已加载。
附带文件agents/openai.yaml
详细介绍
Mermaid 图表
当图表能够无错误渲染，且布局清晰易读时，就算完成。
选择与内容相匹配的类型（流程、消息、架构、时间安排、层级结构等）；flowchart 并非适用于所有情况。
渲染器支持
- 每个宿主环境（GitHub、GitLab、文档站点、IDE 预览）都打包了自己的 Mermaid 版本，通常比最新版本旧。
-beta关键字（xychart-beta、sankey-beta、architecture-beta、block-beta）以及kanban等较新的类型可能无法正常运行。- 不确定目标渲染器时，优先使用核心类型，或询问图表将在哪种 渲染器中显示。
默认在图表关键字前使用 frontmatter config: 块。只有渲染器过旧、无法
读取 frontmatter 配置时，才改用首行的 %%{init: {...}}%% 指令。
通过渲染验证
将图表写入临时目录中的 <out>/diagram.mmd 并渲染：
npx -y @mermaid-js/[email protected] -i <out>/diagram.mmd -o <out>/diagram.png
对于 Markdown 文件，使用 -i doc.md -o <out>/doc.md 渲染其中的每个 Mermaid 代码块。
修复每个 Parse error on line N 或 Lexical error，然后再次渲染，直到成功。
如果布局很重要，请打开 PNG，检查方向、重叠和标签文本。之后再将代码放入目标位置。
如果 mmdc 找不到 Chrome，请将
{"executablePath": "<path to an installed Chrome or Chromium>"} 写入
<out>/puppeteer.json，并添加 -p <out>/puppeteer.json。如果 Node、网络或
浏览器不可用，请勿在未征求同意的情况下安装；请根据下方的注意事项检查图表，并告知用户图表尚未渲染。
CLI 渲染成功使用的是 CLI 随附的 Mermaid 版本，因此不能证明较旧的宿主环境也能渲染该图表。
注意事项
其中有些问题不会报解析错误，而是静默失败。
- 包含
()、[]、{}、:、;或#的标签要用"..."括起来；内部引号写作#quot;，<和>写作#lt;和#gt;。 - 如果流程图节点 ID 或裸标签是小写
end，解析就会出错；请使用End或["end"]。 - 如果链接后紧跟以
o或x开头的节点 ID（A---oB），它会静默变成圆形或交叉边；请添加空格或改用大写字母。 %%注释必须单独占一行；行尾注释会导致解析错误。- Block 图没有
==>或:::简写。 mindmap和kanban中的缩进具有语义。- 样式未生效：配置块必须放在最前面，
themeVariables需要搭配theme: base，frontmatter 中的十六进制颜色必须加引号（未加引号的#会被视为 YAML 注释，颜色也会被静默丢弃）。 - 在 CLI 中可以渲染，但在宿主环境中不行：宿主使用的 Mermaid 版本较旧；请替换
-beta或较新的类型，或将 frontmatter 配置改为%%{init}。