Thirty-nine types replace the blank-canvas problem
Diagram Design is a set of agent instructions, references, scripts, and reusable assets for producing self-contained HTML with inline SVG. It does not introduce a new canvas or graph engine. Its main idea is that a coding agent draws better when it receives explicit constraints about type, spacing, connectors, palette, density, and accessibility.
The README lists 39 types, each shipped in minimal light, minimal dark, and full-editorial variants. Coverage includes architecture, sequence, state, entity relationship, timelines, quadrants, charts, data flows, Sankey diagrams, Wardley maps, kanban boards, user journeys, deployment views, UML classes, and database schemas. A local gallery exposes the catalog without a build step.
That breadth matters less than the selection rules. Semantic patterns describe queues, policy traces, governance catalogs, and other behaviors before the agent chooses a visual type. The skill loads only the references relevant to the request. A focused architecture brief can therefore use one grammar instead of asking an LLM to invent a visual system from scratch.
A 4-out-of-10 density target keeps diagrams selective
The design guide reserves accent color for 1 or 2 focal elements and targets a visual density of 4 out of 10. Templates use named roles for paper, ink, muted text, links, and typography. Connector and label guidance tries to prevent the familiar output of equal rounded boxes joined by lines that collide with text. Deletion is treated as a legitimate design choice.
Brand onboarding can inspect a public site, map detected colors and fonts into those roles, check contrast, show a proposed diff, and save the result. Named profiles live outside the installed skill, while a .diagram-design marker lets each project select one. That arrangement helps agencies or teams switch clients without rewriting a shared file on every job.
Website extraction remains a proposal, not an oracle. A site's most common CTA color may be wrong for a dense label, a webfont may have licensing or availability constraints, and a generated layout may still clip. The skill pauses before applying default styling to a branded project, which is the right place for a human decision.
What happened when we ran it
We cloned commit 4faae66 into a fresh unprivileged Debian container with 3 CPUs and 8 GB of RAM. Installing 35 Python packages took 15 seconds and occupied 37 MB. The build succeeded in 4 seconds. Pip-audit reported 0 known vulnerabilities in that installed environment.
There was no tests script or target for our harness, so the test step was skipped. That wording matters: a skipped step is not a passing suite. The checkout contained 337 files, about 21,740 lines of source, and 9.2 MB of data. We found 2 CI workflow files, no Dockerfile, and no tests directory.
The README documents many narrower checks that our generic harness did not invoke. They cover skin rules, accessibility, geometry, treemap proportions, imports, documentation sync, motion assets, a pinned animation controller, and headless rendered layout. Those tools are encouraging, but our measured result establishes only the successful install, build, and audit plus the absence of a general test target.
Static HTML needs no runtime; PNG needs Playwright
Ordinary output is static, script-free HTML and SVG with no external image dependency. Templates provide an accessible name and description, unique IDs, hidden decorative icons, and reduced-motion handling. Optional motion uses a reviewed controller with static, reveal, step, and loop modes; the default remains static. Remote assets, arbitrary inline scripts, CSS imports, and executable HTML attributes are rejected by project checks.
SVG export extracts the diagram for use in browsers or design software. PNG export rasterizes it at 2x by default and needs Playwright plus an installed browser. The README's command still shows Chromium installation, although open pull request #59 proposes using any available Playwright engine. Full-editorial cards and headers are excluded from diagram-only exports, so a complete page needs browser capture or print tooling.
The source remains technical. Correcting a label collision or rerouting a connector means editing SVG coordinates or asking the agent to revise them. There are no Figma-style handles. Front-end developers may accept that trade; people who expect direct manipulation should start with draw.io.
Imports preserve meaning and discard the old layout
The skill reads common draw.io containers and Mermaid files or fenced blocks, including compressed draw.io payloads. It converts the source into a structured representation, selects a Diagram Design grammar, and redraws it at a requested format, size, and detail level. Mermaid parsing is text-only and does not execute JavaScript, use a browser, contact a network, or follow click targets.
Import is intentionally interpretive. Components, relationships, grouping, and direction carry over. Coordinates, palette, fonts, and automatic layout do not. That is suitable when the goal is to restyle an existing diagram for an article or deck. It is the wrong tool when pixel placement or an organization's established draw.io component library must remain intact.
August 25 activity is strong despite no GitHub release
The repository was pushed on August 25, 2026, and GitHub showed 31 combined issues and pull requests. The README names internal version 2.5.10 and describes its last 10 diagram grammars, yet the latest-release API returns no GitHub release. Those facts can coexist: the project has versioned marketplace content without a conventional GitHub release artifact.
Current work addresses export engines, PowerPoint SVG color handling, Mermaid label retention, documentation token drift, and README image size. Those are specific maintenance concerns from people using the output in real destinations. The 40 KB README also documents installation across four agent hosts, profile recovery, import limits, export steps, motion policy, and contributor gates.
Diagram Design earns a place in an agent-assisted publishing workflow because its constraints are concrete and its files remain editable. Our 19-second install-and-build result makes a trial cheap. The missing general test target and interpretive layout mean every delivered diagram still needs a browser check by someone who can judge both correctness and composition.