用途
Mermaid Visualizer 用于把文字内容转换为专业的 Mermaid 图表，适合演示与文档场景。当用户明确提到 Mermaid 时应当使用该技能；在需要把步骤、概念关系、架构或交互整理成图表时也建议使用。它强调依内容与交付位置自动选用合适的图表类型，使用者不必记住 skill 名称。若用户明确指定其他图表格式，则尊重其指定。
在 HTML Artifact 中，会先沿用既有的 HTML、CSS、SVG 或图表工具；只有当 Mermaid 符合整份交付物的需求时才使用，不会因为出现「流程图」一词就强制切换。
主要能力
该技能可根据内容选择图表类型：
- 步骤、决策、工作流程：Flowchart，方向为 TB 或 LR。
- 循环与回馈：Flowchart 加回馈连线，但不保证自动排成圆形。
- 方案比较：平行分组或对照流程。
- 概念阶层：Mindmap。
- 元件间随时间的讯息互动：Sequence diagram。
- 状态与转换：State diagram。
需要分组、回馈回圈或中心节点范例时，可参考完整图例。配色或设计选项可参考设计参考，但其中选项不是通用 API 参数。
使用方式
工作流程如下：
- 理解概念、关系、顺序与图表用途，确认呈现位置及可用的 Mermaid 版本。
- 依内容选择图表类型。
- 套用使用者指定的方向、细节与风格；未指定时以 TB、适中细节为起点，依画面调整。
- 产生 Mermaid 程式码，遵守易错规则。特殊标点、换行、subgraph、样式或解析错误，先参考语法与排错对应段落。
- 执行验收，修正受影响的图。Markdown 使用 mermaid code fence；HTML 依既有整合方式嵌入。
- 交付图表及必要说明，指出实际验证的工具与尚未确认的相容性。
易错规则包括：节点与 subgraph 使用明确 ID，显示名称另外设定，例如 subgraph core["Core Process"]，连线引用 ID；含特殊标点的标签先用引号包住并正确编码，保留原文意思；若目标工具出现 Unsupported markdown: list，检查编号标签与 Markdown 字串的处理方式，再改成可解析且不改意思的写法；换行、HTML 标签与样式支援依实际版本及设定验证；Mermaid 注解用独立一行的 %%；--> 是实线箭头，-.-> 是虚线箭头，==> 是粗箭头，~~~ 是不可见的布局连线；使用一致配色及清楚标签，不使用 Emoji，也可采用目标工具的预设样式。
适用场景
适合把步骤、概念关系、架构或交互整理成 Mermaid 图，用于演示与文档。也适合在 HTML Artifact 中，当 Mermaid 符合整份交付物需求时嵌入图表。
限制
验收要求在目标渲染工具或相同版本的环境中解析并实际查看画面，检查节点、分组、连线与标签是否符合原意；解析通过不能代替画面验证。涉及交互时需实际操作，修正后重新检查受影响部分。若只能在其他版本或工具中验证，需明说差异；无法渲染时回报未验证，不宣称已相容所有平台。关于收费、价格、平台等资讯，资料中暂未提供。