Mermaid Diagrams Demo

Welcome to this Mermaid.js diagrams demo! This post showcases the various diagram types you can create directly in your markdown using Mermaid.js syntax.

What is Mermaid.js?

Mermaid.js is a JavaScript tool that renders text-defined diagrams using Markdown-inspired syntax. It allows you to create flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, and more - all from plain text in your markdown files.

Flowchart

Flowcharts are perfect for visualizing processes and decision trees.

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Check logs]
    E --> F[Fix issue]
    F --> B
    C --> G[Deploy to production]
    G --> H[Monitor]
    H -->|Issues| D
    H -->|Stable| I[Done]

Sequence Diagram

Sequence diagrams show how processes interact over time.

sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Submit form
    Browser->>Server: POST /api/submit
    Server->>Database: Save data
    Database-->>Server: Confirmation
    Server-->>Browser: 200 OK
    Browser-->>User: Success message

Class Diagram

Class diagrams help visualize object-oriented structures.

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
        +move()
    }
    class Dog {
        +String breed
        +bark()
        +fetch()
    }
    class Cat {
        +String color
        +meow()
        +purr()
    }
    Animal <|-- Dog
    Animal <|-- Cat

Entity Relationship Diagram

ER diagrams are great for database design.

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--o{ PRODUCT : contains
    USER ||--o{ REVIEW : writes
    PRODUCT ||--o{ REVIEW : has

    USER {
        string id
        string email
        string name
        date created_at
    }
    ORDER {
        int id
        date order_date
        string status
    }
    PRODUCT {
        int id
        string name
        decimal price
    }
    REVIEW {
        int id
        int rating
        string comment
    }

State Diagram

State diagrams show the different states of an entity and transitions between them.

stateDiagram-v2
    [*] --> Draft
    Draft --> Review: Submit
    Review --> Approved: Reviewer OK
    Review --> Draft: Needs changes
    Approved --> Published: Publish
    Published --> [*]
    Published --> Draft: Unpublish

How to Use

To create a diagram in your blog posts, simply use a code block with the mermaid language identifier:

```mermaid
graph TD
    A[Start] --> B[End]
```

The diagram will automatically be rendered when the page loads. All diagrams in this theme use a dark theme that matches the cyberpunk aesthetic.

Conclusion

Mermaid.js is a powerful tool for adding visualizations to your technical content. Whether you’re documenting architecture, explaining processes, or designing databases, diagrams can make your content more accessible and engaging.

Try adding some diagrams to your own posts!