diagram-design：让编码 Agent 输出可交付、可换品牌的专业图表
一分钟看懂
diagram-design 是面向 Claude Code、Codex、Factory Droid、Pi 等 Agent 的图表设计 Skill/插件。它不只“画几个框”，而是根据内容选择合适图型，生成自包含 HTML 与内联 SVG，并可导出 SVG、PNG 等格式。内置约 39 类架构、流程、序列、状态、数据和策略图，并提供明暗及编辑化变体。
你可以用它做什么
- 将系统描述变成架构图、序列图、流程图、状态图、数据流或决策图。
- 把 draw.io 和 Mermaid 内容重新排版成统一设计语言，而非机械截图。
- 从品牌网站提取配色与字体，建立多个客户可复用的 profile。
- 针对文档、16:9 幻灯片、社交图或印刷品选择尺寸、详略与受众措辞。
- 导出 SVG 给 Figma/Illustrator，或用 Playwright 栅格化 PNG。
主要能力
Skill 以语义模式和图型路由选择布局，支持静态、reveal、step、loop 动效并尊重 reduced-motion。品牌 onboarding 会映射 paper、ink、accent 和字体，检查 WCAG 对比度并生成取样回执。导入时可选择 faithful、balanced、simplified，并输出合并、折叠和删除内容的 fidelity ledger。
适合哪些人
适合需要为技术文档、方案评审、演示和品牌内容快速产出统一图表的工程师、架构师和设计团队。需要自由拖拽的协作白板或 CAD 级精密绘图时，它不是替代品。
怎么开始使用
Claude Code 或 Codex 用户按 README 添加仓库 marketplace，再安装 diagram-design 插件；Pi 可直接从 Git URL 安装。首次在品牌项目使用时按提示进行 onboarding，或明确选择默认样式。随后用自然语言描述组件与关系，也可调用导入命令处理 .drawio、.mmd 或 Markdown 中的 Mermaid 块。
使用前需要知道
导入会保留组件、关系、分组和方向，但不会保留原坐标、颜色和字体；简化档位可能删除次要节点，应检查 fidelity ledger。PNG 导出需 Python Playwright 与 Chromium。网站字体与品牌素材可能受许可限制，不能因工具成功提取就默认拥有再分发权。复杂系统仍需要领域专家核对语义。