SuperAPI AI 工具集

mermaid-architecture-diagrams

设计与创作

查看项目

更新于 10-15 17:25

技能介绍

用途:编写面向打印质量的 Mermaid 架构与运维图,包括系统草图、部署流水线和监控、数据流图。核心前提是渲染后校验:Mermaid 布局由渲染决定,标签宽度、连线路由和子图尺寸只有渲染后才可见。流程为:编写 .mmd 文件,执行 scripts/render-mmd.sh diagram.mmd,查看生成的 *-preview.png,修复裁切、重叠、标签碰撞和连线交叉后重新渲染,至少一轮修复;未查看渲染结果的图只是草稿。

主要能力与工作方式:一图一目的一受众,先写清读者需在 5 秒内理解的故事;拓扑/包含关系用自上而下(TB),流水线用从左到右(LR),但打印/PDF 场景优先高窄 TB,因为宽 LR 缩放到文本宽度后字号仅约 4–5pt。设计系统采用语义化颜色令牌、连线语法和标签规则(见 DESIGN-SYSTEM.md),默认玻璃+层次外观,仅当明确要求色盲安全或合规时使用扁平外观。语法限制在 TECHNIQUES.md 的已验证白名单内,且不要为 Quarto 目标图设置 themeVariables.fontFamily,否则标签会被裁切。

渲染管线:Quarto/pandoc 文档用 render-mmd.sh -p quarto;GitHub README/wiki/GitLab 用 render-mmd.sh -p mmdc;MkDocs/Docusaurus/Hugo 用站点自身构建,迭代时可退回 mmdc;幻灯片和独立图片用 mmdc(-o out.svg 可得矢量)。默认 -p auto 优先 Quarto,回退 mermaid-cli,均输出全分辨率 PNG 和检查预览图。Quarto 与 mmdc 的 Mermaid 版本相同但行为不同,故需在交集内创作:使用完整 classDef 令牌、不覆盖 fontFamily、通过 themeCSS 而非 classDef 做过滤、子图标题不超过 24 字符。遇到新管线先渲染探针片段再正式作图。附带 DESIGN-SYSTEM.md、TECHNIQUES.md、REVIEW-CHECKLIST.md 和 scripts/render-mmd.sh。高要求场景可运行变体竞赛。限制:资料未提供安装方式、收费、平台支持等细节。