Diagram Design skill
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
- 66,822 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Writes HTML and SVG files into the project
- During brand onboarding it fetches the given site page over the network
Install
- Works in
Manual install
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designAfter installing, enable auto-update for the diagram-design marketplace in /plugin.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Writes HTML and SVG files into the project
- During brand onboarding it fetches the given site page over the network
This is third-party code. Review the repository files before installing.
What it does
The skill gives the agent an opinionated diagram layout system and draws about forty types: architecture, flowcharts, sequence and state diagrams, ER and database schemas, timelines, swimlanes, quadrants, radars, pyramids, trees, layer stacks, Venn, Sankey, fishbone, Wardley map, kanban, user journey, bar and line charts, Gantt and more. Each diagram is a standalone HTML file with inline SVG and CSS, with no build step, no JavaScript and no external images, in three variants: minimal light, minimal dark and full editorial. On request the skill reads a site's homepage, extracts its palette and fonts and applies them across every diagram. It also redraws draw.io, Mermaid and Excalidraw sources at a chosen size and level of detail.
Who it is for. For developers, designers, technical writers and product managers who need clean diagrams in their project's style.
Good fit when
- You need an architecture sketch or flowchart that looks on-brand rather than templated
- You need to redraw a Mermaid, draw.io or Excalidraw source into clean HTML and SVG
- You need diagram colors and fonts matched to your project's site
Not a fit when
- A table, a list or a single sentence is enough
- You need an editable source in a specific editor's format rather than finished HTML
Example request
Draw an architecture diagram of our service in HTML and match the colors to example.comLimitations
The skill produces static HTML and SVG files; it is not an interactive diagram editor. Brand matching works from a site's public homepage, so for gated or complex pages you set the palette and fonts by hand. A managed marketplace install can overwrite edits in references/style-guide.md on update, and for hand-editing the style the author suggests cloning the repository and installing the local path.
How to disable. Remove the diagram-design plugin via /plugin in Claude Code, or delete the skill folder from your agent's skills directory.
FAQ
Do I have to export the diagrams somewhere?
No. Each file is standalone HTML with inline SVG and CSS; it opens directly in a browser, with no build step or external dependencies.
Can I apply brand colors?
Yes. Ask it to onboard from your site URL; the skill pulls the palette and fonts from the homepage, shows a proposed diff and writes them into the style after you confirm.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
A skill that draws a system architecture diagram as one HTML file with SVG plus copy, PNG and PDF export
A skill drawing diagrams with Chinese typography: 45 types, one HTML file, no external fonts, SVG and PNG export, Mermaid redraw.
A skill that reads a repository, article or PDF and draws an interactive architecture diagram with animated data flows
A skill that draws an Excalidraw-style diagram from a text prompt and returns an editor link, an animation and a PNG.
A skill for editable draw.io diagrams from text, code, Terraform, Kubernetes, SQL and OpenAPI, with export and self-checks
Comparison with similar tools
Cards that share the main search query, and how they differ.
README in short
The README presents an agent skill that draws editorial diagrams as standalone HTML and SVG files with no shadows and no Mermaid-style output. It claims about forty types, each in three variants: minimal light, minimal dark and full editorial. It describes onboarding separately: the skill reads a site, extracts its palette and fonts and applies them across diagrams, and it also redraws draw.io, Mermaid and Excalidraw sources. Install commands are given for Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro and OpenCode. MIT licensed.
README badge
Original SKILL.md
--- name: diagram-design description: Create branded architecture, 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, Venn, pyramid/funnel, treemap, bar, waterfall, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, or database schema diagrams as standalone HTML/SVG/PNG. Redraw .drawio/.drawio.png/.drawio.svg, Mermaid .mmd, or Excalidraw .excalidraw sources at a chosen size/detail; onboard brand tokens from a website; add lifecycle phase maps, semantic patterns, callouts, accessible motion, or sketchy/hand-drawn styling. license: MIT metadata: version: "2.6" --- # Diagram Design Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system. Forty visual types. Semantic patterns describe behavior independently; type references describe layout. Details load from `references/` only when selected. ## 1. Philosophy **The highest-quality move is usually deletion.** - Every node represents a distinct idea. Two nodes that always travel together are one node. - Every connection carries information. If the relationship is obvious from layout, remove the line. - Coral is editorial, not a flag. 1-2 focal nodes per diagram. - The schematic isn't done when everything is added. It's done when nothing can be removed. **Target density: 4/10.**