diagram-design-editorial

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Diagram Design — Editorial Diagrams

图表设计 — 专业级图表

Skill by ara.so — Design Skills collection.

Editorial-quality diagrams that match your brand. Fourteen diagram types (architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, nested, tree, org chart, venn, layers, pyramid) shipped as self-contained HTML + SVG files. No build step, no shadows, no generic rounded boxes.

The skill reads your website and extracts colors + fonts, then applies them across every diagram. Your site's paper color becomes the diagram background. Your CTA color becomes the focal accent. Your body font becomes the node label family.

由ara.so提供的Skill — 设计技能合集。

符合品牌风格的专业级图表。提供14种图表类型（架构图、流程图、时序图、状态机图、ER图、时间线、泳道图、四象限图、嵌套图、树形图、组织架构图、维恩图、分层图、金字塔图），均为独立的HTML + SVG文件。无需构建步骤，无阴影效果，无通用圆角框。

该技能会读取你的网站并提取色彩与字体，然后将其应用到所有图表中。网站的页面背景色会成为图表背景，CTA颜色会成为焦点强调色，正文字体会成为节点标签字体。

Installation

安装

bash

undefined

bash

undefined

Clone and symlink into Claude Code's skills directory

克隆并链接到Claude Code的技能目录

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design


Restart Claude Code. The skill registers as `diagram-design`.

**Alternative (plugin install):**

/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-design


**For Codex:**
```bash
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design


重启Claude Code。该技能将注册为`diagram-design`。

**替代方案（插件安装）：**

/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-design


**适用于Codex：**
```bash
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

Brand Onboarding (60 seconds)

品牌适配（60秒完成）

Out of the box, diagrams use a clean default palette (jet-black + atomic-tangerine). To apply your brand:

You:     "onboard diagram-design to https://yoursite.com"
Claude:  → fetches homepage
         → extracts dominant palette + font stack
         → maps to semantic roles (paper, ink, muted, accent)
         → shows proposed diff
         → writes to references/style-guide.md
You:     "apply it"

What gets extracted:

From your site	Becomes
`<body>` background	`paper` token
Primary text color	`ink` token
Secondary text	`muted` token
Cards/containers	`paper-2` token
Brand color (CTA/link)	`accent` token
`<h1>` font	`title` font
`<body>` font	`node-name` font
`<code>` font	`sublabel` font

Contrast checks run automatically (WCAG AA). If a color fails at diagram sizes (9–12px), the skill proposes an adjusted value.

Manual override: Edit

skills/diagram-design/references/style-guide.md

directly.

默认情况下，图表使用简洁的默认配色方案（纯黑+原子橙）。要应用你的品牌风格：

你:     "将diagram-design适配到https://yoursite.com"
Claude:  → 获取主页内容
         → 提取主色调与字体栈
         → 映射到语义角色（背景、主文本、次要文本、强调色）
         → 展示建议的差异
         → 写入references/style-guide.md
你:     "应用该方案"

提取内容对应关系：

从你的网站提取	对应图表角色
`<body>` 背景色	`paper` 标识
主文本颜色	`ink` 标识
次要文本颜色	`muted` 标识
卡片/容器样式	`paper-2` 标识
品牌色（CTA/链接）	`accent` 标识
`<h1>` 字体	`title` 字体
`<body>` 字体	`node-name` 字体
`<code>` 字体	`sublabel` 字体

系统会自动进行对比度检查（WCAG AA标准）。如果颜色在图表尺寸（9–12px）下不达标，该技能会建议调整后的颜色值。

手动覆盖： 直接编辑

skills/diagram-design/references/style-guide.md

文件。

Creating Diagrams

创建图表

Quick Start

快速开始

Just ask Claude to make a diagram — it will pick the right type:

"Make an architecture diagram of my app: frontend, backend, database, Redis cache."
"I need a quadrant showing Q2 projects by impact vs effort."
"Give me a sequence diagram of the OAuth handshake."
"Create a timeline of our product milestones."

Claude will:

Choose the appropriate diagram type
Build the HTML + SVG
Save it as a self-contained file
Apply your brand tokens from
```
style-guide.md
```

只需让Claude创建图表即可，它会选择合适的类型：

"为我的应用创建架构图：前端、后端、数据库、Redis缓存。"
"我需要一个展示Q2项目影响力与工作量的四象限图。"
"给我生成OAuth握手流程的时序图。"
"创建我们产品里程碑的时间线。"

