Diagram Design is a skill for Claude Code, Codex, Factory Droid, Pi, and other Agent Skills-compatible hosts that generates editorial-quality diagrams as self-contained HTML and SVG, aimed at writers, engineers, and designers who need brand-consistent visuals without opening Figma.

What it is

Diagram Design is an agent skill that produces static diagrams as self-contained HTML and SVG. The tagline and repository description advertise 38 editorial diagram types, while the README states that all 39 visual types ship in three static variants: minimal light, minimal dark, and full-editorial. Any variant opens directly in a browser, with no build step, no JavaScript, and no external image dependency. Semantic patterns describe behavior separately from layout, so a queue, a policy trace, or a trust boundary can reuse the nearest existing type instead of expanding the type count. Real identifiers carry through: flowcharts, sequence diagrams, state machines, ER/data models, swimlanes, quadrants, radar, treemaps, Gantt charts, Sankey, fishbone, Wardley maps, kanban, user journeys, deployment, dependency graphs, UML class, story maps, and database schema.

The concrete problem it solves is that asking a general assistant for a diagram yields a generic rounded-box result that matches nothing else on the page. The author's stated workflow was either fighting Figma for 30 minutes or skipping the diagram entirely. Diagram Design replaces that with a small set of editorial types that can match a brand by reading a website, and it also redraws existing draw.io, Mermaid, or Excalidraw sources at a chosen format, size, and detail level. The skill lives entirely in the agent-host ecosystem, so it produces files rather than a runtime service.

Key capabilities

• Ships 38 advertized diagram types, or 39 as counted in the README, covering architecture, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar, loop/flywheel, tree, org chart, layer stack, Venn, pyramid, bar, treemap, line chart, Gantt, scatter, process, medallion, data flow, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, database schema, polar chart, and waterfall.
• Renders each type in three static variants: minimal light, minimal dark, and full-editorial.
• Describes behavior through semantic patterns so a queue, policy trace, or trust boundary maps onto the nearest existing type rather than adding a new one.
• Redraws draw.io, Mermaid, or Excalidraw sources at a chosen format, size, and detail level.
• Keeps static HTML as the default output while offering optional accessible motion for ordered explanations.
• Produces self-contained HTML plus SVG with no build step, no JavaScript, and no external image dependency.
• Matches a brand by reading the target website, reserving the accent color for the one or two items the reader should notice first, at a stated target density of 4/10.

Who uses it and how

• Agents running in Claude Code, Codex, Factory Droid, Pi, and other Agent Skills-compatible hosts call the skill during document or repository work where a diagram is needed.
• Teams with existing diagram sources hand the skill draw.io, Mermaid, or Excalidraw files and receive a redraw at a chosen format, size, and detail level.
• Writers and site owners use it for architecture sketches, flowcharts, and ranked hierarchies that must match an existing brand, with the brand match performed by having the skill read the website.
• Documentation and reporting work benefits from ordered explanations that use optional accessible motion while static output stays the default.
• Reviewers compare variants through the 30-variant contact sheet at .github/pr-previews/editorial-diagrams-2.5.10.jpg and the live gallery at cathrynlavery.github.io/diagram-design/.

Getting started

No package-manager, Docker image, or compose file appears in the provided facts; the skill is distributed as a skill directory, and its assets open directly at skills/diagram-design/assets/index.html with no build step. The hosted gallery at https://cathrynlavery.github.io/diagram-design/ serves as the browsable reference.

How it compares

The README names Mermaid, draw.io, Excalidraw, and Figma as the tools this work sits beside or against. It positions itself as the editorial alternative to Mermaid's default output and to draw.io and Excalidraw redraws, while explicitly declining to work with Figma. No list of paid products replaced by this project is provided, so no licence or cost comparison against commercial tools can be drawn.

When to use it — and when not to

A self-hoster operates nothing: output is self-contained HTML and SVG with no build step, no JavaScript, and no external image dependency, and no database, object storage, or SMTP is mentioned. Do not pick it for interactive dashboards, data-bound charts, or anything needing runtime JavaScript behavior, because static output is the default and motion is only an optional aid for ordered explanations. The main weakness visible in the facts is an inconsistent type count, with 38 in the description and 39 in the README, plus a README excerpt that stops mid-sentence at the asset path.