Mermaid 绘图引擎

先解决文档图难维护的问题

架构图、API 流程、数据库 schema、项目时间线如果散落在截图或设计工具里，改一次就要重新画一遍，评审时也难判断差异。这个技能的价值在于把图还原成 可版本化文本：你用声明式语法描述结构和流向，Mermaid.js v11 负责布局与渲染。

核心能力与工作流

• 选图型：从 flowchart、sequenceDiagram、classDiagram、stateDiagram、erDiagram、gantt、journey 等 24+ 种类型中匹配目标；复杂图可拆分后分别表达。
• 写源码：节点用 A[文字]，判断用 B{条件}，连接用 --> 或 -->|标签|，注释以 %% 开头。输出会整理成 DiagramSpec，包含图型、完整 Mermaid 源码和渲染目标。
• 内联渲染：在 Markdown 代码块前加 ---theme: dark--- 可控制主题；也可使用 look: handDrawn、securityLevel 等配置。
• 导出与嵌入：生成的图可渲染为 SVG、PNG、PDF，或通过引入 Mermaid 脚本在网页中直接加载。下游可交给文档生成、演示或前端项目消费。

适用边界

它适合需要 diff、评审和自动化生成的工程文档，不适合像素级精修的平面设计。超大图容易损失可读性，建议先拆分再组合；若安全模型特殊，需要明确限制交互能力。