AI product Open source
Diagram Design is a diagram-generation skill for Claude Code, Codex, Factory Droid, and Pi. It produces self-contained HTML and SVG diagrams through 39 editorial visual types, including architecture, flowchart, sequence, state-machine, data-flow, timeline, Sankey, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, and database-schema diagrams. It can read a website to match its brand, and can redraw draw.io or Mermaid sources at a selected format, size, and detail level.
Its semantic system patterns describe behavior separately from layout, so queues, policy traces, and trust boundaries can use an existing diagram type without adding new layout types. The repository supplies each type in minimal-light, minimal-dark, and full-editorial variants. Static HTML is the default; optional accessible motion is available for ordered explanations. The diagrams require no build step, JavaScript, or external image dependency.
3 uses taken from transcripts — each links to the moment in the video.
An open-source Claude Code skill for creating editorial-quality diagrams as self-contained HTML and SVG. It supports many diagram types, matches a website's palette and fonts, checks contrast, and exports to PNG or SVG.
An open-source Claude Code skill for creating editorial-quality diagrams as self-contained HTML and SVG. It supports many diagram types and can match a website's colors and fonts before exporting diagrams to PNG or SVG.
An open-source Claude Code skill for creating editorial-quality diagrams as self-contained HTML and SVG. It supports many diagram types, adapts colors and fonts from a website's branding, checks contrast, and exports PNG or SVG.
3 in the library.