Diagram Design: A Claude Code Skill for Editorial-Quality Architecture Diagrams

A developer built a Claude Code skill called Diagram Design after getting tired of spending 30 minutes in Figma every time she needed an architecture sketch. The skill turns your Claude Code agent into a high-end editorial graphic designer, generating self-contained HTML and SVG files with zero JavaScript, zero external images, and zero build steps.

What It Produces

Diagram Design ships with 13 built-in structural diagram types, all available in three visual variants: minimal light, minimal dark, and full editorial. Every diagram opens directly in a browser with no build step required. The supported types include architecture diagrams, flowcharts, sequence diagrams, state machines, ER/data models, timelines, swimlanes, quadrants, nested hierarchies, trees, layer stacks, Venn diagrams, and pyramid/funnel charts.

Design Philosophy

The project follows a clear editorial philosophy: "The highest-quality move is usually deletion. Every node earns its place. The accent color is reserved for the 1-2 things the reader should look at first. Target density: 4/10." This approach prioritizes clarity and readability over information density.

Key Takeaways

• Diagram Design is a Claude Code skill that generates editorial-quality diagrams as self-contained HTML/SVG
• Supports 13 structural types including sequence diagrams, state machines, and swimlanes
• Three visual variants: minimal light, minimal dark, and full editorial
• Zero dependencies: no JavaScript, no external images, no build steps
• Matches your brand by reading your website in 60 seconds

Resources

• Diagram Design on GitHub -- The open-source Claude Code skill repository
• @github.awesome on TikTok -- GitHub project spotlights and developer tool highlights