diagram-design 项目分析

diagram-design — 杂志级图表生成 Skill

基本信息

• 仓库: https://github.com/cathrynlavery/diagram-design
• Star / Fork: 41,524 / 2,664（2026-04 创建，5 个月 4 万+）
• 更新: 2026-09-19（活跃，v2.5.10）| Open Issues: 33
• 语言: HTML | 许可证: MIT
• 作者: Cathryn Lavery（个人开发者，littlemight.com / BestSelf.co）

它是什么

给 AI 编码 Agent 的图表生成 Skill：“Editorial diagram design for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.”

纯知识资产（SKILL.md + references + HTML/SVG 模板），无运行时代码。装进 Agent 后产出编辑设计品质图表：

1. 43 种图表类型：架构/时序/ER/泳道/象限/Sankey/鱼骨/Wardley/甘特/用户旅程/DB schema/UML class/Kanban……
2. 每种 3 主题（minimal light/dark/full-editorial），单文件静态 HTML+SVG，零 JS 零依赖
3. 60 秒品牌匹配：抓目标网站提取配色字体 → 映射语义 token（paper/ink/muted/accent/link）→ 全部图表自动品牌化，含 WCAG AA 对比度校验 + 保真回执
4. 多品牌 profile：~/.diagram-design/profiles/<slug>.md + 项目 .diagram-design marker，多客户并行
5. 重绘：Mermaid / draw.io / Excalidraw 源 → 编辑风格重画
6. 内置设计哲学：删到不能再删、强调色只给 1-2 个焦点、密度 4/10、ARIA 无障碍

技术评估

• 成熟度: 生产就绪（v2.5.10，issue 响应活跃）
• 安装: Claude Code /plugin、Codex /copilot plugin marketplace、pi install https://github.com/cathrynlavery/diagram-design、Kiro/OpenCode/Cursor 复制目录
• 风险: 极低（MIT、无代码执行、产物纯静态）

当前价值

1. 报告/文档配图直接升级到品牌一致品质——侦察报告配架构图、对比象限即插即用
2. 提示词工程范本：style-guide.md 语义 token 体系 + type-*.md 分类型规格的组织方式，可直接借鉴写自己的视觉类 skill
3. Pi 原生支持，本环境可用

结论

[值得关注→建议直接装] — MIT、零依赖、立即可用。同类里 star 增速最快，验证了”纯 SKILL.md 知识资产”路线的爆发力。

关键链接

• 在线画廊: https://cathrynlavery.github.io/diagram-design/
• 本地画廊: skills/diagram-design/assets/index.html
• 相关: TLC Agent Skills 注册表（skill 分发层，本仓库是内容层标杆）