Diagram Design
Draw 38 editorial diagram types — architecture, flowchart, sequence, ER, timeline, swimlane, Sankey, Wardley — as self-contained HTML with inline SVG under one opinionated style guide.
Preview
Demo
generated by installing this skill + a shared studio brief · interactive · how we make these
Sample outputs
Made with this skill by Design Skills HubBundled Skills
- Design guidance authored by its creator
- Installs into any skill-compatible agent
- Delivered as a portable SKILL.md
- Works across Claude Code, Cursor, Codex, and more
Example output
Full skill (SKILL.md + bundle) is delivered on purchase.
Works with all AI agents — Claude Code, Cursor, Codex, Gemini, ChatGPT, OpenClaw, and more.
No rating and comments yet
Share how this skill worked for you.
to rate and review this skill
Get this Skill
One-time purchase. Full SKILL.md + bundle delivered on purchase.
Quick Start
npx skills add cathrynlavery/diagram-design
npx skills add ...
Paste in Terminal, Claude, or Cursor chat
Paste into Claude, Cursor, OpenClaw, or any AI chat
Support the author
This skill is free & open-source. If it helped, tip in USDC — 100% goes to them. Tipping launches soon.
Generate your design style skills from Figma.
Need something more specific to your project?