From diagrams
Generate professional-quality diagrams as raw SVG. Use when the diagram-router selects SVG, or when the user needs pixel-precise control, custom visuals, threat models, comparisons, Venn diagrams, or any diagram type that other formats cannot handle well. SVG is the most expressive format -- unlimited visual possibilities, browser-native rendering.
npx claudepluginhub zate/cc-plugins --plugin diagramsThis skill is limited to using the following tools:
Generate professional, whitepaper-quality diagrams as raw SVG. Each diagram should look distinct -- the right visual form for the content, not a templated layout.
Generates dark-themed SVG diagrams for architecture, flowcharts, sequences, structures, mind maps, timelines, state machines, and data flows to visualize systems, processes, and concepts.
Generates SVG+PNG technical diagrams from natural language prompts. Supports 8 types including architecture, flowcharts, sequence diagrams; 5 visual styles; specialized for AI/Agent patterns like RAG pipelines and multi-agent flows.
Generates standalone HTML files with inline SVG for 13 diagram types: architecture, flowcharts, sequences, state machines, ERDs, timelines, swimlanes, quadrants, trees, and more. Customizable style guide with first-run onboarding.
Share bugs, ideas, or general feedback.
Generate professional, whitepaper-quality diagrams as raw SVG. Each diagram should look distinct -- the right visual form for the content, not a templated layout.
When to use SVG over other formats:
When another format may be better:
Consult the design-system skill for color, typography, composition, and quality rules that apply across all formats.
Before generating anything, establish:
This is the most important decision. Do not default to a layered architecture stack. Each content type has a natural visual form:
| Content | Best Diagram Type | Why |
|---|---|---|
| System components and layers | Layered architecture | Shows hierarchy and containment |
| Request/response lifecycle | Sequence diagram | Shows temporal ordering between actors |
| Data or process pipeline | Flow diagram (LTR or TTB) | Shows transformation steps |
| Attack surface / threat model | Threat flow with trust boundaries | Shows where controls intersect threats |
| Before/after or option comparison | Side-by-side comparison | Shows contrast |
| Central service with consumers | Hub and spoke | Shows radial relationships |
| Capability x category mapping | Matrix / grid | Shows coverage |
| State transitions | State machine | Shows conditions and transitions |
| Timeline with milestones | Roadmap / timeline | Shows progression |
| Org/team responsibility | Swimlane diagram | Shows who does what |
| Token/identity merging | Composition diagram | Shows inputs converging to output |
| Decision logic | Decision tree / flowchart | Shows branching paths |
| Set overlaps | Venn diagram | Shows shared/unique characteristics |
If the content could work as multiple types, choose the one that best highlights the primary relationship the reader needs to understand. When in doubt, ask the user.
Consult layout-patterns.md for structural guidance and SVG construction patterns for each type.
Build the SVG using the component library in svg-design-system.md. Read the "Common SVG Mistakes" section first -- it lists the most frequent errors. Core principles:
<defs> for gradients, shadows, markers -- define once, reference everywhere-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serifBeyond these fundamentals, adapt the visual treatment to the diagram type:
The design system references are a toolkit of components, not a template. Select the right components for the diagram type.
After writing the SVG file, run the validation script to check for layout issues:
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/validate-svg.py <file.svg>
The validator checks for:
Exit codes: 0 = clean, 1 = issues found, 2 = parse error.
How to interpret results:
Fix any OVERLAP or PARALLEL issues before presenting to the user. LABEL and PADDING issues are worth fixing but are lower priority.
Present the SVG and ask for feedback. Common refinements: information density, visual emphasis, terminology alignment, color palette, annotations.
Every generated SVG follows this structure:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {width} {height}"
font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
role="img" aria-labelledby="diagramTitle diagramDesc">
<title id="diagramTitle">{Concise diagram title}</title>
<desc id="diagramDesc">{1-2 sentence description}</desc>
<defs>
<!-- Gradients, shadows, markers, patterns -->
</defs>
<rect width="{width}" height="{height}" fill="#FAFBFC"/>
<!-- Content groups, ordered back-to-front -->
</svg>
role="img" on the root <svg> element<title> with a concise diagram name<desc> with a 1-2 sentence descriptionaria-labelledby="diagramTitle diagramDesc"| Diagram Type | Recommended viewBox |
|---|---|
| Architecture | 0 0 1400 1000 |
| Sequence | 0 0 1400 800 to 0 0 1600 900 |
| Flow | 0 0 1400 600 to 0 0 1600 800 |
| Threat model | 0 0 1400 900 |
| Timeline | 0 0 1500 600 to 0 0 1500 700 |
| State machine | 0 0 1200 800 |
| Comparison | 0 0 1400 700 |
| Compact/embed | 0 0 1000 600 |
style attribute on <svg> -- use SVG attributes directly. CSS background does not work when SVG is used as <img> source.rgba() in fill/stroke -- use fill="white" fill-opacity="0.18" instead.x1="0%" y1="0%" x2="0%" y2="100%" for top-to-bottom.M0,0 L12,4 L0,8 L3,4 Z.text-transform as SVG attribute -- it is CSS-only. Write the text in uppercase directly.<rect> -- not CSS background. <rect width="{w}" height="{h}" fill="#FAFBFC"/> as first child after <defs>.These rules prevent the most common SVG quality issues -- overlapping arrows, lines running through boxes, and labels colliding with elements.
Arrow routing -- NEVER route through unrelated boxes:
Parallel arrow separation:
Arrow-to-label clearance:
Box-to-box clearance:
Annotation and badge placement:
Self-check before output: After constructing the SVG, mentally trace each arrow path and verify:
SVG is token-expensive (~24x more tokens than Mermaid for equivalent diagrams). Manage this by:
<defs> aggressively -- define gradients, shadows, markers once<use href="#id"> for repeated elements (icons, patterns)<symbol> for icon libraries rather than inline paths<defs> block -- inline styles waste tokens and break consistency<defs> block, see svg-components.svg