图表设计资源集

项目概述

Diagram Design 是一套面向 AI 编程代理的图表生成技能，目标是为技术写作者和工程博客提供编辑级质量的图表输出，覆盖 39 种视觉类型，全部以自包含的 HTML + SVG 形式交付，无需构建步骤、JavaScript 运行时或外部图片依赖。技能同时兼容 Claude Code、Codex、Factory Droid、Pi 等 Agent Skills 协议环境，并支持将 draw.io 或 Mermaid 源文件按目标格式、尺寸、受众重新绘制到本设计系统中。

核心设计原则

• 克制优先：每个节点都需有存在理由，色彩密度目标约为 4/10，强调色仅用于 1–2 个需要读者首先聚焦的元素。
• 样式与布局分离：语义模式（行为）独立于视觉类型（布局），使队列、策略追踪、信任边界等行为可复用最近的现有类型，避免类型数量膨胀。
• 静态优先：默认输出无脚本、无动画的可打印 HTML；动画作为可选项，仅用于有序讲解场景，并完整支持 prefers-reduced-motion。
• 品牌匹配：技能可读取目标网站并自动提取纸色、墨色、辅色、口音色、标题与正文字体栈，生成"保真回执"（含采样 URL、字体来源与回退），并自动执行 WCAG AA 对比度校验。

39 种视觉类型

覆盖架构、流程图、序列图、状态机、ER 图、时间线、泳道、四象限、雷达图、飞轮循环、嵌套、树、组织架构、层级栈、维恩图、金字塔/漏斗、柱状图、矩形树图、折线图、甘特图、散点图、High-Level 概览、流程、数据流、数据平台集成、安全矩阵、桑基图、鱼骨图、Wardley 地图、看板、用户旅程、部署图、依赖图、UML 类图、故事地图、数据库 schema、极坐标图。每种类型均提供 minimal light、minimal dark、full-editorial 三种静态变体。

安装方式

# Claude Code
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

# Codex
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

# Factory Droid
droid plugin marketplace add https://github.com/cathrynlavery/diagram-design
droid plugin install diagram-design@diagram-design --scope user

# Pi
pi install https://github.com/cathrynlavery/diagram-design

需要自定义样式指南时，建议克隆仓库并通过本地路径或符号链接安装，以便对 skills/diagram-design/references/style-guide.md 的修改不会被后续包更新覆盖。

快速上手

# 浏览全部 39 种图表的实时画廊
open skills/diagram-design/assets/index.html

# 从模板复制出空白骨架
cp skills/diagram-design/assets/template.html my-diagram.html
cp skills/diagram-design/assets/template-full.html my-diagram.html      # 含摘要卡片
cp skills/diagram-design/assets/template-motion.html my-diagram.html  # 可选可访问动画

在代理会话中，可用自然语言请求，例如「画一张架构图：前端、后端、数据库、Redis 缓存」，或显式调用 Pi 的 /export-diagram、/import-mermaid、/profile、/doctor 提示模板。

导入 draw.io 与 Mermaid

技能读取 draw.io 的 .drawio、.drawio.xml、.drawio.png（含嵌入图）、.drawio.svg 四种容器，包括压缩载荷；Mermaid 侧接受 .mmd、.mermaid 与 Markdown 中的围栏代码块，仅做纯文本解析，不调用渲染器。

/diagram-design:import-drawio platform.drawio
/dagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified --audience=executive
/diagram-design:import-mermaid README.md --diagram=all

四个核心旋钮：

每次导入都会生成一份"保真账本"，记录被合并、折叠或丢弃的源节点。

导出为 PNG / SVG

/diagram-design:export-diagram path/to/diagram.html --svg-only
/diagram-design:export-diagram path/to/diagram.html --png-only --scale=3

SVG 导出通过注入 Google Fonts 实现独立渲染；PNG 通过 Playwright 以 2× 默认倍率栅格化（首次需 pip install playwright && playwright install chromium）。导出仅包含图表本体，编辑卡片与标题需通过浏览器打印或整页截图获得。

架构与质量门禁

仓库采用渐进式披露：SKILL.md 先做行为路由再选版式；类型、语义模式、动画等参考文档按需加载。scripts/ 目录提供版本同步、截图新鲜度校验、插件包校验、极坐标与桑基图定量校验、文档同步测试等门禁脚本，覆盖 draw.io 与 Mermaid 导入路径的端到端校验与对抗样本测试。语义路由必须通过 verify-semantic-motion.py --markdown-only，动画示例另需 --example-only 门禁，所有发布的动画模板与示例还需通过 verify-motion.py --shipped。