Diagram Design
github.com/cathrynlavery/diagram-design- Category
- Developer Tools
- Rank
- No. 928Tools index
- Pricing
- Open Source
- Platform
- cli · web
- Type
- TOOL
- GitHub
- 19.0k stars
- Added
- Aug 16, 2026
About
An agent skill for Claude Code, Codex, and Pi that generates 27 types of editorial-quality diagrams (architecture, flowcharts, sequence diagrams, org charts, etc.) as self-contained static HTML+SVG with no build step, JavaScript, or Figma required. It reads a website to match brand style in about 60 seconds and can also redraw existing draw.io or Mermaid diagrams at a chosen format and detail level.
What it can do
Generate editorial-style diagrams (architecture, flowcharts, sequence diagrams, org charts, etc.)
Diagram description/request → Self-contained static HTML+SVG diagram
Read a website to match brand style
Website URL → Style-matched diagram design
Redraw existing draw.io or Mermaid diagrams at a chosen format and detail level
draw.io or Mermaid diagram → Redrawn static diagram
Produce diagrams in light, dark, and full-editorial variants
Diagram type → Styled diagram variant
Why it made the leaderboard
Diagrams are the weakest part of most generated documentation, and this gives a coding agent a fixed vocabulary of 27 types plus behavior-level patterns so a queue, policy trace or trust boundary renders consistently instead of being invented each time.
Tags
Comments (0)
No comments yet
Indexed by a proprietary survey. Corrections welcome.