Zum Inhalt springen
duxt

Mermaid

Ein Diagramm aus einem Fence oder einem Prop.

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

Verwendung

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

API

Props

PropTypStandardAnmerkungen
codestring—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.

War diese Seite hilfreich?