AI GitHub
diagram-design
Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.
Key Takeaways
- An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand.45 diagram types.
- I wanted diagrams I actually liked for my blog posts on littlemight.com.
- SKILL.md routes behavior first when needed, then layout.
- Read the project documentation for installation, requirements and usage instructions.
What diagram-design does
An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand.45 diagram types. No shadows. No Mermaid slop.
Why I built it
I wanted diagrams I actually liked for my blog posts on littlemight.com. Every time I needed one, whether an architecture sketch, a flowchart, or a pyramid of what matters most, I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or skip the diagram.
The model already understood the content. What it was missing was taste, so I wrote the taste down: one accent color for the one or two things that matter, 1px hairlines, no shadows, every coordinate on a 4px grid.
Architecture
Progressive disclosure. SKILL.md routes behavior first when needed, then layout. Semantic, type, and animation references load only when relevant.
This keeps the agent's working context tight: routine diagrams load one type reference; behavior-rich diagrams add the routed semantic reference; animation adds its contract only when selected.
Explore the project
Read the project documentation for installation, requirements and usage instructions. The overview above draws on the project's README; follow the original documentation when setting it up.
Try it for your workflow
Explore the project’s documentation for setup and usage, or save this page to a collection for later.
Read the project documentation ↗