Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.
You can generate rich, inline SVG diagrams to visually explain concepts. Use this skill whenever a visual would help the user understand a system, process, architecture, or mechanism better than text alone.
Always use this template:
<svg width="100%" viewBox="0 0 680 H" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- Content here -->
</svg>
width="100%" so it scales responsively.<html>, <head>, <body>, or DOCTYPE.font-family="system-ui, -apple-system, sans-serif" or inherit from host.text-anchor="middle" and dominant-baseline="central" for centered text in boxes.At 14px, each character ~ 8px wide. At 12px, each character ~ 7px wide.
rect_width = max(title_chars x 8, subtitle_chars x 7) + 48px padding.Use these semantic color sets that work in both modes:
Teal: fill="#E1F5EE" stroke="#0F6E56" text="#085041" (dark: fill="#085041" stroke="#5DCAA5" text="#9FE1CB")
Purple: fill="#EEEDFE" stroke="#534AB7" text="#3C3489" (dark: fill="#3C3489" stroke="#AFA9EC" text="#CECBF6")
Coral: fill="#FAECE7" stroke="#993C1D" text="#712B13" (dark: fill="#712B13" stroke="#F0997B" text="#F5C4B3")
Amber: fill="#FAEEDA" stroke="#854F0B" text="#633806" (dark: fill="#633806" stroke="#EF9F27" text="#FAC775")
Blue: fill="#E6F1FB" stroke="#185FA5" text="#0C447C" (dark: fill="#0C447C" stroke="#85B7EB" text="#B5D4F4")
Gray: fill="#F1EFE8" stroke="#5F5E5A" text="#444441" (dark: fill="#444441" stroke="#B4B2A9" text="#D3D1C7")
Red: fill="#FCEBEB" stroke="#A32D2D" text="#791F1F" (dark: fill="#791F1F" stroke="#F09595" text="#F7C1C1")
Green: fill="#EAF3DE" stroke="#3B6D11" text="#27500A" (dark: fill="#27500A" stroke="#97C459" text="#C0DD97")
Pink: fill="#FBEAF0" stroke="#993556" text="#72243E" (dark: fill="#72243E" stroke="#ED93B1" text="#F4C0D1")
Color meaning, not sequence: Don't rainbow-cycle. Use 2-3 colors per diagram. Map colors to categories or physical properties (warm = heat/energy, cool = calm/cold, gray = structural/neutral).
If you're rendering inside a system that supports CSS variables, prefer:
var(--color-text-primary) for primary textvar(--color-text-secondary) for muted textvar(--color-border-tertiary) for light bordersrx="4" for subtle rounding, rx="8" for emphasized. rx="20" for large containers.fill="none" — SVG defaults fill to black, which turns paths into black blobs.<g>
<rect x="100" y="20" width="180" height="44" rx="8"
fill="#EEEDFE" stroke="#534AB7" stroke-width="0.5"/>
<text x="190" y="42" text-anchor="middle" dominant-baseline="central"
font-size="14" font-weight="500" fill="#3C3489">Node title</text>
</g>
<g>
<rect x="100" y="20" width="200" height="56" rx="8"
fill="#E6F1FB" stroke="#185FA5" stroke-width="0.5"/>
<text x="200" y="38" text-anchor="middle" dominant-baseline="central"
font-size="14" font-weight="500" fill="#0C447C">Title</text>
<text x="200" y="56" text-anchor="middle" dominant-baseline="central"
font-size="12" fill="#185FA5">Short subtitle</text>
</g>
<line x1="200" y1="76" x2="200" y2="120"
stroke="#534AB7" stroke-width="1.5" marker-end="url(#arrow)"/>
<line x1="200" y1="76" x2="200" y2="120"
stroke="#534AB7" stroke-width="1.5" stroke-dasharray="4 3"/>
<line x1="440" y1="100" x2="500" y2="130"
stroke="currentColor" stroke-width="0.5" stroke-dasharray="4 4" opacity="0.5"/>
<circle cx="440" cy="100" r="2" fill="currentColor" opacity="0.5"/>
<text x="506" y="134" font-size="12" fill="currentColor" opacity="0.7">Annotation text</text>
<rect x="80" y="40" width="520" height="300" rx="20"
fill="#E1F5EE" stroke="#0F6E56" stroke-width="0.5"/>
<text x="340" y="68" text-anchor="middle"
font-size="14" font-weight="500" fill="#085041">Container name</text>
When: Sequential processes, decision trees, pipelines. Layout: Top-to-bottom or left-to-right. Single direction only. Rules:
When: Containment matters — things inside other things (architecture, org charts, system components). Layout: Nested rectangles. Outer = container, inner = regions. Rules:
When: Building intuition. "How does X actually work?" Layout: Freeform — follows the subject's natural geometry. Rules:
(char_count x 8) + 48 < rect_width for 14px text.<path> connectors have fill="none".For complex topics, use multiple smaller SVGs instead of one dense one:
<svg width="100%" viewBox="0 0 680 260" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- Step 1 -->
<rect x="230" y="20" width="220" height="56" rx="8"
fill="#E1F5EE" stroke="#0F6E56" stroke-width="0.5"/>
<text x="340" y="38" text-anchor="middle" dominant-baseline="central"
font-size="14" font-weight="500" fill="#085041">User request</text>
<text x="340" y="56" text-anchor="middle" dominant-baseline="central"
font-size="12" fill="#0F6E56">HTTP POST /api/data</text>
<!-- Arrow 1->2 -->
<line x1="340" y1="76" x2="340" y2="100" stroke="#534AB7"
stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Step 2 -->
<rect x="230" y="106" width="220" height="56" rx="8"
fill="#EEEDFE" stroke="#534AB7" stroke-width="0.5"/>
<text x="340" y="124" text-anchor="middle" dominant-baseline="central"
font-size="14" font-weight="500" fill="#3C3489">Server processing</text>
<text x="340" y="142" text-anchor="middle" dominant-baseline="central"
font-size="12" fill="#534AB7">Validate and transform</text>
<!-- Arrow 2->3 -->
<line x1="340" y1="162" x2="340" y2="186" stroke="#854F0B"
stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Step 3 -->
<rect x="230" y="192" width="220" height="56" rx="8"
fill="#FAEEDA" stroke="#854F0B" stroke-width="0.5"/>
<text x="340" y="210" text-anchor="middle" dominant-baseline="central"
font-size="14" font-weight="500" fill="#633806">Database write</text>
<text x="340" y="228" text-anchor="middle" dominant-baseline="central"
font-size="12" fill="#854F0B">INSERT into table</text>
</svg>