diagram-design

Diagram Design 是一个包含39种编辑级图表类型的集合，以自包含的HTML和SVG文件形式交付，专为AI编码助手（如Claude Code、Codex、GitHub Copilot、Factory Droid、Pi、Kiro和OpenCode）设计为技能或插件。该项目的核心理念是，图表应与周围内容的视觉质量相匹配，而不是看起来像通用的圆角框模板。 每种图表类型提供三种静态变体：极简浅色、极简深色和全编辑风格。所有输出均为自包含，无需构建步骤、JavaScript或外部图像依赖。这39种类型涵盖了广泛的使用场景，包括架构图、流程图、时序图、状态机、ER/数据模型、时间线、泳道图、象限图、雷达图、循环/飞轮图、嵌套层次结构、树状图、组织架构图、层叠图、维恩图、金字塔/漏斗图、柱状图、树状图、折线图、甘特图、散点图、高层堆栈、流程、奖章架构、数据流、数据平台集成、安全矩阵、桑基图、鱼骨图、Wardley地图、看板、用户旅程、部署图、依赖图、UML类图、故事地图、数据库模式、极坐标图和瀑布图。 一个关键的区别是品牌匹配的入门流程。该技能可以获取网站首页，提取主导色板和字体堆栈，将检测到的值映射到语义角色（纸张、墨水、柔和、强调、链接），并将其应用于每个图表。它会自动执行WCAG AA对比度检查，并生成保真度收据，记录采样的URL、精确的颜色角色、字体家族以及任何回退方案。配置文件可以保存并通过`.diagram-design`标记文件在多个客户端项目之间共享。 该工具还支持从draw.io、Mermaid或Excalidraw导入现有图表，并以所选格式、大小和详细级别在Diagram Design系统中重新绘制。语义模式将行为与布局分开描述，因此队列、策略跟踪或信任边界等概念可以使用最近似的现有类型，而无需扩展类型数量。可选的无障碍动画可用于有序解释，支持减少动画偏好，并默认静态。 无障碍功能默认内置：每个SVG都包含role="img"、aria-labelledby以及title/desc元素，并带有每个图表的ID前缀，以防止多个图表在同一页面上内联时发生冲突。 安装可通过每个宿主平台的本地插件市场安装，或通过直接克隆Git仓库进行可编辑安装。共享技能位于`skills/diagram-design/`，并兼容所有支持的AI编码助手。