Mermaid Diagrams

How to create diagrams and visualizations using Mermaid.js

2024-10-03
1 min read
Pablo

Mermaid lets you create visual diagrams using text and code. You can use all diagrams that Mermaid supports.

Flowcharts

Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines).

Flowchart

Loading graph...

flowchart LR
    A[Input] --> B[Neuron]
    B --> C[Output]
```mermaid
flowchart LR
    A[Input] --> B[Neuron]
    B --> C[Output]
```

Gitgraph

A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.

Gitgraph Diagrams

Loading graph...

gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```mermaid
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```

Entity Relationship

An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge.

Entity Relationship Diagrams

Loading graph...

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```