Diagram Design：编辑级图表设计系统

Diagram Design 是一个开源的编辑级图表设计系统，为 Claude Code、Codex 和 Pi 提供 27 种可视化图表类型。它通过语义化模式分离行为与布局，支持品牌自动化提取、无障碍访问、从 draw.io/Mermaid 导入重绘，以及静态/动态输出，所有图表均为自包含 HTML，无需构建步骤或外部依赖。

• 核心定位与设计理念: 解决 AI 生成图表的通用圆角框问题，追求"删除即最高品质"的编辑级输出，目标密度 4/10，强调每个节点必须有其存在价值。
• 27 种图表类型与三种变体: 涵盖架构图、流程图、序列图、状态机、ER 模型、时间线、泳道图、象限图、嵌套层级、树形图、组织结构图、韦恩图、层叠栈、金字塔/漏斗、咨询 2×2、雷达图、循环飞轮、IT 现状、高层端到端、条形图、折线图、甘特图、散点图、多角色流程、奖章存储、数据流、数据平台集成及安全矩阵；每种提供极简浅色、极简深色、完整编辑三种静态变体。
• 品牌自动化匹配: 60 秒完成网站品牌提取，自动映射纸色、墨色、弱化色、强调色、链接色等语义令牌，通过 WCAG AA 对比度检查，生成保真度收据。
• 多客户端支持与更新机制: 支持 Claude Code 插件市场、Codex 插件市场、Pi 扩展安装及组织私有市场；提供命名配置文件与项目标记器，实现多品牌并行工作空间。
• 导入与导出能力: 支持从 draw.io（四种容器格式）和 Mermaid（.mmd/.mermaid/Markdown 代码块）解析并重绘，通过格式、尺寸、细节、受众四个调节器适配不同场景；可导出为 SVG（注入 Google Fonts）或 PNG（Playwright 2× 栅格化）。
• 无障碍与可选动画: 默认静态无脚本，所有 SVG 内置 role="img"、aria-labelledby、title/desc；可选动画提供 reveal/step/loop 模式，支持 prefers-reduced-motion，运动控制器经过审查且不可修改。
• 严格的工程化验证: 包含皮肤检查、语义路由验证、动画结构检查、几何标签放置、文档同步、导入路径、自检查等多层 CI 门禁，覆盖 Linux/Windows/macOS 运行器。