技能介绍

问题背景

在文档、设计评审和架构说明里，Mermaid 很常用，但手写语法容易在箭头、子图、节点 ID上踩坑；图一多，配色和布局也会各写各的，最后看起来像拼凑出来的草稿。若还要把 Markdown 里的多个 mermaid 代码块变成图片，往往还得单独搭渲染链路。

技能如何工作

Mermaid Pro 把「选型 → 生成 → 校验 → 导出」收成固定流程：先根据场景选图类型（flowchart、sequenceDiagram、classDiagram、erDiagram、C4Context、stateDiagram-v2、mindmap），再按 layout / detail / style 配置输出，并遵循统一的输出模板。

核心能力包括：

内置语法校验：在写入文件或出图之前必须跑校验；valid: false 时按常见错误表（如 markdown_conflict、curly_brace_in_text）修完再验。
九色语义配色：绿/红/紫等填充与描边成对定义，用 style NodeID fill:...,stroke:... 保持「输入/决策/过程/输出」语义一致。
布局引擎：默认 dagre；复杂图可在 frontmatter 里切 elk、elk.stress、elk.force，子图还可单独设 direction。
批量图片导出：在环境支持时，可把 Markdown 中的 Mermaid 块导出为 SVG/PNG（依赖 puppeteer 无头 Chrome）。

首次会话会做环境检查（Node.js ≥ 18，jsdom + mermaid 负责校验；导出能力取决于 puppeteer 是否可用）。

适用边界与注意点

校验是硬性步骤，不要跳过；节点文案避免 1. 列表冲突，花括号需引号或改写。
若仅 export: false，仍可生成并校验语法，但无法本地出图。
高级布局参数见技能附带的 layout.md、ERROR-PREVENTION.md 与各 diagrams/*.md，本技能偏「可交付的规范图」，不是通用绘图 IDE。