From diagrams
Automatically routes diagram requests to optimal format (SVG, Mermaid, Excalidraw, D2) and type (sequence, flowchart, ER) based on user intent when unspecified.
How this skill is triggered — by the user, by Claude, or both
Slash command
/diagrams:diagram-routerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Select the best output format and diagram type for the user's request, then delegate to the format-specific skill.
Select the best output format and diagram type for the user's request, then delegate to the format-specific skill.
If the user explicitly requests a format, use it:
If they specified a format, skip to Step 3.
Default: SVG. Always. SVG produces the highest visual quality, handles every diagram type, and renders everywhere (browsers, GitHub, docs, presentations). Only route away from SVG when the user explicitly names another format.
| Context Signal | Format | Why |
|---|---|---|
| No specific signal | SVG | Best quality, most flexible, browser-native |
| "For the README" / "in markdown" / "GitHub" | SVG | GitHub renders SVG natively. Quality matters. |
| "Quick" / "simple" / "basic" | SVG | Still SVG -- it handles simple diagrams well too |
| User explicitly says "mermaid" | Mermaid | They asked for it |
| User explicitly says "excalidraw" / "whiteboard" / "sketch" / "hand-drawn" | Excalidraw | Hand-drawn aesthetic, saves .excalidraw file |
| User explicitly says "d2" | D2 | They asked for it |
The rule is simple: SVG unless the user says otherwise. The user can always convert later ("convert that to mermaid", "make that an excalidraw", etc.).
If the user described what they want to visualize but did not name a diagram type, infer it:
| What They Described | Diagram Type |
|---|---|
| System components, layers, platform | Layered architecture |
| Service communication, API calls, request flow | Sequence diagram |
| Steps in a process, pipeline, workflow | Flowchart |
| Who handles each step, team responsibilities | Swimlane |
| Object lifecycle, status transitions | State machine |
| Database tables and relationships | ER diagram |
| Module/package dependencies | Dependency graph |
| Option A vs option B, before/after | Comparison (side-by-side) |
| Project phases, milestones, releases | Timeline / Gantt |
| Security boundaries, attack surface | Threat model / DFD |
| Topics and subtopics, brainstorm | Mind map |
| Central service with consumers | Hub and spoke |
| Set overlaps, shared characteristics | Venn diagram |
| Decision logic, branching conditions | Decision tree |
| Volume distribution, traffic flow | Sankey diagram |
| Team structure, hierarchy | Org chart / tree |
| Cloud infrastructure, network topology | Network diagram |
| How software maps to infrastructure | Deployment diagram |
If ambiguous, briefly confirm with the user: "This sounds like a [type] -- does that match what you have in mind?"
Load the selected format skill and follow its workflow:
svg skill and its references (svg-design-system.md, layout-patterns.md)mermaid skillexcalidraw skilld2 skillAlways consult the design-system skill for color, composition, and quality rules regardless of format.
Users frequently want to convert between formats or extract styles. Common patterns:
Format conversion:
Style extraction from images:
Cross-format iteration:
When converting, preserve:
Accept that some fidelity is lost when converting to simpler formats (SVG to Mermaid loses custom positioning and gradients). Mention this to the user.
npx claudepluginhub zate/cc-plugins --plugin diagramsTechnical diagram creation with visual design principles: format selection, layout, readability, and aesthetics. Invoke whenever task involves any interaction with diagrams — creating, reviewing, or improving visual representations of systems, processes, data flows, or relationships using Excalidraw or Mermaid.
Generate architecture diagrams, flowcharts, decision trees, workflows, sequence flows, ERDs from declarative D2 text with automatic layouts, themes, and styling.
Guides semantic redesign of diagrams for Mermaid, PlantUML, and Excalidraw by analyzing core concepts and leveraging platform strengths, avoiding mechanical conversions.