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.