By name: diagram-design description: Create technical and product diagrams — architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, nested, tree, layer stack, venn, pyramid — as standalone HTML files with inline SVG. Supports customizing colors and fonts to match your brand. version: 1.0.1 author: main tools: [filesystem, web_fetch, documents] commands: [] icon: 📐
Diagram Design
Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system. Generate beautiful, clean diagrams with a consistent style that can be customized to match your brand.
Thirteen Diagram Types
This skill supports creating the following diagram types:
- Architecture — Components + connections in a system
- Flowchart — Decision logic with branches
- Sequence — Time-ordered messages between actors
- State Machine — States + transitions + guards
- ER / Data Model — Entities + fields + relationships
- Timeline — Events positioned in time
- Swimlane — Cross-functional process with handoffs
- Quadrant — Two-axis positioning / prioritization
- Nested — Hierarchy through containment / scope
- Tree — Parent → children relationships
- Layer Stack — Stacked abstraction levels
- Venn — Overlap between sets
- Pyramid / Funnel — Ranked hierarchy or conversion drop-off
Design Philosophy
The design system follows these principles:
- Confident restraint — Earn every element
- One color accent — Reserved for 1-2 focal elements
- Grid system — Every coordinate divisible by 4
- Clean typography — Sans for node names, mono for technical details
- No shadows — Clean, minimal aesthetic with 1px hairline borders
- Target density: 4/10 — Remove what doesn't add value
Using The Skill
When the user asks to create a diagram, I will:
- Determine the appropriate diagram type based on the user's needs
- Check if this is the first diagram in the project to offer style customization
- Generate the HTML/SVG using semantic tokens for colors and typography
- Apply the style guide to maintain consistent visuals
- Run the output through quality checks to ensure it meets the design standards
- Save the output as a standalone HTML file
Style Customization Options
The skill supports customizing the visual style to match the user's brand:
- URL-based onboarding — Extract colors and fonts from the user's website
- Manual token setting — User provides specific color/font values
- Default style — Neutral stone + rust color scheme
Output Location
Outputs are written to diagram-design/ at the root of the agent's workspace.
Each diagram is delivered as a standalone HTML file containing:
- Embedded CSS (no external dependencies except Google Fonts)
- Inline SVG (no external images)
- No JavaScript required
Examples
To create a diagram:
- "Make me an architecture diagram of my app: frontend, backend, database, Redis cache."
- "I need a flowchart showing the user authentication process."
- "Create a sequence diagram for an API request flow."
- "Draw a quadrant showing my Q2 projects by impact vs. effort."
To customize the style:
- "Onboard diagram-design to match https://mywebsite.com"
- "Update the diagram style guide with my brand colors"