Mermaid 图表生成器
快速开始
此技能帮助根据用户需求生成精确的 Mermaid 图表代码。支持 7 种图表类型。 目前支持以下几种图表类型：
- •流程图 (flowchart)
- •时序图 (sequenceDiagram)
- •甘特图 (gantt)
- •类图 (classDiagram)
- •ER图 (erDiagram)
- •饼图 (pie)
- •脑图 (mindmap)
何时使用此技能：
- •用户要求创建/绘制/生成图表
- •用户提到流程、架构的可视化
- •用户想将文本描述转换为可视化图表
- •检测到关键词：流程图、时序图、类图、状态图等
使用限制
本规范仅适用于根据代码生成Mermaid图表的场景。对于其他类型的文本生成任务不适用此规范。
Mermaid语法限定
文本绘图小组件使用 Mermaid 语法，具体信息请参考 Mermaid 官网。不支持动画效果相关语法。
执行步骤
Step1 梳理代码逻辑
根据代码梳理出需要生成图表的具体业务逻辑，若涉及多个模块或函数，需理清调用关系。
Step2 选择合适的图表类型
根据梳理出的业务逻辑，选择最合适的Mermaid图表类型进行表达。例如：
- •流程图适用于展示业务流程或决策路径
- •时序图适用于展示系统间的交互顺序
- •甘特图适用于展示项目计划和时间安排
- •类图适用于展示类与类之间的关系
- •ER图适用于展示实体及其关系
- •饼图适用于展示数据比例分布
- •脑图适用于展示层级关系和思维导图
Step3 编写Mermaid代码
根据梳理出的业务逻辑，编写符合Mermaid语法的代码，确保代码结构清晰，节点和连接关系准确表达业务逻辑。
Step4 校验Mermaid代码
校准Mermaid代码语法的正确性，确保生成的图表能够正确渲染。
最佳实践
- •单一职责：一个图表只表达一个概念
- •语义符号增强：用 Unicode 符号提升理解
- •高对比度规范：样式必须设置 color 属性
- •早期校验：优先校验语法避免错误
- •模板复用：善用现有模板与范例
- •按需加载：只读所需指南节省资源
- •token 效率：层级式加载取代全量读取
版本： 1.0.0 最后更新： 2025-12-29 维护者： DOUYU