What is MERMAID ?

In the current project, sometimes I need to prepare basic design document and when I need to create diagrams I'd use Mermaid since it helps me create diagrams easily and quickly with just a few lines of code without using any design tools.

WHAT IS MERMAID ?
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.
Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.

HOW DOES IT WORK ?
When Mermaid encounters code blocks marked as mermaid, it generate an iframe that takes the raw Mermaid syntax and passes it to Mermaid.js, turning that code into a diagram in browser.

For example

mermaid
  sequenceDiagram;
  participant A as User
  participant B as Frontend
  participant C as Backend

  Note over A: User logged in
  A->>B: Access Domain
  rect rgba(255, 165, 1, 0.5)
    Note over B: Home page
  end
  B->>C: Call API
  rect rgba(255, 165, 1, 0.5)
    Note left of C: Get home page info API
    Note over C: Get data
    C->>B: Data Response
    Note over B: Home page
  end
  B->>A: 
  Note over A: Show home page

You can see a diagram like this.

Mermaid supports multiple diagram and chart types:
- Flowchart
- Sequence diagram
- Class Diagram
- State Diagram
- Pie Chart
- Gantt
- ...

Let's create your first diagram with Mermaid and enjoy :)