Diagrams

Mermaid

.. mermaid::

This directive creates a diagram based on Mermaid. The content of the directive is a diagram description in Mermaid's diagram syntax.

Diagrams can be configured and styled using config properties. The properties can be set via the following mechanisms, with specific mechanisms overriding more general ones.

• A frontmatter block in the directive content sets properties for a single diagram.

• The mermaid metadata sets the default properties for the page.

• The mermaid key in the metadata option in conf.py (a dict) sets the default properties for the site.

Caveat

Only the --- line separating the frontmatter from the diagram code must be included; the --- line preceding the frontmatter must be dropped.

```{mermaid}
title: A diamond graph
config:
  look: handDrawn
---
flowchart TD;
  A --> B & C;
  B & C --> D;
```

mermaid directives generate <tdoc-dyn type="mermaid"> elements, and their controller property is left undefined.

Options

:class: name [name...] (IDs)

A space-separated list of CSS classes to add to the diagram container.

:style: property: value; [property: value; ...]

CSS styles to apply to the diagram container.

Graphviz

Graphviz diagrams can be added with the graphviz directive.