Mermaid Graphics

Zensical features native built-in integration with Mermaid.js for rendering flowcharts, sequence diagrams, state diagrams, class diagrams, and entity-relationship diagrams directly inside Markdown files.

To use the native Mermaid diagram system, simply enable its JavaScript markdown extension in your zensical.toml file:

[project.markdown_extensions]
pymdownx.superfences.custom_fences = [
  { name = "mermaid", class = "mermaid", format = "pymdownx.superfences.fence_code_format" },
]

Deploying Mermaid JavaScript

Mermaid2 JavaScript version 10.4.0

Live Editor

Example Pie Chart¶

%%{init: 
    { 
        'theme': 'base', 
        'themeVariables': { 
            'pie1': '#ff9999', 
            'pie2': '#66b2ff', 
            'pie3': '#99ff99', 
            'pieTitleTextColor': '#66b2ff' 
        }
    }
}%%
pie showData title My Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rabbits" : 15
    "Rats" : 12

```mermaid
%%{init: 
    { 
        'theme': 'base', 
        'themeVariables': { 
            'pie1': '#ff9999', 
            'pie2': '#66b2ff', 
            'pie3': '#99ff99', 
            'pieTitleTextColor': '#66b2ff' 
        }
    }
}%%
pie showData title Pets Adopted
    "Dogs" : 386
    "Cats" : 85
    "Rabbits" : 15
    "Rats" : 12
```

Example Flowchart¶

Ref: Basic Syntax
Styling a node

---
title: Flowchart Example
config:
  flowchart:
    nodeSpacing: 40
    curve: "linear"
---
flowchart TD
A("`**Client**`") --> B[Load Balancer]
B --> C[Server-01]
B --> D[Server-02]
B --> E[Server-03]

```mermaid
---
title: Flowchart Example
config:
    flowchart:
    nodeSpacing: 40
    curve: "linear"
---
flowchart TD
A("`**Client**`") --> B[Load Balancer]
B --> C[Server-01]
B --> D[Server-02]
B --> E[Server-03]
```

Flowchart Width¶

It is possible to adjust the width of the rendered flowchart.

This is done by defining the css rule mermaid.flowchartConfig or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page. mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.

mermaid.flowchartConfig = {
    width: 100%
}

Example XY Chart¶

Ref: Basic Syntax

The XY chart includes two fundamental chart types: the bar chart and the line chart.

---
config:
  themeVariables:
    xyChart:
      plotColorPalette: '#0000ff, #00ff00'
      backgroundColor: "#888"
      xAxisLabelColor: "blue"
---

xychart
    title "Sales Revenue"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec, " "]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar  [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

```mermaid
---
config:
themeVariables:
    xyChart:
    plotColorPalette: '#0000ff, #00ff00'
    backgroundColor: "#888"
    xAxisLabelColor: "blue"
---

xychart
    title "Sales Revenue"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec, " "]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar  [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

See: CSS to change the background colour of XY chart from mermaid.js

Styling Graphs¶

Applying styles to Mermaid nodes via external CSS (e.g., .cssClass > rect { fill: … }) does not work reliably. External CSS will be silently overridden.

The recommended approach is to use the classDef syntax shown in the Classes section, which works correctly and is the intended styling mechanism.

Graph Experiments¶

A place to experiment with graphs. See the Docs.

---
config:
  layout: elk
  look: classic
#  theme: dark
---
flowchart TB
  A[Start] --> B{Decision}
  B -->|Yes| C[Continue]
  B -->|No| D[Stop]

```mermaid
---
config:
layout: elk
look: classic
#  theme: dark
---
flowchart TB
A[Start] --> B{Decision}
B -->|Yes| C[Continue]
B -->|No| D[Stop]
```