架构图与流程图绘制

解决的问题

在架构评审、方案文档和排障说明中，纯文字描述组件关系往往不够直观。工程师需要快速画出系统架构、微服务、网络拓扑、业务流程、时序、状态机或 ER 图，但手写 SVG 容易在颜色、间距、箭头方向、裁切上反复调整。

能力与工作流

该技能提供两类输出：

• 内联可视化：通过 read_me 加载样式规则，再用 show_widget 渲染固定 viewBox 0 0 680 的 SVG/HTML，适合在对话中直接查看。
• Mermaid 代码块：输出 flowchart、sequenceDiagram、stateDiagram-v2、erDiagram 等语法，便于嵌入 Markdown 文档。

绘制时会遵循分层布局、marker 箭头方向、refX/refY 对齐、图例位置等规则，并优先保持中文标签可读。

适用边界

更适合作为方案草图和技术说明图：单图建议不超过 20 个节点，复杂系统可拆成多个聚焦视角。它不替代正式 UML 建模工具，也不保证业务语义完全准确，关键组件关系仍需人工确认。