Skip to content
Get packs

Diagram Design

Makes the agent draw 45 kinds of branded diagrams as self-contained HTML/SVG files.

Source Download skill
Repository
cathrynlavery/diagram-design
Stars
64,218
Licence
MIT
Files
11 files

What it does

When installed, the agent turns a description of a system, process, data model or chart into a polished, self-contained HTML file with inline SVG, following an editorial design system. It picks a suitable diagram type from about 45 options (architecture, flowchart, sequence, Gantt, Sankey, org chart and more), can export to PNG, and can import existing .drawio, Mermaid or .excalidraw files. It also checks for a project style guide so diagrams match a brand, and offers onboarding to set one up.

Great for

  • Developers who need architecture or sequence diagrams that look presentation-ready
  • Product or design teams wanting diagrams that follow a brand style guide
  • Consultants producing client-facing process, data or security diagrams

Skip it if

  • Quick plain-text sketches, since the skill itself recommends a separate text tool for those
  • Situations where a table or paragraph communicates the same information, because the skill advises against unnecessary diagrams
  • Ultra-precise engineering drawings, as this is a schematic and editorial tool rather than a CAD or formal modelling environment

Try asking

  • “Draw an architecture diagram of our API gateway, auth service and database, highlighting the payment service”
  • “Turn this Mermaid sequence diagram into a branded HTML version”
  • “Create a Gantt chart for our Q3 launch plan”
  • “Make a Sankey diagram showing where our marketing budget flows”
Step-by-step guide: how to use Diagram DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 11 original files, the MIT licence and an attribution note.

    diagram-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip diagram-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip diagram-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the diagram type you want (e.g. sequence, swimlane) to get the best layout, or describe the behaviour and let the skill choose.
  • Run the style guide onboarding once per project so later diagrams use your brand colours and fonts.
  • Keep diagrams to about 9 nodes or fewer; ask the agent to split larger systems into multiple diagrams.

What's inside

  • assets/example-architecture-containment-dark.html
  • assets/example-architecture-containment-full.html
  • assets/example-architecture-containment.html
  • assets/example-architecture-dark.html
  • assets/example-architecture-delta-dark.html
  • assets/example-architecture-delta-full.html
  • assets/example-architecture-delta.html
  • assets/example-architecture-full.html
  • assets/example-architecture.html
  • assets/example-axonometric-plan-campus-animated.html
  • SKILL.md

Redistributed unmodified from cathrynlavery/diagram-design under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.