reStructuredText examples

These examples use standard Sphinx directives. Each source listing is followed by its rendered result. Markdown equivalents appear in How to add Mermaid diagrams.

Caption, reference, and accessible label

.. mermaid:: examples/states.mmd
   :caption: Document review states
   :name: review-states
   :alt: A draft moves to review, then returns for revision or is published.
   :align: center

See :ref:`review-states`.

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : revise
    Review --> Published : approve
    Published --> [*]

Document review states

See Document review states.

A fixed direction with zoom controls

.. mermaid::
   :options: {autoDirection: false, fontSize: 18}
   :zoom: {always: true, maxScale: 4, labels: {zoomIn: Enlarge}}
   :width: 80%
   :align: center

   flowchart LR
       Draft --> Review --> Published

flowchart LR
    Draft --> Review --> Published

A regular code block

.. code-block:: mermaid

   flowchart TD
       Source --> Build --> Preview

flowchart TD
    Source --> Build --> Preview

The Pele directive alias

.. pele::
   :title: Review decision
   :config: {flowchart: {nodeSpacing: 50}}
   :class: review-diagram

   flowchart TD
       Review{Approved?} -->|Yes| Publish
       Review -->|No| Revise

flowchart TD
    Review{Approved?} -->|Yes| Publish
    Review -->|No| Revise