# Diagram Design

An agent skill that produces editorial-style architecture, flowchart, and other diagrams as self-contained HTML and SVG, matched to a project's own visual style.

Diagram Design is an Agent Skills-compatible skill for Claude Code, Codex, Factory Droid, and Pi that generates editorial diagram types, including architecture, flowchart, sequence, state machine, entity-relationship, timeline, swimlane, quadrant, radar, org chart, and tree diagrams, plus layouts such as Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, and database schema diagrams.

Each diagram is generated as static, self-contained HTML and SVG in three variants: minimal light, minimal dark, and full-editorial, with no build step or external image dependency; optional accessible motion is available for ordered explanations. The skill can also redraw existing draw.io, Mermaid, or Excalidraw diagrams at a chosen format, size, and detail level, and can match a project's own brand by reading its website.

It is written mostly in HTML and released under the MIT license.

Website: https://cathrynlavery.github.io/diagram-design/