mrkeyoor.com_
Tue 10 Nov 00:38 UTC
Dev Toolsevaluationupdated 01 Oct 2026

diagram-design review

Diagram Design is an agent skill that turns a written brief, Mermaid block, draw.io file, or Excalidraw scene into styled HTML and SVG diagrams. It gives Claude Code, Codex, and other compatible agents a fixed visual system so teams do not have to redraw every architecture or process graphic by hand.

+1,533stars / 7d
Verdict

Our sandbox installed 35 packages in 20 seconds and built commit 57148ac in 11 seconds, so Diagram Design is inexpensive to try even though our harness found no standard test target. Use it when an agent already writes your documentation and visual consistency matters more than preserving source geometry. Keep it out of unattended pipelines until the first-run style gate has a documented noninteractive path.

We ran it

Lab card: what happened when we ran diagram-designScreenshot of diagram-design (cathrynlavery.github.io/diagram-design)
Install✓ · 20s35 packages · 37 MB
Build✓ · 11s
Testsn/ano test script
Known vulns0(pip-audit)
Repo474 files~42,413 lines of source · 15.5 MB · 3 CI workflows

Answers from our run

Does diagram-design build from source?

Dependencies installed in 20 seconds (35 packages), and the build succeeded in 11 seconds. We cloned commit 57148ac into a clean Debian container with 3 CPUs and no project-specific setup.

Does diagram-design have tests you can run?

Not through a standard command: the project exposes no test script or target that our harness could run.

Does diagram-design have known vulnerabilities in its dependencies?

pip-audit found none in the dependency tree at the time of our run.

Who should not use diagram-design?

Unattended pipelines that cannot pause for input: open issue 262 says the first-run style gate has no explicit noninteractive path.

What are the alternatives to diagram-design?

Mermaid, D2, Excalidraw. Our sandbox installed 35 packages in 20 seconds and built commit 57148ac in 11 seconds, so Diagram Design is inexpensive to try even though our harness found no standard test target.

Setup4/520-second install; PNG export adds Playwright and Chromium
Docs5/5Detailed host, import, export, accessibility, and privacy guidance
Community5/543,031 stars and an active 27-item issue and PR queue
Maturity4/5Custom CI gates are extensive; no standard test target was found

Who it’s for

Developers who already use Claude Code, Codex, Pi, or another Agent Skills host.
Documentation teams that want architecture and process diagrams to share one visual grammar.
Agencies willing to save brand profiles and review agent-generated HTML before publishing.
Teams that need editable SVG or PNG exports from the same diagram source.

Who it’s NOT for

Unattended pipelines that cannot pause for input: open issue 262 says the first-run style gate has no explicit noninteractive path.
Arabic or other right-to-left documentation today: issue 254 records missing bidi, font, and mirrored-layout guidance.
Teams that forbid font requests to third parties: generated files load Google Fonts unless you remove the link or open them offline.
Projects that require a conventional test command as a release gate: our harness found no tests script or target and skipped that step.
Developers who want source coordinates preserved during import: the README says draw.io, Mermaid, and Excalidraw geometry is redrawn rather than carried over.

Setup reality

Our sandbox installed commit 57148ac in 20 seconds, adding 35 Python packages and using 37 MB on disk. The build then succeeded in 11 seconds. Our harness found no tests script or target, so it skipped tests; pip-audit reported 0 known vulnerabilities.

The default static output needs no Diagram Design account, hosted service, or project secret. You do need a supported agent host. Brand onboarding fetches the website you name, and generated pages request Google Fonts unless you remove those links or work offline.

HTML and SVG are the easy path. PNG export needs Playwright and Chromium, while custom local edits can be replaced by managed plugin updates unless you use a saved profile or editable checkout.

Forty-two diagram types replace a blank canvas with rules

Diagram Design gives an AI coding agent a visual system rather than another drawing surface. The README lists 42 types, covering familiar architecture, sequence, state, timeline, and data-model work alongside Sankey, Wardley, journey, deployment, and database-schema layouts. Each type comes with light, dark, and editorial variants. A request becomes one self-contained HTML file with inline SVG, which you can open locally or place in documentation.

The useful constraint is deletion. The skill asks the agent to choose a type, limit node density, reserve one accent for the important part, and load only the relevant reference. That should produce a more coherent result than prompting an agent to improvise SVG from scratch. It also means you are accepting this project's taste. Our 15.5 MB checkout contained 474 files and about 42,413 lines of source, much of it devoted to examples, references, import rules, and validators.

Imports preserve meaning while replacing the original layout

