Mermaid JS で図を構築する

概要

Datadog ノートブックは、任意の Markdown セルで Mermaid JS をサポートします。 Mermaid は Markdown で図やフローチャートを作成するための JavaScript ベースのツールです。公式ドキュメントまたは Mermaid ライブエディターで Mermaid について詳しく知ることができます。

セットアップ

ノートブックに新しいダイアグラムを作成するには

  1. 新しいテキストセルを追加します。
  2. Markdown エディター内から Code Block を選択します。
  3. Mermaid-JS を選択します。

Datadog のサイトには、Build Diagrams with Mermaid JS というテンプレートもあり、これを利用すると、図のサンプルを見ることができます。

Mermaid 構文を使って、フローチャート、シーケンス図、ユーザージャーニー、ガントチャートなどを作成することができます。

例

トップダウンで基本的なフローチャートを構築します。

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

フローチャートの例の構文を Mermaid コードブロックにコピーします。Done をクリックすると、セルに図が入力されます。