An agent draws a diagram, the picture looks right, and the question that actually matters arrives six weeks later: a service gets renamed and someone has to move one box. Whether that is a two-line edit or a fresh generation was decided the moment the skill chose its output format — and most of these skills choose without telling you. The default answer is hand-written SVG inside a standalone HTML file. That file is a deliverable, not a source. There is nothing in it to edit that a person would want to edit twice.
The useful thing to shop for, then, is not picture quality. It is whether the skill knows which artefact it produces and says so. A few here do: one opens with a routing table that sends the request to a different format entirely, and rules that a text diagram wins any tie. Another declares in its own front matter that it is a port of somebody else's document. Read for that, and the choice gets easy.
Top picks
Five output formats, six picks: the extra one owns a step rather than a format, and it is the step where the first pick's output usually breaks. The lower rows are same-name variants and close alternatives discussed further down — they are here so the licence and date facts sit in one place.
| skill | publisher | license | verdict | updated |
|---|---|---|---|---|
| markdown-mermaid-writing | K-Dense-AI | MIT | Top pick | 2026-07-28 |
| mermaid-graph-renderer | curiositech | MIT | Top pick | 2026-07-14 |
| moai-domain-svg-infographic | modu-ai | Apache-2.0 | Top pick | 2026-07-28 |
| drawio-aws | sparklabx | MIT | Top pick | 2026-07-18 |
| archify | tt-a1i | MIT | Top pick | 2026-07-27 |
| build-dashboard | anthropics | Apache-2.0 | Top pick | 2026-07-28 |
| diagram-design | cathrynlavery | MIT | Alternative | 2026-07-15 |
| architecture-diagram | Cocoon-AI | MIT | Alternative | 2026-05-13 |
| drawio-bpmn | sparklabx | MIT | Alternative | 2026-07-18 |
| architecture-diagram | NousResearch | MIT | Same-name variant | 2026-07-28 |
| architecture-diagram | moltis-org | MIT | Same-name variant | 2026-07-27 |
| architecture-diagram | mateaix | Apache-2.0 | Same-name variant | 2026-07-26 |
| Architecture Diagram | pedronauck | none declared | Same-name variant | 2026-07-26 |
| architecture-diagram | CoWork-OS | MIT | Same-name variant | 2026-07-27 |
| Diagram Design | alfredolopez80 | NOASSERTION | Same-name variant | 2026-07-26 |
Diagrams that live in the document: K-Dense-AI's markdown-mermaid-writing
markdown-mermaid-writing makes the committed markdown file the source of truth and treats any rendered image as a downstream copy. It routes across 24 diagram types before drawing, so a chronology becomes a timeline rather than yet another flowchart, and it carries 9 document templates for the surrounding prose. The house rules are specific enough to be worth stealing: accessibility title and description on every diagram that supports them, no %%{init} directives because they break GitHub dark mode, and styling through classDef instead of inline style.
The caveat is provenance. The catalogue records MIT, the front matter declares Apache-2.0, and the skill's own attribution section explains why: the style guides and templates are ported from another repository under Apache-2.0, with headers retained. Fine to use, worth resolving before redistributing.
The step where a good diagram breaks: curiositech's mermaid-graph-renderer
Writing Mermaid and rendering it are separate jobs, and mermaid-graph-renderer only does the second one. It starts from where the render happens and how many diagrams there are, then commits to a verdict rather than listing options — lazy-load in the browser, and treat build-time rendering as usually not worth the roughly 280 MB and the build-time hit.
The detail that earns the install is a failure most people meet after the fact: SVG files out of the official CLI carry <foreignObject> elements that break in Inkscape and rsvg-convert. The fix is one config key or exporting PNG instead. Its speed table needs its own footnote read alongside it: the table puts the native Rust renderer at about 3 ms per diagram against roughly 3000 ms, and charges that gap to starting a headless browser once per invocation. That is a per-diagram figure, not a throughput figure, and the Rust path buys it by covering 13 diagram types instead of all of them.
A static image with the geometry computed first: modu-ai's moai-domain-svg-infographic
Plenty of these skills open by narrowing their own scope — a look-elsewhere-first list, a do-not-use-when line, a not-for-this section. moai-domain-svg-infographic is the one that goes further and writes down a tie-break. Its routing table sends markdown-embedded, frequently-changing, standard-shaped diagrams back to Mermaid, and when signals point both ways Mermaid wins by default — a stated preference for a format this skill does not produce, argued on maintenance cost rather than on how the picture turns out. A scope list tells you what a skill is bad at; a tie-break tells you what it will give up. What survives that filter gets a genuine method: a numeric box table with containment checks before a single SVG element is written, connector endpoints derived by formula, and a CJK-first font stack because a line of Korean or Japanese holds roughly 60% of the characters a Latin line holds at the same size.
Its degradation table is the part to copy. Node 18 and a headless browser are needed only to lint and render, and a PNG size or lint verdict for a command that never ran must never be reported.
A file someone else can keep editing: sparklabx's drawio-aws
drawio-aws exists for the case where the diagram has to survive being handed to a person who owns a diagram editor, with the right vendor icons on it. It is deliberately a thin front end: a CLI holds the layout engine, the icon search, and the validator, and the skill forbids hand-written coordinates and recolouring AWS icons. The domain notes carry the thing an agent reliably gets wrong from general knowledge — the container nesting runs AWS Cloud, Region, VPC, AZ, Subnet, Security Group, and managed services such as CloudFront, Route 53, S3, DynamoDB and SQS/SNS sit outside the VPC entirely.
The caveat is setup. The kit installs globally from GitHub, and the skill will not run that install for you.
An explorable page with a receipt: tt-a1i's archify
archify authors a small typed JSON specification and renders it to a self-contained HTML page with pan, zoom, search and theme switching already in it. The JSON is the source; the page is the build output. Its validation contract is unusually strict about honesty: a receipt showing only 4 artifact checks is basic validation and not showcase acceptance, a showcase pass must report all 9 checks clean, and a non-zero exit can never be described as success. Delivery freezes the specification bytes and reports SHA-256 and byte counts for both files.
One thing to know before feeding it Mermaid: it reads Mermaid for topology and then authors fresh, so the conversion is one-way.
Numbers that keep changing: anthropics' build-dashboard
build-dashboard is the right shape when the visual is a reading instrument rather than a picture — KPI cards, a primary chart, a sortable detail table, and filters that update every chart and the table together. Query results are embedded as JSON directly in the file, which is what makes it shareable as a single attachment.
Read the template before promising anyone an offline artefact. The body states plainly, in its own capability list, that the dashboard needs no network at all. The template a few sections later loads Chart.js 4.5.1 and its date adapter from a CDN with integrity hashes, and no local-copy alternative appears anywhere in the file. Both claims are in the same document, and only one of them survives an air-gapped machine: the data does travel inside the page, the library does not, and with no network the charts have nothing to draw with.
Where the same-name rows come from
Several of them are literally the same document, and they say so in their own front matter — with a precision the descriptions never carry.
Cocoon-AI's architecture-diagram is the document the others point at — a dark, grid-backed HTML page with a semantic colour table for frontend, backend, database, cloud, security and message bus. NousResearch's copy names Cocoon AI as author and itself as a port. moltis-org's declares an origin block pointing at that port, pinned to a specific version string. mateaix's carries the same body plus one real addition — a step that rasterises the HTML when the diagram has to be delivered through a chat channel that cannot display it otherwise. pedronauck's credits the same origin in its metadata. CoWork-OS's is a genuinely different document: routing rules, positive and negative trigger examples, a typed parameter table, and a bundled HTML template it starts from rather than a design system it recites.
This is not confined to one name. winstonkoh87's dashboard-builder states in its front matter that it is taken from the Anthropic plugin above, with a date, and describes its own adaptation: enterprise connectors stripped, its own data patterns added. That is the honest form of a copy, and it is a better read than a silent one.
The same pattern repeats one name over: cathrynlavery's diagram-design and alfredolopez80's Diagram Design share a first-run gate that stops and offers to pull brand colours and fonts off your website before generating anything, along with the same restraint philosophy and the same density target. They are not the same size: one covers 27 diagram types and the other 13, and only the smaller one credits an author in its metadata. Even archify declares a based_on line pointing at the same Cocoon-AI generator, several rewrites downstream.
A declared upstream is not a mark against a skill, and it is not a reason to install it either. The upstream is almost always still published, so the only question it raises is what the extra hop bought: mateaix bought a delivery step, and the larger Diagram Design bought fourteen more diagram types at the price of the author line its smaller sibling still carries. Where a copy declares one licence and the catalogue shows another, resolve that before building on it — and note that this happens twice in the table above, not once. pedronauck's row shows no licence while its own front matter names one; alfredolopez80's row reads NOASSERTION while its front matter declares MIT.
Which output should you ask for?
Ask for the artefact, then pick the skill; the reverse order is how projects end up with a diagram nobody can edit.
If the diagram belongs to a document, changes with the prose around it, and needs to survive review in a pull request, it is Mermaid in markdown, rendered on demand. If it is going into a deck, an email, or a printed page and needs exact positioning, it is authored SVG plus a raster. If someone outside the repository will open and change it, or it needs correct vendor iconography, it is a .drawio file — and if the subject is a business process rather than infrastructure, drawio-bpmn applies swimlane and notation rules that generic diagram skills do not have. If the reader needs to explore rather than look, generate an interactive page. If the content is numbers on a refresh cycle, build a dashboard.
The rule worth carrying across all of them: one diagram, one home. A Mermaid block and an exported SVG of the same diagram will drift apart, and the drift is silent. Pick the format that matches the diagram's real lifetime, delete the other one, and regenerate the rendered copy from the source whenever it matters.
What this leaves you with
The rename six weeks out is now a small job. The diagrams that belong to the codebase are text in the repository, so the change is a line in a fenced block and the render happens in CI. The diagram that had to be a picture was authored deliberately, once, with the geometry computed rather than nudged. The one an external team edits is a real editor file with real icons. Nothing is trapped inside a hand-written SVG whose only update path is asking for the whole thing again.
That was the decision hiding behind every one of these skills, and it was never about which one draws the nicest boxes.
More skills worth a look
Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
anthropic-style-diagramAnthropic Style Diagram generates semantic SVGs following Anthropic's visual language and design system, then renders them to PNG. The skill handles architecture, flow, and structural diagrams—automatically managing colors, themes, viewBox cropping, and style baking. Author the geometry and meaning; the rendering pipeline owns the design.
dashmotionDashmotion generates professional animated technical diagrams as single self-contained HTML+SVG files. Use it for flowcharts, workflows, architecture diagrams, and system topologies—especially when you want connectors that visibly flow and requests that travel as light dots through the system. Output is lightweight, loops forever, and opens in any browser without dependencies.
Flow DiagramFlow Diagram generates a single self-contained HTML file that visualizes system architectures and request/response flows with a 2-pane layout: an interactive diagram on the left with zoom, pan, and fit-to-view controls, and an explainer sidebar on the right. Click any flow to highlight it with traveling dots along arrows, dim everything else, and reveal its details. Two-way arrows (solid outbound, dashed return) carry numbered step badges colored by semantic meaning—red for auth, purple for scheduled tasks, amber for data pipelines.
mermaid-toolsMermaid Tools extracts diagram code from markdown files and renders them as high-resolution PNG images. The skill bundles all necessary scripts and supports custom sizing, smart dimension detection by diagram type, and print-quality output scaling.
pretty-mermaidPretty Mermaid converts Mermaid diagram code into polished SVG graphics or terminal-friendly ASCII output. Choose from 15 built-in themes optimized for dark and light documentation, customize colors and fonts, or batch-process multiple diagrams in parallel.
C4 DiagramsBuild architecture diagrams following Simon Brown's C4 model, which organizes system structure into focused maps at different abstraction levels—each designed for a specific audience. Choose between Mermaid (default, renders natively on GitHub), Structurizr DSL (for multi-level models), or D2/PlantUML. Start with System Context and Container diagrams; add Component and Code layers only when they clarify design.
c4-architectureCreate software architecture documentation using C4 model diagrams rendered in Mermaid. The skill guides you through selecting the right abstraction level—from system context through deployment—and generates properly structured diagrams with clear relationships and technology labels.
chartingCharting & Diagrams generates interactive Mermaid visualizations across 23 diagram types—from flowcharts and class diagrams to Gantt charts, pie charts, and architecture layouts. Output diagrams as code blocks that render automatically, supporting everything from workflow logic and database schemas to project timelines and system design.
drawio-azuredrawio-azure produces correct Azure architecture diagrams by leveraging a declarative layout engine that enforces resource hierarchy, validates icon placement and colors, and runs automated visual verification. Built on the drawio-ai-kit, it handles VNets, App Service, AKS, landing zones, and multi-region setups with ground-truth Azure stencils.
drawio-databricksCreate accurate Databricks lakehouse architecture diagrams in draw.io format, complete with medallion layer structure (Bronze/Silver/Gold), Delta Lake, Unity Catalog, and deployment topology. The skill uses a declarative layout engine with ground-truth stencils, validates geometry and nesting, and runs vision-based self-checks before output.
fireworks-tech-graphFireworks Tech Graph turns descriptions of systems and engineering concepts into polished technical diagrams—architecture charts, data flows, sequence diagrams, C4 models, and more—then exports them as SVG, PNG, interactive HTML, or animated GIF. The skill validates geometry and syntax automatically, supports multiple diagram styles, and works offline.
Technical Diagram SkillTechnical Diagram Skill renders system architectures, workflows, sequences, data pipelines, and state machines as self-contained HTML files with dark/light theming, native export to PNG/JPEG/WebP, and dual-theme SVG output. Choose from five diagram types—architecture, workflow, sequence, dataflow, and lifecycle—each with a JSON schema and renderer, or hand-place SVG when command execution is unavailable.
dashboard-creatorDashboard Creator generates self-contained HTML dashboards featuring KPI metric cards with trend indicators, SVG-based bar/pie/line charts, and progress bars. Perfect for building performance monitoring interfaces and analytics displays from your data.