Mermaid2 Plugin

Create diagrams and visualizations using text-based syntax.

Core Attributes

pip install mkdocs-mermaid2-plugin

Configuration

plugins:
  - mermaid2:
      version: '10.6.1'
      arguments:
        theme: 'base'
        themeVariables:
          primaryColor: '#BB2528'
          primaryTextColor: '#fff'

Diagram Types

Flowchart

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Sequence Diagram

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

Gantt Chart

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Research           :done,    des1, 2024-01-01,2024-01-07
    Design             :active,  des2, 2024-01-08, 14d
    section Development
    Implementation     :         des3, after des2, 30d
    Testing           :         des4, after des3, 14d

Entity Relationship

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Advanced Features

Custom Styling

Use theme variables to customize appearance:

arguments:
  theme: 'base'
  themeVariables:
    primaryColor: '#BB2528'
    lineColor: '#F8B229'
    secondaryColor: '#006100'

Interactive Features

Mermaid diagrams support: - Click events - Links - Tooltips - Custom callbacks

Best Practices

1. Keep diagrams simple and focused
2. Use meaningful labels
3. Choose appropriate diagram types
4. Consider mobile viewing
5. Test rendering in both themes