# Diagram Design

> A skill that generates editorial diagrams in a single HTML file with SVG

- Category: Agent skills (`skills`)
- Tags: `free`, `open-source`
- Official: https://github.com/cathrynlavery/diagram-design
- Wunderlust: https://wunderlust.xyz/r/diagram-design
- Image: https://wunderlust.xyz/media/diagram-design-poster.jpg
- Video preview: https://wunderlust.xyz/media/diagram-design.webm
- Added: 2026-11-05

## What it is

An agent skill that draws diagrams as a self-contained HTML + SVG file, using a brand's colors and fonts.

## What it’s for

Use it to produce diagrams for blogs, decks or documentation with an editorial finish instead of the default style.

## Benefits

- 45 diagram types (architecture, flow, sequence, ER, Gantt, Sankey, UML) with light and dark variants
- Pulls colors and fonts from a site to match the brand
- Imports and redraws draw.io, Mermaid and Excalidraw files; exports SVG and PNG
- Supports a motion mode and the reduced-motion preference

## Caveats

- MIT license, free
- The default network request is to Google Fonts; system fonts avoid it

## Similar on Wunderlust

- [Visual Explainer](https://wunderlust.xyz/r/visual-explainer.md): Skill that turns terminal output into readable HTML pages and slides
- [Frontend Slides](https://wunderlust.xyz/r/frontend-slides.md): Skill that creates presentations as HTML pages and converts PowerPoint
- [Anatomy](https://wunderlust.xyz/r/anatomy.md): Skill that creates interactive isometric machine illustrations to explain technical ideas
- [Design Motion Principles](https://wunderlust.xyz/r/design-motion-principles.md): A motion skill with modes for creating and auditing interface animations
- [UI UX Pro Max](https://wunderlust.xyz/r/ui-ux-pro-max.md): Design-intelligence skill: styles, palettes, fonts and rules by stack
- [Design.md Chrome](https://wunderlust.xyz/r/design-md-chrome.md): A Chrome extension that extracts a site's design into DESIGN.md or SKILL.md