Tech Stack ‐ Mermaid JS

What is Mermaid JS?

Mermaid JS is a JavaScript library for creating diagrams and flowcharts.

Instead of using websites such as draw.io to make diagrams, where you have to manually draw arrows and boxes, using the mermaid JS syntax, you can write code that automatically translates into diagrams.

See Mermaid syntax here

Common Uses of Mermaid JS

• UML diagrams –> used to visualize aspects of your code
• Flowcharts –> used to visualize user interactions
• Class diagrams –> used to explain the structure of your code

Examples of Diagrams Made Using Mermaid JS

See more examples here

Community Integrations

Many applications already have integrations for Mermaid JS:

• ChatCraft
• GitHub
• VS Code
• Notion
• etc

Using Mermaid JS with ChatCraft

Input Mermaid code into ChatCraft:

Output:

Using Mermaid JS in VS Code

By installing the VS Code extension Markdown Preview Mermaid Support, you can type Mermaid code in a Markdown file and see the generated diagram in the VS Code Preview.

The downside of using VS Code is that you cannot export this diagram to a pdf or image.

Using Mermaid JS in Mermaid Live Editor

By using Mermaid Live Editor, you are given the option to export the resulting diagram to one of many image types.

Using Mermaid JS in GitHub

GitHub can automatically render Mermaid code in Markdown files.

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

Loading