mermaid-in-artifactslisted

# Mermaid in artifacts Artifacts render **mermaid natively** — no library, no CDN, no CSP problem. In an environment where every other visualization must be hand-built, that makes mermaid the cheapest thing on the menu, and it is routinely overlooked. ```markdown ```mermaid flowchart LR A[Extract] --> B{DQ gate} B -->|pass| C[Reconcile] B -->|block| D[Human review] ``` ``` In an HTML artifact, use `<pre class="mermaid">…</pre>` instead of a fenced block. --- ## Use it for structure. Never for quantity. The line is simple and it holds: | Use mermaid | Use SVG (`svg-charting`) | |---|---| | Process and approval flows | Anything with a value axis | | Decision trees | Bridges, bars, lines, areas | | System and data-lineage maps | Cohort heatmaps | | Close calendars and dependencies (gantt) | Anything where position encodes magnitude | | Org and ownership chains | Anything a reader will measure | | State machines | Distributions | **Mermaid has no quantitative encoding.** Node size means nothing, edge length means nothing. The moment a reader might compare two shapes to infer a number, you need a real chart. A "pie" in mermaid is the worst of both — it looks quantitative and is unmeasurable. --- ## The five that earn their place in finance work ### Data lineage / pipeline map The single most useful diagram for an automation owner. Answers "where does this number come from" without reading code. ```mermaid flowchart LR NS[(NetSuite)] -->|SuiteQL nightly| RAW[ra