Claude会：

选择合适的图表类型
构建HTML + SVG代码
保存为独立文件
应用
```
style-guide.md
```
中的品牌标识

The 14 Diagram Types

14种图表类型

Type	Use for
Architecture	Components + connections
Flowchart	Decision logic
Sequence	Messages over time
State machine	States + transitions
ER / data model	Entities + fields
Timeline	Events on an axis
Swimlane	Cross-functional flow
Quadrant	Two-axis positioning
Nested	Hierarchy by containment
Tree	Parent → children
Org chart	Ownership + routing
Venn	Set overlap
Layers	Stacked abstractions
Pyramid / funnel	Ranked hierarchy or drop-off

Bonus: Consultant 2×2 (scenario matrix with named cells)

类型	适用场景
架构图	组件与连接关系
流程图	决策逻辑
时序图	随时间变化的消息传递
状态机图	状态与转换
ER/数据模型图	实体与字段
时间线	轴上的事件序列
泳道图	跨职能流程
四象限图	双轴定位分析
嵌套图	包含关系的层级结构
树形图	父→子层级
组织架构图	归属与汇报关系
维恩图	集合重叠关系
分层图	堆叠抽象结构
金字塔/漏斗图	排名层级或转化漏斗

附加类型： 顾问式2×2矩阵（带命名单元格的场景矩阵）

Template Scaffolds

模板脚手架

Start from a template:

bash

undefined

从模板开始创建：

bash

undefined

Minimal light variant

极简浅色版本

cp assets/template.html my-diagram.html

Full editorial with summary cards

完整专业版（带摘要卡片）

cp assets/template-full.html my-diagram.html


Each template is self-contained HTML with inline SVG and CSS.

cp assets/template-full.html my-diagram.html


每个模板都是包含内联SVG和CSS的独立HTML文件。

Working Code Examples

可运行代码示例

Example 1: Architecture Diagram

