diagram-design-editorial
Create editorial-quality diagrams in HTML + SVG matching your brand — architecture, flowcharts, sequences, timelines, quadrants, and 9 more types.
Informations de source
- Dépôt
- reason-machines/design-skills
- Dernière activité de la source
- 16 mai 2026 à 19:26
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 4
- Forks
- 0
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Affichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- 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"
Voir sur GitHubCe SKILL.md est tres volumineux, SkillsMP affiche donc ici seulement la premiere section. Voir sur GitHub
