Skip to main content

Using Mermaid to Create Diagrams

flowchart LR

Mermaid is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Installing Mermaid​

Using the npm package​

You can install Mermaid using the npm package:

# NPM
npm install mermaid
# Yarn
yarn add mermaid
# PNPM
pnpm add mermaid

For the Docusaurus framework, run:

yarn add @docusaurus/theme-mermaid

Hosting mermaid on a web page​

You can also add the Mermaid link in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

Creating a diagram with Mermaid​

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

References​