Need to explain flows, processes, or hierarchies visually? The WP Documentation theme supports Mermaid.js, a lightweight JavaScript-based syntax for generating charts and diagrams directly from code blocks.
🔧 What is Mermaid.js?
Mermaid.js lets you write diagrams using plain text. It converts this text into clean, interactive visuals right inside your documentation.
No need for image uploads or external tools!
✅ Supported Diagram Types:
- Flowcharts
- Sequence Diagrams
- Gantt Charts
- Class Diagrams
- Entity Relationship Diagrams
- Pie Charts
- State Diagrams
- Mindmaps (experimental)
🧪 Examples
Flowchart
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
Class Diagram
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
Sequence Diagram
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
State Diagram
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Git
gitGraph
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature