SuperAPI AI 工具集

mermaid-diagrams

办公与效率

查看项目

更新于 10-16 09:30

技能介绍

用途:该技能用于借助 Mermaid 的文本式语法创建专业软件图,把图变成可版本控制、易更新、能与代码一起维护的文本定义,适合创建、可视化或文档化软件。

主要能力:覆盖多种图形类型,并给出选择指引。类图用于领域建模、面向对象设计与实体关系;时序图用于 API 请求响应、登录鉴权等时序交互;流程图用于流程、算法与决策树;ERD 用于数据库表关系与数据建模;C4 用于多层级软件架构(上下文、容器、组件、代码);还涉及状态图、Git 图、甘特图与饼图/柱状图。

基本语法:所有图都遵循先声明图类型,再写定义内容的结构。首行声明 diagramType(如 classDiagram、sequenceDiagram、flowchart);用 %% 写注释;换行与缩进用于提升可读性但非必需;未知单词会破坏图,参数错误则静默失败。

配置与主题:可用 frontmatter 配置,如 config 下设 theme(可选 default、forest、dark、neutral、base)与 themeVariables;布局有 layout: dagre(默认)与 layout: elk(需集成),外观有 look: classic 与 look: handDrawn。

渲染与导出:GitHub/GitLab 的 Markdown、VS Code(配 Mermaid 扩展)、Notion、Obsidian、Confluence 原生支持。导出可用 Mermaid Live Editor 导出 PNG/SVG,或用 CLI:npm install -g @mermaid-js/mermaid-cli 后执行 mmdc -i input.mmd -o output.png;也可用 Docker:docker run --rm -v $(pwd):/data minlag/mermaid-cli -i /data/input.mmd -o /data/output.png。

最佳实践与限制:从简单核心实体起步,增量补充;使用有意义的命名;多写注释;一图一概念,过大拆分为多个视图;将 .mmd 文件与代码同库保存;加标题与说明;持续迭代。注意:注释中避免 {} 等破坏性字符,特殊字符需正确转义;拼写错误会破坏图,建议在 Mermaid Live 校验;避免过度复杂与遗漏重要关系。详细内容见 references 下类图、时序图、流程图、ERD、C4、架构图与高级特性等参考文件。