← Back to Examples

Mermaid Diagrams Example

Render UML diagrams, flowcharts, sequence diagrams, and more using Mermaid syntax in markdown

About Mermaid Support Mermaid diagrams are rendered automatically when using code blocks with the mermaid language identifier. The renderer detects mermaid code blocks and converts them to SVG diagrams.

1. Flowchart Example

Markdown Input ```mermaid flowchart TD A[Start] --> B{Is it working?} B -->|Yes| C[Great!] B -->|No| D[Debug] D --> B C --> E[End] ```
Rendered Output

2. Sequence Diagram Example

Markdown Input ```mermaid sequenceDiagram participant User participant App participant Server participant Database User->>App: Send Request App->>Server: API Call Server->>Database: Query Data Database-->>Server: Return Data Server-->>App: Response App-->>User: Display Result ```
Rendered Output

3. Class Diagram Example

Markdown Input ```mermaid classDiagram class MarkdownRenderer { +options Object +processor Unified +cache Map +render(markdown) Promise +renderSync(markdown) String +renderTo(element, markdown) +processMermaid(element) } class MarkdownLib { +create(options) MarkdownRenderer +render(markdown) Promise +renderSync(markdown) String +renderTo(element, markdown) +renderStream(element, markdown) } MarkdownLib --> MarkdownRenderer : creates ```
Rendered Output

4. State Diagram Example

Markdown Input ```mermaid stateDiagram-v2 [*] --> Idle Idle --> Loading : fetch() Loading --> Success : data received Loading --> Error : request failed Success --> Idle : reset() Error --> Loading : retry() Error --> Idle : dismiss() ```
Rendered Output

5. Bar Chart Example (xychart)

Markdown Input ```mermaid xychart-beta title "Monthly Sales Performance" x-axis [Jan, Feb, Mar, Apr, May, Jun] y-axis "Revenue (in k$)" 0 --> 100 bar [45, 60, 35, 80, 55, 90] ```
Rendered Output

6. Quadrant Chart Example

Markdown Input ```mermaid quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] ```
Rendered Output

7. Entity Relationship Diagram

Markdown Input ```mermaid erDiagram USER ||--o{ POST : creates USER ||--o{ COMMENT : writes POST ||--o{ COMMENT : has POST }o--|| CATEGORY : belongs_to USER { int id PK string username string email datetime created_at } POST { int id PK int user_id FK string title text content } ```
Rendered Output

8. Interactive Chatbox with Mermaid

9. Custom Mermaid Input

10. Live Typing Simulation (AI Response Style)

Dynamic Rendering Demo - Real-time Mermaid Preview Watch as the markdown content is typed character by character. The mermaid diagram updates line by line as it's being written, showing a live preview of the diagram as each new node or connection is added. This simulates how an AI chatbot renders diagrams progressively.
Live Input (Typing...)
Live Rendered Output
Ready to start...

11. Chatbot Streaming Response

Realistic Chatbot Experience This demo simulates a real chatbot conversation where responses stream in progressively. Each message appears with a typing effect, just like modern AI assistants.
Assistant: Hello! I can help you visualize system designs with diagrams. Click any button above to see a streaming response with mermaid diagrams.

12. Dark Theme Example