Diagram Design draws 44 chart types as a single HTML file
Diagram Design is a free MIT-licensed agent skill by Cathryn Lavery that gets a coding agent to draw architecture charts, flowcharts, timelines, Gantt charts and 40 other diagram types as a single HTML file with inline SVG, rather than the usual Mermaid markup. The repository has 49.1k stars on GitHub and sits at rank 22 on Trendshift's daily list on 10 October.
Image: GitHub
Why it mattersA team that drafts a diagram with Mermaid still has to re-render it in a different tool to export a PNG, change a colour or hand it to a reader without a GitHub account, and a single-file HTML output that any agent can edit in place removes that round trip.
A product manager who asks a coding agent for an architecture diagram usually gets back Mermaid markup, which only renders inside a tool that reads Mermaid, and which an agent cannot edit visually once it is drawn. Diagram Design, an MIT-licensed agent skill by Cathryn Lavery, gets the agent to write the diagram as a single HTML file with inline SVG that any browser opens and any agent can rewrite. The repository has 49.1k stars on GitHub and ranked 22nd on Trendshift's daily list on 10 October.
The skill covers 44 diagram types, named in the README: architecture, flowchart, sequence, state machine, timeline, ER data model, swimlane, quadrant, radar, Venn, pyramid, Gantt, bar chart, line chart, treemap, scatter plot, Sankey, fishbone, Wardley map, Kanban, user journey, dependency graph, UML class, database schema, heatmap and 19 more. A reader asks the agent in plain language, and the agent writes an HTML file against the skill.
How it is installed
The install command is npx skills add cathrynlavery/diagram-design, and the README states that the skill works with Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Pi, Cline, Gemini CLI, Windsurf, Amp, Zed, Warp, Roo, Kilo and Kiro, with marketplace commands for the five that have one. The repository has 3.1k forks, 283 commits and an MIT licence.
What the output looks like
Each diagram is one .html file with inline SVG. The README states that the output has no shadows, uses 1px hairlines, and that every coordinate, width and gap is divisible by 4. The design rules the skill enforces are one accent colour, one or two focal elements, and three font families. SVG and PNG export is possible from the HTML.
The README compares this to Mermaid directly. Mermaid output is text that renders on GitHub and is an editable source format. Diagram Design output is one HTML file with inline SVG and is not an editable source format, so a change goes back through the agent rather than through a diff in a text file. The design rules the skill enforces are the trade for that. A Mermaid chart that an agent writes in two seconds is laid out by Mermaid's own layout engine, and the lines land where they land. A Diagram Design chart is positioned on a 4-pixel grid by the agent that drew it.
Lavery runs littlemight.com and has previously built ShipRank and BestSelf.co. The skill is work she first wrote for her own blog. A diagram drawn by hand in a vector editor is work a product manager, marketer or founder usually skips, because the illustrator time or Figma session is more than the diagram is worth. A single prompt that lands a scaled HTML file is a different trade.
Source
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.