Diagram Design
13 editorial diagram types for Claude Code, architecture, flowchart, sequence, state machine, swimlane, Venn, pyramid… Generates self-contained HTML+SVG files with no external JavaScript, no build step, no dependencies. Built-in design system (Instrument Serif + Geist, stone/rust palette, 4px-grid coordinates, automatic WCAG AA validation). On first run, the skill fetches your website to extract your palette and fonts and applies them to all diagrams.
Strengths
- 13 structural types covered (sequence, state machine, swimlane, ER, quadrant, Venn, pyramid…), one tool for all your diagrams
- Zero external dependencies: self-contained HTML+SVG, opens in the browser directly with no build
- URL-based onboarding: the skill fetches your site on first run, extracts your palette + fonts, validates WCAG AA contrast, your diagram respects your brand from the first generation
- Opinionated design system (no shadows, no rounded corners > 10px, 4px-grid coordinates), clean result even without a designer in the loop
Limitations
- Young project, single maintainer, low bus factor, longevity worth monitoring
- Claude Code only (no MCP/API), exclusive to the Claude agent ecosystem
- URL onboarding only works if your public site is accessible, private sites or localhost excluded
Best for
- Quick system architecture sketches without opening Figma, API sequences, state machines, cross-team swimlanes
- Screenshot-ready technical documentation (README, slides, Notion), editorial-quality rendering from the first generation
- Brand-aligned diagrams: if your product has a visual identity, the skill applies your palette automatically via URL onboarding