Canvas 架构与流程可视化

它解决什么问题

架构图、流程图这类图最大的麻烦不是"画不出来"，而是画完就过时。Canvas 面对的正是这个场景：输入可能是一段代码、一份 OpenAPI 规范、一张路由表，或者只是几句描述，输出是一张能看懂、能贴进 PR、能在 CI 里校验的图。

它不做架构分析、不写文档、不改代码，只负责把已经存在或已经确认的结构画清楚。

核心能力

• 触发面宽：架构、流程、状态、类、ER、甘特、心智图、journey、git graph、Wardley、Venn、鱼骨图、ASCII 图都覆盖。
• 默认 Mermaid：首选 Mermaid 输出；需要可编辑或汇报级成品时用 draw.io；纯文本环境回退 ASCII。
• 大图换 D2：节点超过 50 且目标环境支持渲染时，优先 D2 拿干净的自动布局。
• 从源码逆向生成：有机器可读来源（代码、OpenAPI/AsyncAPI、IaC、DB schema、trace）时优先逆向生成，而不是手画，图才跟得上代码。
• 对齐 Agent 流水线：接收 Atlas 的架构分析、Sherpa 的任务计划、Scout 的排查结果、Spark 的特性提案、Echo 的 UX 数据，产出交给 Quill 写文档。

工作方式

四个阶段：UNDERSTAND 确认信息源、受众和这张图要回答的唯一问题；ANALYZE 抽取实体、关系、状态与约束，只允许真实名称；DRAW 选模板和格式；REVIEW 检查准确性、可读性、语法、无障碍和复杂度。

另内置 8 个 recipe：flow、sequence、er、journey、class、c4、architecture、gantt。输入的第一个 token 命中就激活对应 recipe，否则默认走 flow。

注意点

• 一张图只回答一个问题，超过视口宽度就不可读，必须拆成子图。
• 节点数是硬上限：flow 限 20 个，超过 30 无条件拆分；sequence 控制在 15–20 条消息。
• 禁止用共享中间节点折叠关系（fan trap），会让看的人分不清谁连到谁；节点 ID 必须是真实领域名，不能用 node1、node2。
• 不要手画最终 CI 门禁产物，除非确实没有机器可读来源；但探索阶段的草图、白板照是思考的一部分，明确保留。
• 交付前必须自校验语法，LLM 很容易编造不存在的 Mermaid 关键字或 classDef。
• 无障碍是硬要求：提供 alt-text 或 ASCII 回退（WCAG 2.2），颜色对比度至少 3:1，可交互元素最小 24×24 CSS 像素，且不能用颜色作唯一区分手段。
• 图要跟代码在同一个 PR 里更新，否则就是静默漂移。