Live Flowcharts, Sequences, Gantt & More (No Images, No Plugins)
WP Documentation includes native Mermaid.js v10+ support — just paste any Mermaid code into a dedicated block and watch it render beautifully, responsively, and instantly.
Zero external services. Zero image uploads. Fully interactive.
Try These Live Examples (Click to Zoom)
Flowchart
flowchart TD
A[Writer] --> B{Uses Gutenberg?}
B -->|Yes| C[Paste Mermaid code]
B -->|No| D[Cries in Markdown]
C --> E[Beautiful diagram appears]
E --> F[Team applauds 🎉]
style E fill:#10b981,stroke:#059669,color:#fff
Sequence Diagram
sequenceDiagram
participant User
participant Docs Site
participant Browser
User->>Docs Site: Opens documentation
Docs Site->>Browser: Serves Mermaid code
Browser->>Browser: Renders instantly
Note right of Browser: No server round-trip!
User->>User: Impressed 😍
Gantt
gantt
title WP Documentation Pro Roadmap
dateFormat YYYY-MM-DD
section 2025
Mermaid Blocks :done, 2025-01-01, 2025-03-01
Tabbed Code Snippets :done, 2025-04-01, 2025-06-01
Search Synonyms :active, 2025-11-01, 2025-12-31
section 2026
AI Assistant :2026-01-01, 12w
Offline PWA Support :2026-03-01, 8w
Supported Diagram Types (All of Them!)
| Type | Example Use Case | Interactive? |
|---|---|---|
| Flowchart | Architecture, user flows | Yes |
| Sequence Diagram | API calls, authentication flow | Yes |
| Gantt Chart | Roadmaps, release timelines | Yes |
| Class Diagram | OOP structure, plugin architecture | Yes |
| State Diagram | User journey, order status | Yes |
| Entity Relationship | Database schema | Yes |
| User Journey | Onboarding process | Yes |
| Pie / Requirement | Feature breakdown, market share | Yes |
| Git Graph | Git workflow, branching strategy | Yes |
Why This Is Better Than Images
| Feature | Static Images | WP Docs Pro + Mermaid |
|---|---|---|
| Edit in Gutenberg | No | Yes |
| Responsive & zoomable | No | Yes |
| Dark mode auto-switch | No | Yes |
| Copy-paste code | No | Yes |
| Print-ready | Sometimes | Always |
| Accessible (screen readers) | Never | Yes |
| File size | 100–500 KB | ~3 KB |
| Version control friendly | No | Yes |
Features You’ll Love
- Live editing preview in Gutenberg
- Click + drag to pan large diagrams
- Mouse wheel to zoom in/out
- Dark mode – automatically uses dark theme
- Export as SVG/PNG (right-click)
- Print-optimized – expands to full width
- Mobile-friendly – touch zoom & pan
How to Use (30 Seconds)
- In any page/post → add block → search “Mermaid”
- Paste any valid Mermaid code
- Watch it render instantly
- Done!
Graph
graph LR
A[Add Mermaid Block] --> B[Paste Code]
B --> C{Magic Happens}
C --> D[Beautiful Diagram]
style D fill:#8b5cf6,stroke:#6d28d9,color:#fff