diagram-design-editorial
Create editorial-quality diagrams in HTML + SVG matching your brand — architecture, flowcharts, sequences, timelines, quadrants, and 9 more types.
Datos de origen
- Repositorio
- reason-machines/design-skills
- Última actividad en el origen
- 16 de mayo de 2026 a las 19:26
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 4
- Forks
- 0
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- diagram-design-editorial
- description
- Create editorial-quality diagrams in HTML + SVG matching your brand — architecture, flowcharts, sequences, timelines, quadrants, and 9 more types.
- triggers
- ["create a diagram","make an architecture diagram","build a flowchart","generate a sequence diagram","design a timeline","create a quadrant chart","make an org chart","build a state machine diagram"]
# Diagram Design — Editorial Diagrams
> Skill by [ara.so](https://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.
## Installation
```bash
# Clone and symlink into Claude Code's skills directory
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
```
## Brand Onboarding (60 seconds)
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.
## 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:
1. Choose the appropriate diagram type
2. Build the HTML + SVG
3. Save it as a self-contained file
4. Apply your brand tokens from `style-guide.md`
### The 14 Diagram Types
| 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)
### Template Scaffolds
Start from a template:
```bash
# 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.
## Working Code Examples
### Example 1: Architecture Diagram
```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
```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
```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"
Ver en GitHubEste SKILL.md es muy grande, por eso SkillsMP muestra aqui solo la primera seccion. Ver en GitHub
