Build diagrams with Mermaid JS

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 or by using the Mermaid live editor.

Setup

To create a new diagram in your notebook:

  1. Add a new text cell.
  2. Select Code Block from inside the Markdown editor.
  3. Select Mermaid-JS.

In the Datadog site, there is also a Build Diagrams with Mermaid JS template, which you can use to get started and to see diagram examples.

Use the mermaid syntax to build flowcharts, sequence diagrams, user journeys, gantt charts, and more.

Example

Build a basic flowchart with a top down orientation:

```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.