diagramlisted

## When to invoke Use to turn a description or some Mermaid source into a picture — "draw a diagram", "make a flowchart", "diagram this architecture", "visualize this as a graph". # /diagram — Render a Mermaid diagram vibestack renders **Mermaid** offline. The repo ships the whole renderer as one self-contained page (`lib/diagram-render/dist/diagram-render.html`, mermaid pinned at build time), so the browse shim turns your source into SVG with no network at all. The SVG is inlined into the HTML artifact you keep — it opens in any browser, on any machine, forever, with nothing to fetch — and the PNG comes from the same `$B` you already use for QA. {{include lib/snippets/browse-setup.md}} ### 1. Get the Mermaid source If the user gave Mermaid, use it. Otherwise write it from their description (`flowchart`, `sequenceDiagram`, `erDiagram`, `classDiagram`, `gantt`, etc.). Authoring rules, all in service of one thing — a diagram nobody can read is worse than a paragraph: - **Direction follows the subject.** `graph LR` for pipelines and flows, where the eye should travel with the data; `graph TD` for hierarchies and decompositions, where depth is the point. - **5-15 nodes is the readable range.** Keep labels to a few words. If the ask genuinely needs more, split it into two diagrams along a seam the reader already understands (one per subsystem, or overview plus detail) rather than shrinking everything to fit. - **Say what the arrows mean** when a graph mixes kinds