Each example shows its Mermaid source and rendered output. The source listing
and diagram read the same file, so the text is directly reusable in a mermaid
fence or directive. These examples exercise the bundled Pele renderer; they do
not imply support for every Mermaid option.
For Sphinx authoring patterns, see reStructuredText examples and how to add diagrams. Styling recipes are in how to style diagrams.
Diagram frontmatter supplies a title, layout settings, font size, and a CSS variable.
:language: text
A caption, named reference, accessible label, width, and zoom controls are attached by the Sphinx directive.
:language: text
:name: request-flow
:caption: A **request** and response.
:alt: Client requests a page from the server.
:zoom: true
:width: 75%
The same UTF-8 file supplies the source listing and diagram. Sphinx tracks it as a build dependency.
:language: text
:caption: Loaded from a Mermaid document.
A chart with two labeled slices.
:language: text
Classes, members, and a composition relationship.
:language: text
A documentation collection with pages and embedded diagrams.
:language: text
Transitions through a review cycle, including a return to the draft state.
:language: text
Fixed dates and a disabled today marker keep this example stable across builds.
:language: text
Scores describe how a reader experiences each part of a documentation task.
:language: text
A documentation branch merged back into main.
:language: text
A hierarchy of documentation topics.
:language: text
Milestones grouped by month.
:language: text
Work items positioned by effort and reader impact.
:language: text
Values represent reader traffic between documentation sections.
:language: text
Bars show completed examples over four weeks.
:language: text
A test element verifies a rendering requirement.
:language: text
The sequence figure can be referenced as {ref}request-flow.