Mermaid Diagram Preview

flowchart TD
  A[Paste Markdown] --> B{mermaid fence?}
  B -- yes --> C[Render locally]
  B -- no --> D[Show as code]

Type: flowchart-v2
Mermaid 11.16.1
The preview and both downloads read the same neutralized SVG.

Four nodes and a decision, drawn in this tab. The type line starts as a guess from the first keyword and is replaced by the one Mermaid itself reports once the library loads.

# Deploy runbook

```mermaid
flowchart TD
  A[Paste Markdown] --> B{mermaid fence?}
  B -- yes --> C[Render locally]
  B -- no --> D[Show as code]
```

Build it with:

```bash
npm run build
```

```mermaid
sequenceDiagram
  Reader->>Page: Paste diagram text
  Page-->>Reader: SVG
```

2 mermaid fences found
Fence 1 of 2 — lines 3–8 — Type: flowchart-v2
Fence 2 of 2 — lines 16–20 — Type: sequence

Three fenced blocks, two of them mermaid, listed in document order with the lines of their delimiters. The shell block is left alone: a fence is rendered only when its first info word is mermaid, compared without regard to case.

flowchart TD
  A[Start] -->> B]

Parse error on line 2:
...rt TD  A[Start] -->> B]
----------------------^
Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'TAGEND'
Reported position: line 2, column 11.

An arrow typed with one dash too few. Mermaid's parser wrote every character above the last line, caret frame included, and this page repeats it without editing a byte; its reported position, line 2 column 11, is printed under the message. In a Markdown file, that position counts in the file, not in the fence.

%%{init:{'securityLevel':'loose','htmlLabels':true}}%%
flowchart LR
  A["<b>bold?</b>"] --> B[end]

Type: flowchart-v2
Mermaid 11.16.1
The preview and both downloads read the same neutralized SVG.
Removed from the SVG before preview:
Removed role attribute from <svg>.
Removed aria-roledescription attribute from <svg>.
Removed data-edge attribute from <path>.
Removed data-et attribute from <path>.
Removed data-id attribute from <path>.
Removed data-points attribute from <path>.
Removed data-look attribute from <path>.
Removed marker-end attribute from <path>.
Removed data-id attribute from <g>.
Removed <foreignObject> element and its content.
Removed data-look attribute from <g>.
Removed <foreignObject> element and its content.
Removed data-look attribute from <g>.
Removed <foreignObject> element and its content.

A pasted directive asking for the relaxed security level and for HTML labels. Mermaid refuses the security level outright — that key is on its protected list — but HTML labels are not protected, so three labels came back as embedded HTML, and the neutralizer deleted all three with their contents. Every line under that heading is the chip list, unedited.