Diagram Design
编辑级图表设计，让设计师爱不释手。
2.0版本新增——循环系统：带共享内存中心的飞轮结构。虚线表示回写路径。
2.3版本新增：语义系统模式与可选动态效果，静态输出仍为默认选项。
2.5.10版本新增：十种布局语法——桑基图、鱼骨图、沃德利地图、看板图、用户旅程图、部署图、依赖关系图、UML类图、故事地图和数据库架构图。
支持Claude Code、Codex、Factory Droid、Pi和Agent Skills兼容主机的39种编辑级图表类型。独立HTML+SVG实现。无阴影特效。拒绝Mermaid的粗糙效果。语义模式将行为描述与布局分离，因此队列、策略追踪或信任边界等元素可直接适配现有类型而无需新增分类。静态HTML仍为默认输出；有序讲解时可选用动态效果。该技能还能按指定格式、尺寸和细节层级重绘draw.io或Mermaid源文件。
无需Figma。拒绝通用圆角方框。告别30分钟的色彩挑选会议。
开发初衷
我在littlemight.com写作（同时运营BestSelf.co）。每当需要绘制架构草图、流程图或重要事项金字塔时，Claude生成的总是与网站风格迥异的通用圆角方框。我要么在Figma里折腾半小时，要么干脆放弃图表。
因此我开发了这个Claude Code技能。39种视觉类型，编辑级品质，通过读取网站60秒即可匹配品牌风格。
最高级的优化往往是做减法。 每个节点都必须有其存在价值。强调色仅用于1-2个需要读者优先关注的元素。目标视觉密度：4/10。
功能特性
39种视觉类型均提供三种静态变体：极简亮色、极简暗色和完整编辑版。可直接在浏览器中打开任一版本。无需构建步骤、JavaScript或外部图像依赖。
架构图 组件+连接关系 |  IT现状图 遗留系统+现代化改造 |  流程图 决策逻辑 |
 时序图 随时间传递的消息 |  状态机 状态+转换 |  ER图/数据模型 实体+字段 |
🔗 知识库双向关联 |
