---
title: Build diagrams with Mermaid JS
description: >-
  Create flowcharts, sequence diagrams, and other visual diagrams in Notebooks
  using Mermaid JS syntax in Markdown cells.
breadcrumbs: Docs > Notebooks > Notebooks Guides > Build diagrams with Mermaid JS
---

# Build diagrams with Mermaid JS

## Overview{% #overview %}

Datadog Notebooks support Mermaid JS in any Markdown cell. Mermaid is a JavaScript-based tool for creating diagrams and flowcharts in Markdown. Learn more about Mermaid in the [official documentation](https://mermaid.js.org/intro/) or by using the [Mermaid live editor](https://mermaid.live/).

## Setup{% #setup %}

To create a new diagram in your notebook:

1. Add a new Markdown cell, with `/markdown` or the **Add Cell** menu.
1. Select **Code Block** from inside the Markdown editor.
1. Select **Mermaid-JS**.

In the Datadog site, there is also a [Build Diagrams with Mermaid JS](https://app.datadoghq.com/notebook/template/13/build-diagrams-with-mermaid-js) template, which you can use to get started and to see diagram examples.

Use the [mermaid syntax](https://mermaid.js.org/syntax/classDiagram.html) to build flowcharts, sequence diagrams, user journeys, gantt charts, and more.

## Example{% #example %}

Build a basic flowchart with a top down orientation:

````bash
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->E;
```
````

Copy the example flowchart syntax into the mermaid code block. After you click **Done** the cell will populate the diagram.

{% video
   url="https://docs.dd-static.net/images//notebooks/guide/build_diagrams_with_mermaidjs/build-diagram-mermaidjs.mp4" /%}