diagram-design: Editorial Diagrams in Your Brand, Drawn by Your Coding Agent
diagram-design is an agent skill that draws diagrams as one self-contained HTML and SVG file in your brand, in Claude Code, Codex, Copilot or Cursor. It offers 44 types, imports draw.io and Excalidraw, exports PNG and SVG, and uses the MIT license.
When a developer asks a coding agent to draw an architecture diagram, the usual result is a block of Mermaid code that renders as grey boxes with shadows and random fonts. The repository cathrynlavery/diagram-design targets exactly this small but real pain. It is an agent skill: it teaches the agent to draw each diagram as one self-contained HTML and SVG file that opens with a double click and follows your own brand. The project claims 44 diagram types, and its slogan is blunt: no shadows, no Mermaid slop. The README also carries a Trendshift badge, a sign that developers are paying attention.
The workflow is deliberately light. The user asks in plain words, for example an architecture diagram with a frontend, a backend, a database and a Redis cache, or a quadrant of Q2 projects by impact and effort. The agent picks the diagram type, states its plan, and writes one .html file. Installation is a single command, npx skills add cathrynlavery/diagram-design. The skill targets any host that reads Agent Skills, and the README names Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf and Amp. This cross-host design means the skill is not tied to one vendor, which is the first reason it deserves attention.
The second reason is brand onboarding. A user can tell the agent to onboard diagram-design to their website, and the skill pulls the palette and fonts from that site, so every later diagram matches it. This turns diagram style from a throwaway prompt in each chat into a durable setting. For content and design teams, that is far more reliable than describing colors in a prompt again and again. The README also describes import paths from draw.io, Mermaid and Excalidraw, and export paths to PNG and SVG. Old assets need not be thrown away, and finished diagrams can move into documents and slide decks.
Distribution deserves a close look as well. In Claude Code, the plugin marketplace route gives updates and slash commands such as /export-diagram, /import-mermaid, /profile and /doctor. The standalone install through the skills CLI installs the Agent Skill only. It does not follow marketplace updates, so the user must run npx skills update diagram-design by hand. When the chosen host roots resolve to more than one skills directory, the CLI recommends symlinks: one canonical copy linked into each root, so one update reaches all of them. The flag --copy gives independent copies instead. Where symlinks are unavailable, such as Windows without Developer Mode, the CLI falls back to copies and reports which roots it copied. These details show that the author thought about version drift, the most common failure in multi-host setups.
On trust and provenance, the README is restrained. Official builds come only from this repository. LittleMight, the company of author Cathryn Lavery, publishes the plugin directory listings, and a listing under any other name is an unofficial copy. A PRIVACY.md file lists what the skill sends over the network. The project uses the MIT license and shows badges for continuous integration and plugin version. For a skill that an agent runs inside your codebase, a clear statement of origin and a disclosure of network behavior are the minimum a company should check before adoption.
Our assessment is that the value of diagram-design is not one more drawing tool. It packages design constraints as a skill that an agent can call. The output is a single HTML and SVG file, so it fits version control, supports reviewable diffs, and needs no outside rendering service. The risks are equally clear. The real quality of the 44 types must be judged by the user in the project gallery. Brand onboarding depends on how tidy the target website styles are. The skills ecosystem is still moving fast, so behavior may differ between hosts. We suggest that a team first draw its two or three most common diagram types, such as architecture and sequence, compare them with the current Mermaid workflow, and only then decide whether to roll the skill out more widely.
Sources
FAQ
What exactly is diagram-design, and how does it differ from Mermaid?
It is an agent skill, not a standalone drawing app. After the agent reads the skill, it writes one self-contained HTML and SVG file that opens with a double click. The project stresses no shadows and strict brand fit, and it treats default Mermaid-style output as something to avoid. It also offers an import path from Mermaid, so old diagrams can move over.
Which agent hosts does it support, and how do I install it?
The README says it works with any host that reads Agent Skills, and it names Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf and Amp. The general command is npx skills add cathrynlavery/diagram-design. In Claude Code you can also use the plugin marketplace to get updates and slash commands.
What should a team verify before adopting it?
Check provenance and privacy first. Official builds come only from the repository, and PRIVACY.md lists what the skill sends over the network. Then test two or three common diagram types, such as architecture and sequence, against your current workflow. Judge the quality of the 44 types yourself in the project gallery.