Mermaid — Create Charts and Diagrams With Markdown-like Syntax

Mermaid is a simple markdown-like script language for generating charts from text via JavaScript

Source: Mermaid

Mermaid lets you generate diagrams and flowcharts with Markdown-like syntax. It’s easy to use, free, and open source. Mermaid lets you simplify documentation and avoid bulky tools when explaining your code.

Source: Mermaid Github Page

Examples

Here are a couple of examples of what you can do with Mermaid.

Flowchart

A flowchart is a type of diagram that represents a workflow or process. A flowchart can also be defined as a diagrammatic representation of an algorithm — a step-by-step approach to solving a task.

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Sequence Diagram

A sequence diagram simply depicts the interaction between objects in sequential order; i.e. the order in which these interactions take place.

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you…