Coding agents and dev tools · Edition No. 49 · 13 Oct 2026

cathrynlavery/diagram-design

An agent skill that makes a coding assistant produce one self-contained HTML and SVG diagram from a description in ordinary words.

← Coding agents and dev toolsRead the whole edition →
diagram-design: diagrams by instruction. Tells a coding assistant how to draw a diagram.

52,560 stars · MIT from the repository sidebar. · NO RELEASES. The repository links a CHANGELOG.md and publishes no tagged release, so an install tracks whatever is in the repository that day. ungh.cc gives createdAt 2026-04-16T18:01:16Z and pushedAt 2026-10-12T23:28:49Z. · Track this in Scout

An agent skill that makes a coding assistant produce one self-contained HTML and SVG diagram from a description in ordinary words.

▶Repo detailsthe review · specs · pros & cons · install

What it does

You install it into a coding assistant with one command, then describe the diagram in plain language. The assistant writes one HTML file containing the picture as SVG, a drawing format that stays sharp at any size, and that file opens in any browser with nothing else needed. It covers 44 diagram types, each in a light version, a dark version and a fuller editorial version. It can be pointed at a website and take its colours and typefaces from there, so the picture matches. It can also read an existing draw.io, Mermaid or Excalidraw file and redraw it in the same style. Output can be exported as SVG or PNG. It supports several assistants: Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Pi, Kiro and OpenCode, each with its own install command. The repository was created on 16 April 2026 and has 52,560 stars. What it does not include is a program. There is nothing to run on its own, there are no releases to pin a version to, and the quality of the picture depends on the assistant reading the instructions.

Why it matters

Who it suits. Anyone who uses a coding assistant daily and needs diagrams for documentation, a README or a slide — architecture pictures, sequence diagrams, state machines. It fits especially well where the diagram has to match a brand, because matching colours and typefaces by hand is the slow part. Skip it if you do not use one of the supported assistants, because there is nothing here that works without one.

Verdict. Worth installing in the five minutes it takes if an assistant is already part of the working day, and worth nothing at all otherwise. The star count is the striking fact — created in April 2026 and the most-starred project in this edition — but a star records that somebody liked a repository once, and this one has no releases and no version history to judge instead. The honest comparison is mermaid-js/mermaid at 90,620 stars, which is a real library: you write a short text description and it draws the diagram, with no assistant involved and a result that renders inside Markdown on GitHub. Choose Mermaid when the diagram should live in the document as text. Choose this when the diagram has to look designed and an assistant is doing the writing. excalidraw/excalidraw at 133,718 stars remains the answer when a person wants to draw by hand, and Edition 25 covered it.

Stars52,560
LicenceMIT from the repository sidebar.
LatestNO RELEASES. The repository links a CHANGELOG.md and publishes no tagged release, so an install tracks whatever is in the repository that day. ungh.cc gives createdAt 2026-04-16T18:01:16Z and pushedAt 2026-10-12T23:28:49Z.
Good
  • One file of HTML and SVG per diagram, which opens anywhere and needs no viewer.
  • It can take colours and typefaces from a website, so pictures match a brand without manual work.
  • It redraws existing draw.io, Mermaid and Excalidraw files rather than starting from nothing.
Watch for
  • Not a program: without one of the supported assistants there is nothing to use.
  • No releases at all, so an install tracks whatever is in the repository that day.
  • Six months old and growing very fast, so the instructions it ships will keep changing under you.
Similar repositories
Install
npx skills add cathrynlavery/diagram-design
Screenshots
cathrynlavery/diagram-design: GitHub preview cardcathrynlavery/diagram-design: Screenshot 1cathrynlavery/diagram-design: Screenshot 2cathrynlavery/diagram-design: Screenshot 3cathrynlavery/diagram-design: Screenshot 4

Get the next edition in your inbox

A dozen repositories, opened and checked. The licence read, the last release dated, and the ones that did not make it named with the reason. It is the half most lists leave out.

No tracking pixels. One click to leave. The archive stays free either way.

We use your address to send the edition and nothing else. Confirm by email, leave in one click. How we handle it.