| 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"