示例1：架构图

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>App Architecture</title>
  <style>
    :root {
      --paper: #FEFEFE;
      --ink: #1A1A1A;
      --accent: #EB6C36;
      --muted: #64748B;
      --hairline: #D1D5DB;
    }
    body {
      margin: 0;
      padding: 48px;
      background: var(--paper);
      font-family: 'Geist', -apple-system, sans-serif;
    }
    svg {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
    <!-- Frontend node (focal, coral tint) -->
    <rect x="100" y="100" width="160" height="80" 
          fill="#FFF5F0" stroke="var(--accent)" stroke-width="2" rx="8"/>
    <text x="180" y="145" text-anchor="middle" 
          font-size="14" font-weight="500" fill="var(--ink)">
      Frontend
    </text>
    
    <!-- Backend node -->
    <rect x="100" y="260" width="160" height="80"
          fill="var(--paper)" stroke="var(--hairline)" stroke-width="1" rx="8"/>
    <text x="180" y="305" text-anchor="middle"
          font-size="14" font-weight="500" fill="var(--ink)">
      Backend API
    </text>
    
    <!-- Database node -->
    <rect x="400" y="260" width="160" height="80"
          fill="var(--paper)" stroke="var(--hairline)" stroke-width="1" rx="8"/>
    <text x="480" y="305" text-anchor="middle"
          font-size="14" font-weight="500" fill="var(--ink)">
      PostgreSQL
    </text>
    
    <!-- Connection lines -->
    <path d="M 180 180 L 180 260" stroke="var(--muted)" 
          stroke-width="1" fill="none" stroke-dasharray="4 4"/>
    <path d="M 260 300 L 400 300" stroke="var(--muted)"
          stroke-width="1" fill="none" stroke-dasharray="4 4"/>
    
    <!-- Labels on connections -->
    <text x="190" y="220" font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      HTTPS
    </text>
    <text x="310" y="290" font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      SQL
    </text>
  </svg>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>App Architecture</title>
  <style>
    :root {
      --paper: #FEFEFE;
      --ink: #1A1A1A;
      --accent: #EB6C36;
      --muted: #64748B;
      --hairline: #D1D5DB;
    }
    body {
      margin: 0;
      padding: 48px;
      background: var(--paper);
      font-family: 'Geist', -apple-system, sans-serif;
    }
    svg {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
    <!-- Frontend node (focal, coral tint) -->
    <rect x="100" y="100" width="160" height="80" 
          fill="#FFF5F0" stroke="var(--accent)" stroke-width="2" rx="8"/>
    <text x="180" y="145" text-anchor="middle" 
          font-size="14" font-weight="500" fill="var(--ink)">
      Frontend
    </text>
    
    <!-- Backend node -->
    <rect x="100" y="260" width="160" height="80"
          fill="var(--paper)" stroke="var(--hairline)" stroke-width="1" rx="8"/>
    <text x="180" y="305" text-anchor="middle"
          font-size="14" font-weight="500" fill="var(--ink)">
      Backend API
    </text>
    
    <!-- Database node -->
    <rect x="400" y="260" width="160" height="80"
          fill="var(--paper)" stroke="var(--hairline)" stroke-width="1" rx="8"/>
    <text x="480" y="305" text-anchor="middle"
          font-size="14" font-weight="500" fill="var(--ink)">
      PostgreSQL
    </text>
    
    <!-- Connection lines -->
    <path d="M 180 180 L 180 260" stroke="var(--muted)" 
          stroke-width="1" fill="none" stroke-dasharray="4 4"/>
    <path d="M 260 300 L 400 300" stroke="var(--muted)"
          stroke-width="1" fill="none" stroke-dasharray="4 4"/>
    
    <!-- Labels on connections -->
    <text x="190" y="220" font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      HTTPS
    </text>
    <text x="310" y="290" font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      SQL
    </text>
  </svg>
</body>
</html>

Example 2: Flowchart

示例2：流程图

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Decision Flow</title>
  <style>
    :root {
      --paper: #FEFEFE;
      --ink: #1A1A1A;
      --accent: #EB6C36;
      --muted: #64748B;
      --hairline: #D1D5DB;
    }
    body {
      margin: 0;
      padding: 48px;
      background: var(--paper);
      font-family: 'Geist', -apple-system, sans-serif;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 600 800" xmlns="http://www.w3.org/2000/svg">
    <!-- Start node (pill shape) -->
    <rect x="220" y="40" width="160" height="48"
          fill="var(--ink)" rx="24"/>
    <text x="300" y="68" text-anchor="middle"
          font-size="12" font-weight="500" fill="var(--paper)">
      Start
    </text>
    
    <!-- Decision node (diamond) -->
    <path d="M 300 160 L 380 220 L 300 280 L 220 220 Z"
          fill="var(--paper)" stroke="var(--hairline)" stroke-width="1"/>
    <text x="300" y="225" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Valid user?
    </text>
    
    <!-- Process nodes -->
    <rect x="420" y="196" width="140" height="48"
          fill="var(--paper)" stroke="var(--hairline)" stroke-width="1" rx="8"/>
    <text x="490" y="224" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Grant access
    </text>
    
    <rect x="40" y="196" width="140" height="48"
          fill="#FFF5F0" stroke="var(--accent)" stroke-width="2" rx="8"/>
    <text x="110" y="224" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Show error
    </text>
    
    <!-- Arrows -->
    <path d="M 300 88 L 300 160" stroke="var(--muted)" 
          stroke-width="1" marker-end="url(#arrowhead)"/>
    <path d="M 380 220 L 420 220" stroke="var(--muted)"
          stroke-width="1" marker-end="url(#arrowhead)"/>
    <path d="M 220 220 L 180 220" stroke="var(--accent)"
          stroke-width="1" marker-end="url(#arrowhead-accent)"/>
    
    <!-- Arrow markers -->
    <defs>
      <marker id="arrowhead" markerWidth="6" markerHeight="6"
              refX="5" refY="3" orient="auto">
        <polygon points="0 0, 6 3, 0 6" fill="var(--muted)"/>
      </marker>
      <marker id="arrowhead-accent" markerWidth="6" markerHeight="6"
              refX="5" refY="3" orient="auto">
        <polygon points="0 0, 6 3, 0 6" fill="var(--accent)"/>
      </marker>
    </defs>
    
    <!-- Labels -->
    <text x="390" y="210" font-size="10" fill="var(--muted)">Yes</text>
    <text x="190" y="210" font-size="10" fill="var(--accent)">No</text>
  </svg>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Decision Flow</title>
  <style>
    :root {
      --paper: #FEFEFE;
      --ink: #1A1A1A;
      --accent: #EB6C36;
      --muted: #64748B;
      --hairline: #D1D5DB;
    }
    body {
      margin: 0;
      padding: 48px;
      background: var(--paper);
      font-family: 'Geist', -apple-system, sans-serif;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 600 800" xmlns="http://www.w3.org/2000/svg">
    <!-- Start node (pill shape) -->
    <rect x="220" y="40" width="160" height="48"
          fill="var(--ink)" rx="24"/>
    <text x="300" y="68" text-anchor="middle"
          font-size="12" font-weight="500" fill="var(--paper)">
      Start
    </text>
    
    <!-- Decision node (diamond) -->
    <path d="M 300 160 L 380 220 L 300 280 L 220 220 Z"
          fill="var(--paper)" stroke="var(--hairline)" stroke-width="1"/>
    <text x="300" y="225" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Valid user?
    </text>
    
    <!-- Process nodes -->
    <rect x="420" y="196" width="140" height="48"
          fill="var(--paper)" stroke="var(--hairline)" stroke-width="1" rx="8"/>
    <text x="490" y="224" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Grant access
    </text>
    
    <rect x="40" y="196" width="140" height="48"
          fill="#FFF5F0" stroke="var(--accent)" stroke-width="2" rx="8"/>
    <text x="110" y="224" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Show error
    </text>
    
    <!-- Arrows -->
    <path d="M 300 88 L 300 160" stroke="var(--muted)" 
          stroke-width="1" marker-end="url(#arrowhead)"/>
    <path d="M 380 220 L 420 220" stroke="var(--muted)"
          stroke-width="1" marker-end="url(#arrowhead)"/>
    <path d="M 220 220 L 180 220" stroke="var(--accent)"
          stroke-width="1" marker-end="url(#arrowhead-accent)"/>
    
    <!-- Arrow markers -->
    <defs>
      <marker id="arrowhead" markerWidth="6" markerHeight="6"
              refX="5" refY="3" orient="auto">
        <polygon points="0 0, 6 3, 0 6" fill="var(--muted)"/>
      </marker>
      <marker id="arrowhead-accent" markerWidth="6" markerHeight="6"
              refX="5" refY="3" orient="auto">
        <polygon points="0 0, 6 3, 0 6" fill="var(--accent)"/>
      </marker>
    </defs>
    
    <!-- Labels -->
    <text x="390" y="210" font-size="10" fill="var(--muted)">Yes</text>
    <text x="190" y="210" font-size="10" fill="var(--accent)">No</text>
  </svg>
</body>
</html>

Example 3: Timeline

示例3：时间线

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product Timeline</title>
  <style>
    :root {
      --paper: #FEFEFE;
      --ink: #1A1A1A;
      --accent: #EB6C36;
      --muted: #64748B;
      --hairline: #D1D5DB;
    }
    body {
      margin: 0;
      padding: 48px;
      background: var(--paper);
      font-family: 'Geist', -apple-system, sans-serif;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 900 300" xmlns="http://www.w3.org/2000/svg">
    <!-- Timeline axis -->
    <line x1="100" y1="150" x2="800" y2="150"
          stroke="var(--hairline)" stroke-width="1"/>
    
    <!-- Event 1 (focal) -->
    <circle cx="200" cy="150" r="8" fill="var(--accent)"/>
    <text x="200" y="120" text-anchor="middle"
          font-size="12" font-weight="500" fill="var(--ink)">
      Beta Launch
    </text>
    <text x="200" y="180" text-anchor="middle"
          font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      Jan 2024
    </text>
    
    <!-- Event 2 -->
    <circle cx="400" cy="150" r="6" fill="var(--muted)"/>
    <text x="400" y="120" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Feature X
    </text>
    <text x="400" y="180" text-anchor="middle"
          font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      Mar 2024
    </text>
    
    <!-- Event 3 -->
    <circle cx="600" cy="150" r="6" fill="var(--muted)"/>
    <text x="600" y="120" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Public GA
    </text>
    <text x="600" y="180" text-anchor="middle"
          font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      May 2024
    </text>
  </svg>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product Timeline</title>
  <style>
    :root {
      --paper: #FEFEFE;
      --ink: #1A1A1A;
      --accent: #EB6C36;
      --muted: #64748B;
      --hairline: #D1D5DB;
    }
    body {
      margin: 0;
      padding: 48px;
      background: var(--paper);
      font-family: 'Geist', -apple-system, sans-serif;
    }
  </style>
</head>
<body>
  <svg viewBox="0 0 900 300" xmlns="http://www.w3.org/2000/svg">
    <!-- Timeline axis -->
    <line x1="100" y1="150" x2="800" y2="150"
          stroke="var(--hairline)" stroke-width="1"/>
    
    <!-- Event 1 (focal) -->
    <circle cx="200" cy="150" r="8" fill="var(--accent)"/>
    <text x="200" y="120" text-anchor="middle"
          font-size="12" font-weight="500" fill="var(--ink)">
      Beta Launch
    </text>
    <text x="200" y="180" text-anchor="middle"
          font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      Jan 2024
    </text>
    
    <!-- Event 2 -->
    <circle cx="400" cy="150" r="6" fill="var(--muted)"/>
    <text x="400" y="120" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Feature X
    </text>
    <text x="400" y="180" text-anchor="middle"
          font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      Mar 2024
    </text>
    
    <!-- Event 3 -->
    <circle cx="600" cy="150" r="6" fill="var(--muted)"/>
    <text x="600" y="120" text-anchor="middle"
          font-size="12" fill="var(--ink)">
      Public GA
    </text>
    <text x="600" y="180" text-anchor="middle"
          font-size="10" fill="var(--muted)"
          font-family="'Geist Mono', monospace">
      May 2024
    </text>
  </svg>
</body>
</html>

Design System Rules

设计系统规则

Every diagram follows these constraints (enforced in all 14 type references):

所有图表均遵循以下约束（在14种类型的参考文件中强制执行）：

Grid & Spacing

网格与间距

All coordinates, widths, gaps divisible by 4 (non-negotiable)
Base unit: 4px
Typical node padding: 16px
Gap between nodes: 40px minimum
Margin from edge: 48px

所有坐标、宽度、间距均需能被4整除（不可协商）
基础单位：4px
典型节点内边距：16px
节点间最小间距：40px
边缘边距：48px

Colors

色彩规范

One accent color — used for 1–2 focal elements only
Coral-tinted focal nodes:
```
#FFF5F0
```
fill +
```
accent
```
stroke
Non-focal nodes:
```
paper
```
fill +
```
hairline
```
stroke
Connection lines:
```
muted
```
(solid or dashed)

仅使用一种强调色 — 仅用于1–2个焦点元素
珊瑚色焦点节点：
```
#FFF5F0
```
填充 +
```
accent
```
描边
非焦点节点：
```
paper
```
填充 +
```
hairline
```
描边
连接线：
```
muted
```
（实线或虚线）

Typography

排版规范

Instrument Serif — titles + italic editorial callouts
Geist Sans — node names, labels
Geist Mono — technical sublabels (ports, URLs, field types)
Font sizes: 10px (sublabel), 12px (label), 14px (node name), 18px (title)

Instrument Serif — 标题 + 斜体专业标注
Geist Sans — 节点名称、标签
Geist Mono — 技术子标签（端口、URL、字段类型）
字体大小：10px（子标签）、12px（标签）、14px（节点名称）、18px（标题）

Shapes

形状规范

Max border-radius: 10px (8px typical for nodes)
Border width: 1px (hairline), 2px (focal)
No shadows, no gradients, no blur effects

最大圆角半径：10px（节点典型值为8px）
边框宽度：1px（细边框）、2px（焦点元素）
无阴影、无渐变、无模糊效果

Density

密度规范

Target density: 4/10 — every node earns its place
Show 5–9 primary nodes
Sublabels only when they add clarity (ports, field types, conditions)

目标密度：4/10 — 每个节点都有存在的意义
显示5–9个主要节点
仅在增加清晰度时使用子标签（端口、字段类型、条件）

Configuration

配置

All style tokens live in

skills/diagram-design/references/style-guide.md

markdown

| Role       | Token        | Light default | Dark default  |
|------------|--------------|---------------|---------------|
| Background | `paper`      | `#FEFEFE`     | `#0F0F0F`     |
| Primary    | `ink`        | `#1A1A1A`     | `#E5E5E5`     |
| Accent     | `accent`     | `#EB6C36`     | `#F97316`     |
| Muted      | `muted`      | `#64748B`     | `#94A3B8`     |
| Hairline   | `hairline`   | `#D1D5DB`     | `#334155`     |
| Card       | `paper-2`    | `#F8F9FA`     | `#1A1A1A`     |

Font stack:

markdown

| Role       | Family                                      |
|------------|---------------------------------------------|
| Title      | 'Instrument Serif', Georgia, serif          |
| Node name  | 'Geist', -apple-system, sans-serif          |
| Sublabel   | 'Geist Mono', 'SF Mono', Consolas, monospace|

Edit this file to override tokens globally, or run

onboard diagram-design to <url>

to extract from a website.

所有样式标识都存储在

skills/diagram-design/references/style-guide.md

中：

markdown

| 角色       | 标识         | 浅色默认值 | 深色默认值  |
|------------|--------------|---------------|---------------|
| 背景       | `paper`      | `#FEFEFE`     | `#0F0F0F`     |
| 主文本     | `ink`        | `#1A1A1A`     | `#E5E5E5`     |
| 强调色     | `accent`     | `#EB6C36`     | `#F97316`     |
| 次要文本   | `muted`      | `#64748B`     | `#94A3B8`     |
| 细边框     | `hairline`   | `#D1D5DB`     | `#334155`     |
| 卡片背景   | `paper-2`    | `#F8F9FA`     | `#1A1A1A`     |

字体栈：

markdown

| 角色       | 字体族                                      |
|------------|---------------------------------------------|
| 标题       | 'Instrument Serif', Georgia, serif          |
| 节点名称   | 'Geist', -apple-system, sans-serif          |
| 子标签     | 'Geist Mono', 'SF Mono', Consolas, monospace|

编辑此文件可全局覆盖标识，或运行

onboard diagram-design to <url>

从网站提取样式。

Common Patterns

常见模式

Adding Editorial Annotations

添加专业标注

Italic callouts that sit in the margins:

"Add an annotation to this diagram explaining why Redis sits between the backend and database."

Claude will insert:

html

<!-- Annotation callout -->
<text x="520" y="340" font-size="11" font-style="italic"
      font-family="'Instrument Serif', Georgia, serif" fill="var(--muted)">
  Redis caches hot queries,
</text>
<text x="520" y="356" font-size="11" font-style="italic"
      font-family="'Instrument Serif', Georgia, serif" fill="var(--muted)">
  reducing DB load by 70%.
</text>
<!-- Dashed leader to relevant node -->
<path d="M 500 300 Q 510 320, 515 335" stroke="var(--muted)"
      stroke-width="1" stroke-dasharray="2 3" fill="none"/>

位于边距处的斜体标注：

"给这个图表添加标注，说明为什么Redis位于后端和数据库之间。"

Claude会插入：

html

<!-- Annotation callout -->
<text x="520" y="340" font-size="11" font-style="italic"
      font-family="'Instrument Serif', Georgia, serif" fill="var(--muted)">
  Redis caches hot queries,
</text>
<text x="520" y="356" font-size="11" font-style="italic"
      font-family="'Instrument Serif', Georgia, serif" fill="var(--muted)">
  reducing DB load by 70%.
</text>
<!-- Dashed leader to relevant node -->
<path d="M 500 300 Q 510 320, 515 335" stroke="var(--muted)"
      stroke-width="1" stroke-dasharray="2 3" fill="none"/>

Hand-Drawn Variant (Sketchy Filter)

手绘风格变体（草图滤镜）

"Make this diagram look hand-drawn."

Applies SVG filters for rough edges:

html

<defs>
  <filter id="sketchy">
    <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" result="noise"/>
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="2"/>
  </filter>
</defs>

<!-- Apply to shapes -->
<rect x="100" y="100" width="160" height="80" filter="url(#sketchy)" ... />

"让这个图表看起来像手绘的。"

应用SVG滤镜实现粗糙边缘效果：

html

<defs>
  <filter id="sketchy">
    <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" result="noise"/>
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="2"/>
  </filter>
</defs>

<!-- Apply to shapes -->
<rect x="100" y="100" width="160" height="80" filter="url(#sketchy)" ... />

Dark Mode Variant

深色模式变体

All templates include CSS custom properties. To generate a dark variant:

"Create a dark mode version of this diagram."

Claude will swap tokens:

css

:root {
  --paper: #0F0F0F;
  --ink: #E5E5E5;
  --accent: #F97316;
  --muted: #94A3B8;
  --hairline: #334155;
}

所有模板都包含CSS自定义属性。要生成深色变体：

"创建这个图表的深色模式版本。"

Claude会替换标识：

css

:root {
  --paper: #0F0F0F;
  --ink: #E5E5E5;
  --accent: #F97316;
  --muted: #94A3B8;
  --hairline: #334155;
}

Consultant 2×2 Quadrant

顾问式2×2四象限图

Named scenario matrix (4 cells, each with a label):

"Make a 2x2 showing product strategy: differentiation vs cost, and broad vs niche market."

Generates quadrant with named cells:

html

<!-- Top-left cell -->
<rect x="100" y="100" width="300" height="200"
      fill="#FFF5F0" stroke="var(--accent)" stroke-width="2" rx="8"/>
<text x="250" y="190" text-anchor="middle"
      font-size="14" font-weight="500" fill="var(--ink)">
  Premium Niche
</text>
<text x="250" y="210" text-anchor="middle"
      font-size="10" fill="var(--muted)">
  High margin, focused
</text>

带命名单元格的场景矩阵（4个单元格，每个都有标签）：

"创建一个展示产品策略的2x2矩阵：差异化vs成本，广泛市场vs细分市场。"

生成带命名单元格的四象限图：

html

<!-- Top-left cell -->
<rect x="100" y="100" width="300" height="200"
      fill="#FFF5F0" stroke="var(--accent)" stroke-width="2" rx="8"/>
<text x="250" y="190" text-anchor="middle"
      font-size="14" font-weight="500" fill="var(--ink)">
  Premium Niche
</text>
<text x="250" y="210" text-anchor="middle"
      font-size="10" fill="var(--muted)">
  High margin, focused
</text>

Browsing the Gallery

浏览示例图库

Open the live gallery to see all 14 types with light/dark/editorial tabs:

bash

open ~/.claude/skills/diagram-design/assets/index.html

Or from the repo root:

bash

open skills/diagram-design/assets/index.html

Each example includes three variants:

Minimal Light —
```
template.html
```
scaffold
Minimal Dark — dark mode tokens
Full Editorial —
```
template-full.html
```
with annotation callouts

打开在线图库查看所有14种类型的浅色/深色/专业版示例：

bash

open ~/.claude/skills/diagram-design/assets/index.html

或从仓库根目录打开：

bash

open skills/diagram-design/assets/index.html

每个示例包含三种变体：

极简浅色版 —
```
template.html
```
脚手架
极简深色版 — 深色模式标识
完整专业版 —
```
template-full.html
```
带标注

Troubleshooting

故障排除

"Diagram looks generic / AI-generated"

"图表看起来很通用/AI生成感强"

Cause: Coordinates or gaps not divisible by 4, or too many accent colors.

Fix: Check the SVG for non-4-divisible x/y/width/height. Ensure only 1–2 nodes have the accent stroke.

原因： 坐标或间距不能被4整除，或使用了过多强调色。

解决方法： 检查SVG中的x/y/width/height是否为4的倍数。确保只有1–2个节点使用强调色描边。

"Fonts not loading"

"字体未加载"

Cause: Font families require web fonts (Geist, Instrument Serif).

Fix: Add to

<head>

html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">

For Geist, use the Vercel CDN or local files:

html

<link href="https://cdn.jsdelivr.net/npm/@vercel/style-guide@latest/fonts/geist.css" rel="stylesheet">

原因： 字体族需要网络字体（Geist、Instrument Serif）。

解决方法： 添加到

<head>

中：

html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">

对于Geist字体，使用Vercel CDN或本地文件：

html

<link href="https://cdn.jsdelivr.net/npm/@vercel/style-guide@latest/fonts/geist.css" rel="stylesheet">

"Onboarding failed — no colors extracted"

"适配失败——未提取到颜色"

Cause: Target site uses inline styles or CSS-in-JS that isn't in the DOM on initial load.

Fix: Manually set tokens in

references/style-guide.md

markdown

| Role   | Token    | Value     |
|--------|----------|-----------|
| paper  | `paper`  | `#FFFFFF` |
| ink    | `ink`    | `#000000` |
| accent | `accent` | `#FF6B35` |

原因： 目标网站使用内联样式或CSS-in-JS，初始加载时不在DOM中。

解决方法： 在

references/style-guide.md

中手动设置标识：

markdown

| 角色   | 标识     | 值         |
|--------|----------|-----------|
| paper  | `paper`  | `#FFFFFF` |
| ink    | `ink`    | `#000000` |
| accent | `accent` | `#FF6B35` |

"Contrast check failed"

"对比度检查失败"

Cause: Extracted ink color fails WCAG AA at small sizes (9–12px).

Fix: The skill auto-adjusts and shows a proposed value. Accept it, or override in

style-guide.md

原因： 提取的主文本颜色在小尺寸（9–12px）下不符合WCAG AA标准。

解决方法： 该技能会自动调整并显示建议值。接受建议，或在

style-guide.md

中手动覆盖。

"Diagram type not recognized"

"图表类型未被识别"

Cause: Request didn't match one of the 14 types.

Fix: Be explicit:

"Make a sequence diagram of the login flow."
"Create an architecture diagram showing microservices."
"Build a quadrant chart for prioritization."

See the selection guide in

SKILL.md

for triggers.

原因： 请求未匹配14种类型之一。

解决方法： 明确指定类型：

"生成登录流程的时序图。"
"创建展示微服务的架构图。"
"构建用于优先级排序的四象限图。"

查看

SKILL.md

中的选择指南获取触发词。

Environment Variables

环境变量

If deploying diagrams to a server that applies tokens via env vars:

bash

export DIAGRAM_PAPER="#FEFEFE"
export DIAGRAM_INK="#1A1A1A"
export DIAGRAM_ACCENT="#EB6C36"

Then reference in HTML:

html

<style>
  :root {
    --paper: ${DIAGRAM_PAPER};
    --ink: ${DIAGRAM_INK};
    --accent: ${DIAGRAM_ACCENT};
  }
</style>

(Most users will edit

style-guide.md

directly instead.)

如果要将图表部署到通过环境变量设置标识的服务器：

bash

export DIAGRAM_PAPER="#FEFEFE"
export DIAGRAM_INK="#1A1A1A"
export DIAGRAM_ACCENT="#EB6C36"

然后在HTML中引用：

html

<style>
  :root {
    --paper: ${DIAGRAM_PAPER};
    --ink: ${DIAGRAM_INK};
    --accent: ${DIAGRAM_ACCENT};
  }
</style>

（大多数用户会直接编辑

style-guide.md

。）

Advanced Usage

高级用法

Exporting as PNG

导出为PNG

Diagrams are self-contained HTML. To export as PNG:

bash

undefined

图表是独立的HTML文件。要导出为PNG：

bash

undefined

Using headless Chrome

使用无头Chrome

npx playwright screenshot my-diagram.html my-diagram.png --full-page

Or manually: open in browser, screenshot at 2x zoom for retina

或手动：在浏览器中打开，以2倍缩放截图获取视网膜分辨率

undefined

undefined

Embedding in Markdown

嵌入到Markdown

Use an

<iframe>

or convert to data URI:

markdown

![Architecture](data:image/svg+xml;base64,...)

Or link directly:

markdown

![Architecture](./diagrams/architecture.html)

使用

<iframe>

或转换为数据URI：

markdown

![Architecture](data:image/svg+xml;base64,...)

或直接链接：

markdown

![Architecture](./diagrams/architecture.html)

Custom Diagram Type

自定义图表类型

To add a 15th type:

Create
```
references/type-custom.md
```
with the same structure as existing types

Add selection trigger to

SKILL.md

markdown

- **Custom diagram** — <use case>
  - Trigger: "create a custom diagram"

Drop an example in
```
assets/example-custom.html
```

Claude will auto-load the reference when triggered.

License: MIT
Repo: github.com/cathrynlavery/diagram-design
Gallery:

skills/diagram-design/assets/index.html

要添加第15种类型：

创建
```
references/type-custom.md
```
，结构与现有类型一致

在

SKILL.md

中添加选择触发词：

markdown

- **Custom diagram** — <使用场景>
  - 触发词: "create a custom diagram"

在
```
assets/example-custom.html
```
中添加示例

Claude会在触发时自动加载该参考文件。

许可证： MIT
仓库： github.com/cathrynlavery/diagram-design
图库：

skills/diagram-design/assets/index.html