用 AI 画结构图，最常见的结果就是一排排整齐的圆角方块——信息没错，但层次不分明、重点平均分配、色彩过于丰富，根本没法直接插入文章或演示文稿。
Diagram Design 的出发点很直接：让 Claude Code、Codex、Factory Droid 等 Agent 工具自动生成出接近编辑设计水准的图表，而非默认的模板样式。
39 种图表类型，覆盖绝大多数场景
项目提供 39 种图表：结构图、流程图、时序图、状态机图、实体关系图、时间轴图、泳道图、四分之一象限图、雷达图、循环图、树状图、甘特图、数据流图、Sankey 图、鱼骨图、Wardley 地图、看板图、用户旅程图、部署图、依赖关系图、UML 类图、故事地图、数据库模式等。
每种类型都有三种静态变体：最少（浅色/深色）和完全编辑式。输出为独立的 HTML+SVG 文件，无需构建过程或 JavaScript。
语义先于版式
Diagram Design 的核心设计哲学是将"表述的内容"与"它的外貌"分开：先确定语义模式（队列、瓶颈、重叠阶段、策略跟踪等），再匹配视觉样式。这样做的好处是不用为每个业务场景重新创造图表，而是复用已有的视觉语法。
主要信息用主色调表现，页面目标密度控制在约四分之一，让读者能快速抓住重点。
导入现有图表，保留结构重新绘制
如果你在用 draw.io、Mermaid 或 Excalidraw，Diagram Design 可以重新绘制。它保留组件、关系、分组和方向，但不会复制原始坐标、颜色和自动排布结果。
导入时四种控制维度：输出格式（HTML/SVG/PNG）、尺寸（文档/幻灯片/社交卡片）、精细度（忠实/均衡/简化）和目标群体（工程师/混合型/执行官）。每次导入自动生成 fidelity ledger，记录合并、压缩和删除的部分。
品牌适配：不只是换颜色
项目 onboarding 时会读取首页内容，提取背景色、正文色、辅助色、品牌强调色和字体层次，映射到 paper、ink、muted、accent、link 等语义角色。写入前自动检测 WCAG AA 对比度，不达标会给出建议。
内联 SVG 添加可访问名和描述，默认无动画，只在需要解释过程时使用 reveal/step/loop 效果，并提供减少运动选项。
安装与使用
Claude Code：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designCodex：
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design安装后可以直接要求生成前端/后端/数据库/Redis 缓存架构图，也可以用导入命令：
/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified
/diagram-design:import-excalidraw whiteboard.excalidraw --size=slide-16x9 --detail=simplified导出支持 SVG（可继续用于 Figma/Illustrator）和 PNG（Playwright 2x 栅格化）。
我的判断
Diagram Design 解决的不是"能不能画一张图"，而是这张图能否作为内容的一部分存在。它更像是一套给 Agent 使用的图表设计方案，而不是 Figma 替代品。在技术文章、产品方案、架构说明、演示文稿等场景中，它提供的接近设计判断的能力可以大幅减少后期人工修改时间。
