Ein Fence mit ```` ```mermaid ```` ist ein Diagramm; `::mermaid` mit einem
`code`-Prop ist dieselbe Komponente.

## Verwendung

```mermaid
flowchart LR
  A[app.config.ts] --> B[resolveSources]
  B --> C[collections]
  B --> D[resolvedSources]
  C --> E[Content]
  D --> F[theme]
```

`````md
```mermaid
flowchart LR
  A[app.config.ts] --> B[resolveSources]
  B --> C[collections]
```
`````

## API

### Props

| Prop   | Typ      | Standard | Anmerkungen                                 |
| :----- | :------- | :------- | :------------------------------------------ |
| `code` | `string` | —        | Der Quelltext, wenn kein Fence genutzt wird |

## Anmerkungen

Wird bei Bedarf geladen und nur im Browser: mermaid ist rund ein halbes Megabyte
groß und bringt seinen eigenen Parser mit, und eine Website, auf der drei von
sechzig Seiten ein Diagramm tragen, darf die anderen siebenundfünfzig nicht
dafür zahlen lassen.

Das heißt auch, dass das Diagramm im Client gerendert wird — die Server-Ausgabe
ist der Quelltext, und das ist der ehrliche Rückfall für einen Leser ohne
JavaScript.

Änderungen am Quelltext rendern das Diagramm erneut. Mehrere Instanzen haben unterschiedliche SVG-Kennungen. Schnelle Themewechsel können kein neueres Ergebnis durch ein älteres ersetzen. Ungültige Syntax lässt den ursprünglichen Quelltext sichtbar.