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 tdoc_mermaid setting in conf.py (a dict) sets the default properties for the site.

Caveats

• 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;
  ```
  

• The light theme uses the theme property set via the page metadata or the tdoc_mermaid setting. The dark theme uses the darkTheme property.

• Setting the theme property via the frontmatter overrides the theme-based selection. This will make the diagram unreadable on one of the themes. As a workaround, set the background-light or background-dark :class: on the directive to add a static background color.

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.