SkillFoxx

Type a name, a task or a service

Diagram Design

A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types

SkillEditors’ pick

Medium risk

We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.

Why this level

  • Writes HTML and SVG files into the project
  • During brand onboarding it fetches the given site page over the network
All reasons and checks

cathrynlavery/diagram-designAuthor:Cathryn Lavery

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/diagram-design

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Run in a terminal in the project folder

npx skills add cathrynlavery/diagram-design --skill diagram-design -a claude-code -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dc1ace4
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .claude/skills
cp -R "$tmp/skills/diagram-design" .claude/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add cathrynlavery/diagram-design --skill diagram-design -a cursor -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dc1ace4
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add cathrynlavery/diagram-design --skill diagram-design -a github-copilot -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dc1ace4
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .github/skills
cp -R "$tmp/skills/diagram-design" .github/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add cathrynlavery/diagram-design --skill diagram-design -a codex -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dc1ace4
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add cathrynlavery/diagram-design --skill diagram-design -a gemini-cli -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dc1ace4
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .devin/skills
cp -R "$tmp/skills/diagram-design" .devin/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Formerly Windsurf.

Run in a terminal in the project folder

npx skills add cathrynlavery/diagram-design --skill diagram-design -a cline -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dc1ace4
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .cline/skills
cp -R "$tmp/skills/diagram-design" .cline/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add cathrynlavery/diagram-design --skill diagram-design -a roo -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dc1ace4
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .roo/skills
cp -R "$tmp/skills/diagram-design" .roo/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

A fork of Roo Code, same .roo folders.

Run in a terminal in the project folder

npx skills add cathrynlavery/diagram-design --skill diagram-design -a opencode -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dc1ace4
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/diagram-design/
git -C "$tmp" checkout dc1ace47b99a419e42d01a03cb6ace5346efa8ae
mkdir -p .agents/skills
cp -R "$tmp/skills/diagram-design" .agents/skills/diagram-design

Commands for macOS and Linux, on Windows run them in Git Bash.

You will need: Node.js

Checked against the repository on Sep 24, 2026, commit dc1ace4.

Text for your agent

Install the skill: /plugin marketplace add cathrynlavery/diagram-design, then /plugin install diagram-design@diagram-design. For another agent copy the skills/diagram-design folder into its skills directory.

Other ways from the author
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

After installing, enable auto-update for the diagram-design marketplace in /plugin.

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.com

Limitations

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.

Security check

  • Writes HTML and SVG files into the project
  • During brand onboarding it fetches the given site page over the network

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.

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.**

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.

Official

Microsoft's utility and MCP server that turn PDF, Word, Excel, PowerPoint, HTML and other files into Markdown for models

MCP serverMedium riskNo VPN needed187.4K
Editors’ pick

Anthropic's official skill examples: docx, pdf, pptx and xlsx documents, design, MCP builder and the Agent Skills spec

SkillMedium risk178.8K
Editors’ pick

A skill that builds editable PPTX decks from PDF, DOCX, URLs and Markdown with native shapes, charts and animations

SkillMedium risk56.8K
Editors’ pick

Anthropic's legal plugin suite: contracts, privacy, employment, IP, litigation, AI governance and legal education

PluginMedium riskNeeds a VPN9.5K
Foxx AIDiagram Design

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.