PlugWiki

diagram-design skill (cathrynlavery): editorial diagrams as HTML and SVG

Makes your agent draw architecture diagrams, flowcharts and charts as one clean HTML file with inline SVG.

Installs
23.3K
on skills.sh
Stars
63.9K
on GitHub
Files
60+
besides SKILL.md
Updated
Nov 2026
last repo commit

diagram-design makes your agent produce diagrams as one self-contained .html file with inline SVG. It supports 45 visual types, from architecture and flowcharts to Sankey, Wardley maps and UML class diagrams, and it can also export PNG or SVG.

It triggers when you ask for a diagram, a chart or a redraw of a draw.io, Mermaid or Excalidraw file. On first use in a project it checks the style guide and asks if you want to match your brand. The agent states its plan before drawing and keeps each diagram to 9 nodes.

The skill bundles six Python scripts. PNG export needs Playwright for Python, and the SKILL's export reference says it never installs it for you.

Good for

  • Developers who want architecture and sequence diagrams for docs and posts
  • Designers who want diagrams to match a brand palette and fonts
  • Teams redrawing draw.io, Mermaid or Excalidraw diagrams in one style
  • Analysts who need quadrants, Gantt charts or Sankey diagrams

Install diagram-design

Claude Code

  1. 1

    Copy this prompt.

    Install the diagram-design skill in Claude Code. Run this command:

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph, ridgeline, streamgraph, bump), Gantt and scatter charts (bubble, beeswarm, box plot), high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, service blueprint, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio, Mermaid, and .excalidraw import, plus lifecycle phase maps, block decomposition trees, and onboarding guidance.

Sections in SKILL.md

  1. 0. First-time setup — style guide gate
  2. 1. Philosophy
  3. 2. When to Use
  4. 3. Selection: semantic pattern, then visual type
  5. Visual-type guide (45)
  6. Confirm before drawing
  7. 4. Universal Anti-patterns
  8. 5. Design System
  9. Semantic roles (at a glance)
  10. 6. Core SVG Primitives
  11. Mandatory connector rules
  12. 7. Layout & Spacing
  13. Complexity budget (per diagram)
  14. 8. Summary Card Pattern
  15. 9. Pre-Output Checklist (Taste Gate)
  16. 10. Templates & Variants

Key facts

Author
Cathryn Lavery (LittleMight)
Repository
cathrynlavery/diagram-design (skills/diagram-design)
Installs on skills.sh
23,267 as of 2026-11-02
GitHub stars
63,872 for the whole cathrynlavery/diagram-design repo, 2026-11-02
License
MIT (as detected by GitHub)
Last commit to the repo
2026-11-01
What is inside
290 files: SKILL.md, 63 reference files, 220 asset files (templates and examples) and 6 Python scripts

What it includes

  • Asks to customize colors and fonts before the first diagram

    If the style guide still has the shipped default colors, the agent asks if you want to use a website URL, an installed skill, a local folder, pasted tokens, the default, or a saved profile.

    Try: “Onboard diagram-design to my brand colors from this folder.”

    Write · Style guide gate

  • Architecture, flowchart, sequence, ER, Gantt, Sankey, Wardley and more

    The agent picks the type from a guide table, loads that type's reference file, and states the plan before it draws. Semantic patterns such as lifecycle phase map can sit on top.

    Try: “Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”

    Write · 45 visual types

  • Max 9 nodes, 12 arrows and 2 accent elements per diagram

    Past the limits the skill says to split the diagram into an overview and a detail view.

    Read · Complexity budget

  • Taste gate covering type fit, connectors and accessibility

    Includes six connector rules and an accessible SVG contract. The agent runs scripts/self_check.py on the file.

    Runs code · Pre-output checklist

  • Checks the generated file for accessibility and safety rules

    A Python script that checks the single-file HTML contract.

    Runs code · scripts/self_check.py

  • drawio_extract.py, mermaid_extract.py, excalidraw_extract.py

    Each script prints a digest of nodes and edges. The agent then redraws the diagram in the skill's style instead of converting it.

    Runs code · Import from draw.io, Mermaid, Excalidraw

  • export_svg.py and export_png.py

    export_svg.py writes a standalone SVG. export_png.py uses Playwright to rasterize the diagram in a headless browser.

    Runs code · Export to SVG and PNG

  • Light, dark, full editorial, sketchy, terminal and motion

    Every diagram can ship as minimal light, minimal dark or full editorial. Optional sketchy, terminal and animated variants exist.

    Write · Templates and variants

From the official docs

Permissions

Medium risk

The skill runs Python helper scripts and writes files on your machine. Check any website it wants to fetch for brand colors before you confirm.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • Brand onboarding can fetch a website

    The skill tells the agent to ask you before it contacts a URL, and to treat the fetched page as untrusted. Say no or give it a local folder if you do not trust the site.

  • Generated files load Google Fonts

    Every diagram links Google Fonts unless you use system fonts. Remove the link or open the file offline if you want no request.

  • PNG export needs Playwright

    The export reference tells the agent not to auto-install it. Install Playwright yourself if you want PNG output.

Technical details
Talks tofonts.googleapis.com and fonts.gstatic.com when a generated diagram is opened. Websites you choose for brand onboarding, after you confirm
Scopes

  • Runs bundled Python scripts (self_check, export_svg, export_png, and three extractors)

  • Writes generated .html, .svg and .png files

  • Saves brand profiles under ~/.diagram-design/profiles/

  • PNG export launches headless Chromium through Playwright

Questions

What does the diagram-design skill do?

It makes your agent draw diagrams as a single HTML file with inline SVG. It covers 45 types, applies a style guide you can match to your brand, and can export PNG or SVG.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box at the top of this page. The README also documents a Claude Code plugin marketplace route that adds slash commands, and a Codex plugin route. The README says the skills CLI install gives only the skill, not those commands.

Which clients does it work in?

The README says it works with any host that reads Agent Skills, and names Cursor, Claude Code, Codex, Qoder, GitHub Copilot, Gemini CLI, Cline, Windsurf and Amp.

Does it need an API key?

No key is mentioned. PNG export needs Playwright for Python and a browser, which the skill does not install for you. Python 3 runs the helper scripts.

Does it send my data anywhere?

Per its PRIVACY.md, the skill has no server and no telemetry. Generated diagrams load fonts from Google Fonts when opened in a browser, so Google sees the viewer's IP address. Brand onboarding from a website makes your agent fetch that site, and the skill asks you to confirm first.

Is it safe to install?

It runs local Python scripts and writes HTML, SVG and PNG files, and saves brand profiles under ~/.diagram-design/profiles/. It asks before fetching any website. Read the file paths the agent proposes and review each generated file before you share it.

How is it different from Mermaid?

The skill says not to reproduce Mermaid's layout. It can import Mermaid source, but it redraws the diagram in its own editorial style instead of converting it.

Information

updated Nov 2, 2026

Repository
cathrynlavery/diagram-design
Folder
skills/diagram-design

cathrynlavery/diagram-designskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5
  1. diagram-design SKILL.md · github.com
  2. diagram-design README · github.com
  3. diagram-design PRIVACY.md · github.com
  4. export.md · github.com
  5. onboarding.md · github.com

Updated Nov 2, 2026.