Your agent draws editorial diagrams in your brand, as one self-contained HTML and SVG file, and redraws Mermaid, draw.io and Excalidraw.
by cathrynlavery· DesignUnclaimed · Yours? Claim it
4 images
About
Cathryn Lavery's Diagram Design is a plugin and Agent Skill that gives your agent one opinionated editorial style for diagrams. Describe what you need in plain words: the agent picks the diagram type, says what it plans to draw, and writes one self-contained HTML file with inline SVG that opens in any browser. The style is strict: one accent colour for the one or two things that matter, 1px hairlines, no shadows, and every coordinate on a 4px grid. What you can do with it - Draw 45 diagram types, from architecture, flowcharts, sequence diagrams and state machines to ER and database schemas, timelines, swimlanes, quadrants, Gantt charts, Sankey diagrams, Wardley maps and org charts - Match your brand: point it at your website and it pulls your palette and fonts into its style guide, checking contrast first - Save each brand as a named profile, so different clients or projects keep their own look - Redraw existing draw.io, Mermaid and Excalidraw files in this style, sized for a doc, a slide, a social card or print, with a list of what it merged or dropped - Export the diagram as a standalone SVG (for Figma or Illustrator) or a PNG How to install it In Claude Code, run /plugin marketplace add cathrynlavery/diagram-design, then /plugin install diagram-design@diagram-design. That also adds its commands: /diagram-design:export-diagram, the draw.io, Mermaid and Excalidraw imports, /diagram-design:profile and /diagram-design:doctor. Codex, GitHub Copilot and Factory Droid install it from the same repository's marketplace, and the skill alone installs in Cursor and other Agent Skills hosts with npx skills add cathrynlavery/diagram-design. Good to know - It has no server, account or telemetry. Diagrams load their fonts from Google Fonts unless you ask for system fonts. - PNG export needs Playwright with Chromium (pip install playwright, then playwright install chromium). - The first time you use it in a project, it asks whether to set up your brand or keep its default jet-black and tangerine style. - The result is a finished diagram, not an editable source format. For diagrams in Git that change every sprint, the maker says Mermaid is still the better fit. - Official builds come only from the cathrynlavery/diagram-design repository.
Once it’s added
“Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”
“I need a quadrant showing Q2 projects by impact vs effort.”
“Give me a sequence of a bearer call with token refresh on 401.”
“Onboard diagram-design to https://example.com so my diagrams match the site.”
“Redraw this draw.io file for my deck.”
“Export this diagram as SVG and PNG.”
Before you add it
Reads only
Your diagram requests, and the draw.io, Mermaid or Excalidraw files you point it at · Your website's colours and fonts, when you ask it to match your brand
Makes changes · your agent can ask first
Writes each diagram as one HTML file with inline SVG · Exports SVG and PNG files · Saves your brand to its style guide or a named profile
Each with its own page
From people who use it
Step by step
Nothing new reaches your agent until a person has looked at it.
No reviews yet. Used Diagram Design? Say how it went.
Write a reviewRuns on your machine.
Runs on your machine.
/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-design
Scanned and passed · checked 3 h ago
Nobody has shared how they use Diagram Design yet.
Plugins people install alongside Diagram Design.
Scanned on every change, and again when our rules improve.
Claude CodeSupported
OpenClawSupportedTell us and a person on the trust team will look at it. Or email [email protected].
Plugins people install alongside Diagram Design.
Connects your coding agent to OpenDesign on your machine: start design runs, create projects and read the live files of your prototypes.
Reviews your frontend code and live pages against the Front-End Checklist rules for accessibility, performance, SEO and security.
Gives your agent a live tldraw canvas in the chat, so it can draw diagrams, flows and sketches with you.
A community skill that asks four questions about your product, then has your agent build an animated, single-file HTML landing page.
Security scan
Passed
Safe to install in every agent it supports. Claude plugins.
