Mermaid

Embed Mermaid graphs in your documents, including flowcharts, sequence diagrams, gantt diagrams and more.

ui

About this Extension

Adds support for Mermaid diagrams in Sphinx documentation. Create flowcharts, sequence diagrams, and other visualizations using simple text-based syntax instead of external image files.

Supported diagram types

  • Flowcharts: Decision trees and process flows
  • Sequence diagrams: API interactions and message flows
  • Class diagrams: Object-oriented design documentation
  • State diagrams: State machine representations
  • Gantt charts: Project timelines and schedules
  • Pie charts: Data visualization
  • Git graphs: Repository branch visualization

Example usage

.. mermaid::

   graph LR
      A[Start] --> B{Decision}
      B -->|Yes| C[Process]
      B -->|No| D[End]
      C --> D

Sequence diagram:

.. mermaid::

   sequenceDiagram
      Client->>Server: Request
      Server->>Database: Query
      Database-->>Server: Result
      Server-->>Client: Response

Benefits over image files

  • Version controlled as text
  • Easy to edit and maintain
  • Consistent styling with your theme
  • No external image dependencies
  • Responsive and scalable
  • Can be generated automatically

Configuration

# conf.py
extensions = ['sphinxcontrib.mermaid']

# Optional: customize Mermaid settings
mermaid_version = "9.4.0"  # Specific Mermaid.js version
mermaid_init_js = "mermaid.initialize({startOnLoad:true});"

Particularly useful for API documentation, architecture guides, and process documentation where diagrams help explain complex workflows.

Author

Martín Gaitán

License

BSD License

Try it out!

We have not been able to validate your subscription.
You have been subscribed to SphinxThemes.com

We've got more coming...

Join the community and get notified every time we list a new Sphinx theme or extension.