Convert Mermaid diagrams from presentations into polished, hand-crafted SVG files that match the slide deck's dark theme and brand colors. Use when the user wants to replace a Mermaid diagram with a better-looking SVG, improve diagram aesthetics, or create a visual diagram for slides.
Convert Mermaid diagrams (or conceptual diagrams described in text/images) into polished SVG files styled to match this repository's Reveal.js presentation theme.
<div class="mermaid"> block into a standalone SVGRead the Mermaid code from the presentation's index.html (inside <div class="mermaid"> blocks) or from slides.md (inside ```mermaid fences). Parse:
-->-.->Before writing SVG, decide:
viewBox="0 0 1200 540" as the default (fits 1280x720 slides with margin)Q) for short curves, cubic beziers (C) for long arcsCreate the file at presentations/<slug>/<diagram-name>.svg. Follow the structure and patterns in the SVG reference.
Critical SVG rules:
<?xml version="1.0" encoding="UTF-8"?>rgba() in SVG attributes. Use fill-opacity / stroke-opacity as separate attributesfont-family="Inter, system-ui, -apple-system, sans-serif" on the root <svg>Replace the Mermaid block in index.html with an <img> tag:
<img src="<diagram-name>.svg" alt="<description>" class="network-img" style="max-height: 380px;">
Ensure the .network-img CSS class exists in the presentation (it's in the standard template).
Start a local server (python3 -m http.server <port>) and open the SVG in the browser to verify:
Assign each logical group a color from the brand palette:
| Role | Hex | Use for |
|---|---|---|
| Teal | #2DD4BF | Primary/hiring-side elements |
| Purple | #A78BFA | Secondary/prospect-side elements |
| Blue | #4A90D9 | Bridge/connecting elements |
| Gray | #94a3b8 / #64748b | External/passive elements |
| Orange | #FB923C | Accent/warning (use sparingly) |
| Background | #0f172a | SVG background, edge label pill fills |
| Text light | #e2e8f0 | Node text |
| Text muted | #cbd5e1 | Secondary node text |
Each node is a <g> with a glow filter wrapping a rounded rect + text:
<g filter="url(#glow-teal)">
<rect x="X" y="Y" width="W" height="48" rx="10"
fill="url(#grad-teal)" stroke="#2DD4BF" stroke-opacity="0.45" stroke-width="1.5"/>
<text x="CX" y="CY" text-anchor="middle" fill="#e2e8f0"
font-size="13" font-weight="600">Label</text>
</g>
rx="10"linearGradient (top stop-opacity ~0.2, bottom ~0.07)Each edge has three parts: path, label background pill, label text.
<!-- Solid edge -->
<path d="M x1,y1 C cx1,cy1 cx2,cy2 x2,y2" fill="none"
stroke="#4A90D9" stroke-width="1.5" marker-end="url(#arrow-blue)" opacity="0.8"/>
<rect x="LX" y="LY" width="LW" height="20" rx="10"
fill="#0f172a" stroke="#4A90D9" stroke-opacity="0.3" stroke-width="0.8"/>
<text x="LCX" y="LCY" text-anchor="middle" fill="#4A90D9"
font-size="10" font-weight="500">label_text</text>
<!-- Dashed edge (for passive/external connections) -->
<path d="..." stroke-dasharray="6 4" .../>
rx="10", filled with background color #0f172astroke-dasharray="6 4" and lower opacity (0.45-0.65)Subgraphs become subtle background regions:
<rect x="X" y="Y" width="W" height="H" rx="12"
fill="#COLOR" fill-opacity="0.03"
stroke="#COLOR" stroke-opacity="0.16" stroke-width="1.5" stroke-dasharray="7 4"/>
<text x="CX" y="TOP+24" text-anchor="middle"
fill="#COLOR" fill-opacity="0.65" font-size="12" font-weight="700"
letter-spacing="0.1em">ZONE LABEL</text>
<defs>Every SVG needs these in <defs>. See svg-reference.md for the full block. Summary:
glow-teal, glow-purple, glow-blue, glow-gray). feGaussianBlur + feFlood + feComposite + feMerge.arrow-teal, etc.). Triangular, markerWidth="9", orient="auto-start-reverse".grad-teal, etc.). Vertical linear gradient, top stop-opacity ~0.2, bottom ~0.07.graph TD)graph LR)For the complete SVG <defs> block and a full worked example, see svg-reference.md.