Diagram Design
39 editorial diagram types for Claude Code, Codex, Factory Droid and Pi: architecture, flowchart, sequence, state machine, swimlane, Venn, pyramid, Gantt, Sankey, Wardley map, user journey, database schema and more. Generates self-contained HTML+SVG files with no external JavaScript, no build step, no dependencies, plus PNG export. 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. It can also take an existing Mermaid or draw.io diagram and redraw it in that visual system.
Strengths
- 39 diagram types covered (sequence, state machine, swimlane, ER, quadrant, Venn, pyramid, Gantt, Sankey…), 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
- Lives inside your coding agent (Claude Code, Codex, Factory Droid, Pi): no MCP or API, nothing for anyone not working with an agent
- 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