The import paths accept draw.io containers, Mermaid files or Markdown fences, and Excalidraw JSON scenes. Diagram Design extracts components, relationships, grouping, and direction, then redraws them in its own grid and palette. You choose a destination size, output format, audience, and one of three detail levels. The resulting fidelity ledger lists what the agent kept, collapsed, or dropped, which is the right place to catch a missing service or decision branch.

Import rewrites the source rather than round-tripping it. The README explicitly says source coordinates, fonts, colors, and renderer layout do not carry over. A carefully placed Excalidraw sketch will come back as the skill's composition, and a Mermaid diagram will lose its automatic geometry. That bargain makes sense when 42 shared layouts are the goal. In the 15.5 MB checkout we reviewed, the tool was a bad fit for preserving pixel positions or producing the same picture from a text-only diff without an agent.

Brand onboarding changes files and can stop an unattended job

Onboarding can fetch a public site, map its background, text, accent, and font choices into semantic roles, then show a proposed change before writing it. Saved profiles let an agency reuse that result across projects. The first-use guard is deliberate: if the style guide still has its default palette, the skill pauses and asks whether to onboard, enter tokens, or continue with the default.

That prompt creates a real automation limit. Open issue 262 describes an unattended multi-diagram run that reached the style gate with nobody available to answer. The proposed noninteractive path was still an issue when we checked. The 37 MB installed footprint does not make this a background-safe batch tool by itself. If diagrams run from cron or CI, settle the profile and first-run behavior before putting the command on a schedule.

What happened when we ran it

Our sandbox installed commit 57148ac in 20 seconds. It added 35 Python packages and occupied 37 MB on disk. The build completed successfully in another 11 seconds inside an unprivileged Debian container with 3 CPUs, 8 GB of RAM, Python 3.12, and no secrets. Pip-audit found 0 known vulnerabilities. Those figures cover repository setup and build work, not diagram quality or export speed.

The test stage was skipped because our harness found no tests script or target. That does not mean the repository lacks checks. Its README describes custom Python validators for skins, geometry, imports, motion, accessibility, documentation links, and rendered output, plus CI on Linux, Windows, and macOS. The narrower finding is that commit 57148ac did not expose the conventional test entry point our sandbox expected, so adopters should map the project's checker commands into their own release job.

Static files are simple; raster export adds a browser

Ordinary output is static HTML and SVG with no app server. Motion is optional, the complete static frame remains available, and reduced-motion behavior is specified. PNG export is heavier: the documented route installs Playwright and Chromium, waits for fonts, and captures the diagram. Generated pages request Google Fonts by default. The privacy document says removing the font link or opening the file offline uses system fallbacks instead.

That font choice affects both privacy and layout. A browser opening the normal file contacts Google, while offline rendering changes the typefaces and can change text fit. The repository's rendered-layout checker therefore has separate default and real-font modes. Our 11-second build did not exercise a production export workload, so teams shipping slide decks should test their own longest labels, chosen scale, and offline policy instead of treating a successful build as visual approval.

Current activity is strong, with two practical gaps still open

GitHub showed 43,031 stars, an October 1, 2026 push, and 27 open issues and pull requests combined. The API split that queue into 15 issues and 12 pull requests. There was no latest GitHub release and the tags endpoint returned no tags, so update tracking follows repository commits and marketplace behavior rather than a conventional release page. The active queue and recent push point to maintained work, while the missing release channel deserves an explicit pinning policy.

Two open defects can decide adoption. Issue 254 says Arabic and other right-to-left output lacks documented bidi, font, and mirrored-layout rules. Issue 161 reports 2.86:1 contrast for the default accent on the paper color, even though the templates include accessible names and the onboarding flow checks text contrast. Neither gap was exercised by our 3-CPU sandbox build. Diagram Design is a strong fit for agent-written English technical documentation, provided a human reviews the generated file. RTL publishing and hands-off batch generation should wait for their named gaps to close.

Alternatives

ProjectWhat it isPick it when
Mermaid gh↗A text syntax and renderer for diagrams embedded in Markdown and web pages.pick this instead when reviewable text source and broad documentation support matter more than editorial styling.
D2 gh↗A declarative diagram language with multiple layout engines and export formats.pick this instead when you want deterministic diagram source without putting an AI agent in the authoring loop.
Excalidraw gh↗A collaborative canvas for hand-drawn diagrams and whiteboards.pick this instead when several people need to sketch and rearrange a diagram directly in a browser.

What people are saying

  1. [github-trending] cathrynlavery/diagram-design

Sources

  1. Diagram Design repository
  2. Diagram Design README
  3. Diagram Design privacy policy
  4. Unattended style-gate issue
  5. RTL and Arabic support issue
  6. Default palette contrast issue

More dev tools reviews

OpenSandbox · You-Dont-Know-JS · evilginx2 · google-colab-cli · mujoco · SteamTools · the whole board →