Diagrams (Mermaid)

Create flowcharts, sequence diagrams, Gantt charts, pie charts, and class diagrams with Mermaid.js in Hugo Markdown.

Ownable supports Mermaid diagrams rendered directly from code blocks.

Basic Syntax

Wrap your diagram code in a mermaid code block:

```mermaid
graph TD;
  A[Start] --> B{Decision};
  B -- Yes --> C[Great];
  B -- No --> D[Try Again];
```

Create and preview diagrams in the Mermaid Live Editor before pasting them into your Markdown.

Mermaid diagrams are rendered automatically when a mermaid code block is detected. To force-enable diagram rendering, add to your front matter:

---
diagram: true
---

For the full diagram syntax reference, see the Mermaid documentation.