VibeusDiagram Design
Open-source skill for coding agents that creates structured, brand-matched diagrams as self-contained HTML and inline SVG, and redraws Mermaid, draw.io, or Excalidraw input for a different audience or destination.
Diagram Design, by Cathryn Lavery, is a skill that runs inside coding agents. Give it a one-sentence request and it selects a diagram type, applies rules for layout and information density, and writes a single self-contained HTML file with inline SVG. There is no build step, and the result can be opened offline.
The documented examples span architecture and data-flow diagrams, flowcharts, sequence and state-machine diagrams, database schemas, timelines, swimlanes, quadrants, radar and polar charts, Sankey diagrams, and Gantt plans. The skill can inspect a site’s colors and fonts for brand matching, and it redraws rather than simply converts Mermaid, draw.io, or Excalidraw material for the chosen audience and destination. Static output is the default; optional motion is described as accessible, and diagrams include titles and descriptions for screen readers.
The official site lists installation paths for Claude Code, Codex, Pi, Cursor, Cline, Gemini CLI, Windsurf, and other skills hosts. The GitHub repository is MIT-licensed.
There is a documentation discrepancy: the site advertises 44 visual types, while the README says 45. The README also notes that output quality depends on the model, repeated prompts can produce different layouts, generated HTML is not an editable source format, and Mermaid is preferable for documentation that changes with code.
