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:

1. Architecture — Components + connections in a system
2. Flowchart — Decision logic with branches
3. Sequence — Time-ordered messages between actors
4. State Machine — States + transitions + guards
5. ER / Data Model — Entities + fields + relationships
6. Timeline — Events positioned in time
7. Swimlane — Cross-functional process with handoffs
8. Quadrant — Two-axis positioning / prioritization
9. Nested — Hierarchy through containment / scope
10. Tree — Parent → children relationships
11. Layer Stack — Stacked abstraction levels
12. Venn — Overlap between sets
13. 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:

1. Determine the appropriate diagram type based on the user's needs
2. Check if this is the first diagram in the project to offer style customization
3. Generate the HTML/SVG using semantic tokens for colors and typography
4. Apply the style guide to maintain consistent visuals
5. Run the output through quality checks to ensure it meets the design standards
6. Save the output as a standalone HTML file

Style Customization Options

The skill supports customizing the visual style to match the user's brand:

1. URL-based onboarding — Extract colors and fonts from the user's website
2. Manual token setting — User provides specific color/font values
3. 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

Exporting As An Image

When the user needs an image file (a PNG for LinkedIn, a slide or a document), screenshot the saved HTML page in a browser:

npx -y playwright@1.63.0 screenshot --device "Desktop Chrome HiDPI" --full-page "file://<absolute path>.html" "<absolute path>.png"

• The PNG matches what the user sees when they open the HTML, at 2× resolution. When the page holds only a fixed-size <svg width="W" height="H"> with no margin around it, add --viewport-size "W,H" so the image has no empty border.
• If it reports a missing browser, run npx -y playwright@1.63.0 install chromium once and retry.

Never rasterize the <svg> on its own, whether through XMLSerializer and a canvas or an SVG-to-PNG converter. Its colors are var(--…) tokens defined on the page, and its background and fonts come from the page too, so a detached SVG renders every fill black, drops every stroke, loses the background and falls back to a default font.

Before reporting an export done, open each PNG as an image and compare it with the HTML: light panels, visible lines and arrows, the accent color, the brand fonts. File size, dimensions and average brightness prove nothing; black boxes on a light background pass all three.

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"