Jiaxin's Homepage
Tutorial
5 min read

Mermaid Diagrams Demo

Beautiful diagrams in Markdown with Mermaid.js

This post demonstrates how to use Mermaid.js to create beautiful diagrams directly in your Markdown content. Mermaid allows you to write diagram definitions as code blocks that are automatically rendered as visual diagrams.

Flowcharts

Flowcharts are perfect for showing step-by-step processes or decision trees.

flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[Finish]

Here’s a more complex flowchart showing a software development process:

flowchart LR
    A[Planning] --> B[Development]
    B --> C{Tests Pass?}
    C -->|Yes| D[Review]
    C -->|No| E[Fix Bugs]
    E --> B
    D --> F{Approved?}
    F -->|Yes| G[Deploy]
    F -->|No| B
    G --> H[Monitor]

Sequence Diagrams

Sequence diagrams show how different components or actors interact with each other over time.

sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Click Login
    Browser->>Server: POST /login
    Server->>Database: Query User
    Database-->>Server: User Data
    Server-->>Browser: Session Token
    Browser-->>User: Redirect to Dashboard

Class Diagrams

Class diagrams are useful for showing the structure and relationships in object-oriented code.

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }

    class Dog {
        +String breed
        +bark()
    }

    class Cat {
        +String color
        +meow()
    }

    Animal <|-- Dog
    Animal <|-- Cat

State Diagrams

State diagrams show the different states an object can be in and how it transitions between them.

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Success: Complete
    Processing --> Error: Fail
    Error --> Idle: Retry
    Success --> [*]

Getting Started

To use Mermaid diagrams in your posts:

  1. Create a code block with the mermaid language identifier
  2. Write your diagram definition inside the block
  3. Jekyll will render it automatically when the page loads

Example Syntax

```mermaid
flowchart LR
    A --> B
    B --> C

```

Tips

  • Use TD for top-down flowcharts and LR for left-right
  • Add labels to arrows using -->|label| syntax
  • Use descriptive names for nodes and states
  • Test your diagrams in the Mermaid Live Editor

Resources