Diagram Design

Diagram Design is an open agent skill for Claude Code, Codex, Copilot, Cursor, Factory Droid, Pi, and other Agent Skills hosts. You describe the picture in plain language; the agent picks among 44 types (architecture, sequence, flowchart, Wardley, Sankey, schema, exploded 3D, and more), follows an opinionated editorial style guide, and writes one double-clickable HTML file with inline SVG. It can pull your site palette for onboarding, and it can redraw existing Mermaid, draw.io, and Excalidraw sources instead of starting from a blank canvas.

Founders still paste Mermaid into docs or burn an hour in Figma for a deck slide. Diagram Design gives your coding agent taste rules, type-specific layouts, and brand colors so the diagram you publish looks intentional on the first pass.

Install with npx skills add cathrynlavery/diagram-design, or use the marketplace plugin path for Claude Code / Codex / Copilot. Ask for a diagram in natural language, or import a Mermaid or draw.io file. The agent loads the matching type reference, lays nodes on a 4px grid with CI-style overlap checks, and saves a self-contained HTML (optional SVG or PNG export). Brand profiles live under ~/.diagram-design so later diagrams stay on-palette without re-explaining fonts and colors.

Mermaid optimizes for git-diffable text that GitHub renders. Figma and draw.io optimize for hand-dragged canvas work. Diagram Design optimizes for publishable editorial output from an agent — fixed taste, brand match, and static HTML+SVG with no shadow soup. Complementary to Archify-style architecture one-shots: this is a full diagram system, not a single chart template.

• Public demo available

• Archify ↗
• json-render ↗
• Taste Skill ↗