Diagram Design
SkillStack Official
Draw beautiful editorial diagrams as self-contained HTML/SVG — flowcharts, system architecture, sequence diagrams, ER models, swimlanes, timelines, Gantt charts, quadrants, funnels, fishbone. No default-Mermaid ugliness: warm paper, one accent color, generous whitespace, readable labels.
Use the Diagram Design skill to draw a flowchart of our signup-to-activation flow.
What you get
- Complete SKILL.md with IP guardrails, workflow, design-token system and a 10-type layout pattern library (flowchart, architecture, sequence, ER, swimlane, timeline, Gantt, quadrant, funnel, fishbone), 3 reference files with copy-paste SVG skeletons, and 3 beautiful demo diagrams.
Good fit
- Anyone whose diagrams look like default Mermaid output; docs, pitches, and blog posts that need a clear flowchart, architecture diagram, or timeline; teams that want consistent, branded diagram styling.
Not for
- Quick throwaway sketches (plain ASCII is faster); data-heavy statistical charts — use a charting library; diagrams where photorealistic rendering is needed.
- Name
- Diagram Design
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: Initial release: editorial diagram system with 10 diagram types, token system, and 3 demo diagrams
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip diagram-design-v1.0.0.zip -d ~/.claude/skills/diagram-design/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 28 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
taste-skill
Leonxlnx/taste-skill
Taste-Skill - gives your AI good taste. Stops the AI from generating boring, generic slop.
archify
tt-a1i/archify
Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams.
Flowboard Launch Reel Template
Flowboard Launch Reel Template
22-second horizontal (1920x1080) product-launch reel template for indie developers, rendered from HTML with HyperFrames. Swap the CONFIG block, re-render, ship your launch video.
Claude Code · Codex · Cursor · Copilot +3
Barbershop Grand Opening Reel Template
Barbershop Grand Opening Reel Template
Vertical 28-second grand-opening reel template for barbershops — animated CSS barber pole, bold kinetic typography, fully editable text via CONFIG. Built for freelancers and agencies serving local businesses: buy once, re-skin for every client.
Claude Code · Codex · Cursor · Copilot +3