# SVG Diagram Patterns Building blocks for creating diagrams in implementation plans. All SVGs are inline — no external dependencies. Compose these patterns to build architecture diagrams, data flow visualizations, flowcharts, and charts. All colors reference Plannotator theme tokens. In SVG, use the CSS custom property values directly via `style` attributes or the corresponding CSS classes. ## Table of Contents 1. [Arrow Markers](#arrow-markers) 2. [Architecture Diagrams](#architecture-diagrams) 3. [Flowcharts](#flowcharts) 4. [Data Flow](#data-flow) 5. [Bar Charts](#bar-charts) 6. [Positioning & Layout](#positioning--layout) ## Arrow markers Define reusable markers in ``. Reference them via `marker-end="url(#arrow)"`. ```svg ``` **Note on CSS vars in SVG:** `fill="var(--primary)"` works in inline SVG within an HTML document. For broader compatibility, you can also style via CSS classes instead of inline attributes. ## Architecture diagrams Box-and-arrow diagrams showing how components connect. ### Box node ```svg API Server Express + middleware ``` ### Highlighted box (new or hot-path component) ```svg New Service to be created ``` ### Connecting arrows ```svg ``` ### Edge labels Place at the midpoint of an arrow, offset above: ```svg REST ``` ### Full architecture example ```svg ``` ## Flowcharts ### Process box ```svg Parse input ``` ### Decision diamond ```svg Valid? ``` ### Terminal / pill node ```svg Start ``` ### Success / failure endpoints ```svg Done Error ``` ### Curved branch path For routing flow from a decision to a side branch: ```svg ``` ## Data flow ### Request / response pair ```svg POST /api/plan { plan, status } ``` ### Fan-out pattern ```svg ``` ## Bar charts ```svg ``` ## Positioning & layout ### SVG container sizing - Use `viewBox` with fixed coordinates; set `style="width:100%;max-width:NNNpx"` for responsive scaling - Standard widths: `720px` full-width, `480px` half-width, `360px` sidebar - Standard heights: `180–320px` for most diagrams ### Box sizing - Standard node: `120–160px` wide, `48–56px` tall - Minimum gap between nodes: `60px` horizontal, `40px` vertical - Arrow label offset: `8–12px` above the line - Diagram padding: `20px` inside the viewBox edges ### Color roles in diagrams | Element | Fill / stroke | Token | |---------|---------------|-------| | Box background | fill | `var(--card)` | | Box stroke | stroke | `var(--border)` | | Highlighted box bg | fill | `color-mix(in oklab, var(--primary) 8%, transparent)` | | Highlighted box stroke | stroke | `var(--primary)` | | Arrow / connector | stroke | `var(--muted-foreground)` | | Title text | fill | `var(--foreground)` | | Subtitle / label text | fill | `var(--muted-foreground)` | | Success path | stroke | `var(--success)` | | Error path | stroke | `var(--destructive)` | | Warning | fill | `var(--warning)` | ### Using CSS classes in SVG For cleaner markup, define reusable classes in a ` ```