SuperAPI AI 工具集

utility-mermaid-diagrams

办公与效率

查看项目

更新于 10-15 14:46

技能介绍

用途

该技能面向产品经理,帮助其为产品文档创建有效且语法有效的 Mermaid 图表。适用场景包括:为 PRD、规格说明、路线图或利益相关者演示创建 Mermaid 图表;从 15 种图表类型中选择适合特定沟通需求的一种;调试无法渲染或渲染错误的 Mermaid 代码;审查图表的清晰度、准确性和可访问性。

不适用场景:将图表导出为图片文件(PNG/SVG),这属于渲染工具的职责;使用非 Mermaid 的绘图工具(Figma、Lucidchart、draw.io);创建没有信息目的的纯装饰性视觉内容;生成完整的客户旅程制品(阶段、触点、情绪曲线、痛点),而非独立图表——此时应使用 discover-journey-map,该技能会在其时间线或流程图部分组合使用本技能。

核心原则

不要用图表表达列表能说清的内容。图表只有在揭示列表或表格会压平的关系、分支或流程时才有价值。创建任何图表前先问:这是否展示了列表或表格会压平的分支、关系或流程?是则使用图表;否则改用编号列表、项目符号列表或表格。一个 5 步线性流程是列表;一个带两个决策点和一个重试循环的 5 步流程才是图表。

主要能力

  • 图表选择指南:按沟通需求映射图表类型,例如决策或审批流程用 Flowchart(也可考虑 State);多服务或多方交互用 Sequence(也可考虑 Flowchart);功能生命周期或状态转换用 State(也可考虑 Flowchart);工作阶段或流水线状态用 Kanban(也可考虑 State);带依赖的发布或冲刺时间线用 Gantt(也可考虑 Timeline);版本历史或时间顺序里程碑用 Timeline(也可考虑 Gantt);二维优先级(投入/影响、风险/价值)用 Quadrant;分配分解或构成用 Pie(也可考虑 Treemap);问题分解或头脑风暴用 Mindmap;领域模型或数据关系用 ER(也可考虑 Class);API 或对象契约用 Class(也可考虑 ER);系统拓扑或基础设施用 Architecture(也可考虑 Flowchart);流量或预算分配用 Sankey(也可考虑 Pie);层级比例数据用 Treemap(也可考虑 Pie);趋势或时间序列指标用 XY-Chart。
  • 语法有效性原则:六条规则可防止大多数渲染失败——含空格、括号、方括号、冒号、逗号或保留字的标签必须用双引号引用;具有 Mermaid 或 Markdown 含义的特殊字符(>、<、行首的 -、#)需要转义或引用;先声明后引用,在边中使用节点前先定义它,引用未声明节点在某些类型中会导致静默失败;遵守限制,每种图表类型都有最大节点/参与者数量,超过后可读性会崩溃;用 %% 注释记录非显而易见的意图(为何选择此布局方向、为何这样分组);发布前测试,粘贴到 Mermaid 渲染器(mermaid.live、VS Code 预览或目标环境)并验证渲染正确。
  • 操作步骤:识别要沟通的内容(需要可见的关系、流程、层级或比例是什么,受众是谁);应用核心原则(确认图表比列表或表格更有价值);选择图表类型(使用选择指南、按任务浏览 references/pm-use-cases.md 或按类型浏览 references/diagram-catalog.md);规划图表(填写 references/TEMPLATE.md 中的规划工作表:目的、受众、节点清单、类型理由);编写 Mermaid 代码(遵循 references/syntax-guide.md 规则,从 references/diagram-catalog.md 的最小语法示例开始扩展);验证(运行质量检查清单);嵌入(将验证过的 Mermaid 代码块放入文档)。
  • 输出契约:规划制品为填写完成的图表规划工作表(references/TEMPLATE.md);最终输出为嵌入目标文档的语法有效 Mermaid 代码块;质量门为质量检查清单全部通过。
  • 质量检查清单:图表在目标环境中无错误渲染;满足核心原则,列表或表格无法更清晰地传达;没有无分支、关系或层级的线性序列;所有含空格或特殊字符的标签已正确引用;特殊字符在需要处已转义;节点/参与者数量在类型特定限制内;颜色可访问(WCAG AA 最低 3:1 对比度,浅色背景上黑色文字);颜色从不是唯一区分因素,形状和标签也区分元素;图表有描述性标题或周围文字上下文;%% 注释记录了任何非显而易见的布局或分组选择。

使用方式

按上述操作步骤执行,并参考以下文件:references/TEMPLATE.md 为图表规划工作表,编写 Mermaid 代码前填写;references/EXAMPLE.md 为完整示例,展示产品经理为产品发布创建 4 个图表;references/diagram-catalog.md 涵盖全部 15 种图表类型的语法、产品经理示例、限制和陷阱;references/pm-use-cases.md 提供产品经理任务到图表类型的映射及小型完整示例;references/syntax-guide.md 提供完整的语法有效性规则、转义、样式和验证清单。

适用场景

产品经理在 PRD、规格说明、路线图或利益相关者演示中需要图表时;需要在多种图表类型间做选择时;需要调试 Mermaid 渲染问题时;需要审查图表清晰度、准确性和可访问性时。

限制

不负责将图表导出为图片文件;不涉及非 Mermaid 绘图工具;不用于纯装饰性视觉;不生成完整客户旅程制品。每种图表类型有最大节点/参与者数量限制,超过后可读性会崩溃。具体限制数值需查阅 references/diagram-catalog.md。