Diagrams

Diagrams are code blocks named after the diagram language. All of them are drawn in the browser without a network connection, except PlantUML.

The options are keys of preview_options, see the configuration reference. A diagram with an error shows the error in its place; the rest of the page still renders.

MermaidCopy Anchor Link

```mermaid
graph TD
  A[Write markdown] --> B[Preview]
```

A code block without a language is drawn as Mermaid too when its first line is graph <direction>, gantt, sequenceDiagram or erDiagram.

Mermaid uses its dark theme when the page is dark. Other Mermaid options go in maid:

opts = {
  preview_options = {
    -- ELK lays out large, dense graphs more cleanly
    maid = { layout = "elk" },
  },
}

Full-screen viewerCopy Anchor Link

Hover a Mermaid diagram and click the button in its top-right corner to open it full screen:

While you typeCopy Anchor Link

When an edit breaks a diagram, the page keeps showing its last good drawing, dimmed, instead of an error, so the page doesn't jump while you type. A diagram that has never drawn shows the error.

ChartsCopy Anchor Link

A chart block holds a Chart.js 4 configuration as JSON:

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Mon", "Tue", "Wed"],
    "datasets": [{ "label": "Notes", "data": [3, 5, 2] }]
  }
}
```

Configurations written for Chart.js 2 need the migration to v3 and later.

GraphvizCopy Anchor Link

```dot
digraph G {
  rankdir=LR
  markdown -> html -> browser
}
```

PlantUMLCopy Anchor Link

```plantuml
@startuml
User -> Neovim : edit
Neovim -> Preview : refresh
@enduml
```

Bare @startuml ... @enduml blocks work too, without a fence.

The preview adds the page theme's colors to the diagram, on a transparent background, so it matches the light and dark themes. skinparam and <style> in the diagram itself still take precedence.

PlantUML diagrams are drawn by a PlantUML server, https://www.plantuml.com by default, which sees the diagram's source. To use your own server, or SVG images:

opts = {
  preview_options = {
    uml = { server = "http://localhost:8080", imageFormat = "svg" },
  },
}

flowchart.jsCopy Anchor Link

```flowchart
st=>start: Start
op=>operation: Work
e=>end: End
st->op->e
```

Sequence diagramsCopy Anchor Link

```sequence-diagrams
Alice->Bob: Hello
Bob-->Alice: Hi
```

They are drawn in the hand-drawn style; sequence_diagrams = { theme = "simple" } draws straight lines.