SuperAPI AI 工具集

mermaid-diagramming

通用与其它

查看项目

更新于 10-16 01:37

技能介绍

用途:为技术文档生成清晰的 Mermaid 图表,覆盖主要图表类型,并给出渲染与导出建议。

主要能力: 流程图(流程、决策、分支);时序图(系统或角色间随时间的交互);ER 图(数据模型与关系);类图(对象结构与继承);状态图 stateDiagram-v2(状态与转换);甘特图(项目排期与依赖);饼图、思维导图、时间线、C4 上下文/容器架构图、gitGraph、journey 等。

使用流程:

  1. 界定范围:明确叙述目标、受众、实体与关系,再按选择指南确定图表类型。
  2. 起草:写基础 Mermaid 代码。建议每图一个概念,节点控制在 15 个以内,标签有意义,方向统一(TB 或 LR),用 subgraph 分组,注释以 %% 开头,含特殊字符的标签用双引号,实线 -->、虚线 -.->、粗线 ==>,边标签如 -->|"reason"| TargetNode。
  3. 样式:通过 %%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#4A90D9'}}}%% 应用主题;用 classDef 与 ::: 做节点高亮;兼顾高对比度,不只靠颜色传达含义,嵌入时加 alt 文本,复杂图配文字摘要。
  4. 交付:同时提供基础版与带样式版,说明预览位置,并建议后续迭代与补充图表。

渲染与导出: GitHub、GitLab markdown 原生渲染;Mermaid Live Editor 见 https://mermaid.live 可交互编辑;VS Code 用 Mermaid 扩展预览;Docusaurus、MkDocs 通过插件渲染。导出可选 SVG(网页和文档,可缩放、文本可搜索)、PNG(不支持 Mermaid 的平台作回退)、PDF(打印或正式文档)。

最佳实践与限制:先结构后样式;提交前在目标平台验证渲染;系统变更后同步更新图表;图表与文档同目录存放。避免单图节点过多(15+ 拆分)、单字母节点 ID 无标签、仅靠颜色表意、硬编码像素宽度、系统变更后图表失修。

关于该技能的安装命令、收费与价格信息:暂未提供。