Mermaid記法でダッシュボードにアーキテクチャ図など視覚的な表現が可能に！

## 概要
ダッシュボードのMarkdownエディタでMermaid記法を用いて、様々な図をテキストで記述できるようになりました！ダッシュボードにアーキテクチャやワークフローの視覚的な表現を加えることで、データの理解が容易になり、情報を迅速に把握可能になります。

![update202501-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/18e66c71-9113-491d-a185-307e6573ed0d.png)

:::note info
最新のアップデートの詳細はこちら
- [New Relic アップデート(2025年1月)
](https://newrelic.com/jp/blog/nerdlog/new-relic-update-202501 "New Relic アップデート(2025年1月)")
- [New Relic アップデート一覧
](https://newrelic.com/jp/blog/nerdlog/new-relic-update  "New Relic アップデート一覧")
:::

## Mermaid記法とは？
Mermaid記法はMarkdownでテキストを定義することで、フロー図やアーキテクチャ図を動的に作成してくれるJavaScriptベースの図表作成ツールです。

例えば、以下のような記述をすると、フロー図が作成されます。
```markdown
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/9dc25601-c5f1-4eee-8043-d9b2b05904f1.png)

Mermaid記法の詳細については以下サイトが参考になります。

https://mermaid.js.org/intro/

## 確認してみよう！
今回のアップデートで、ダッシュボードのMarkdownエディターでMermaid記法で記載されたテキストが図として表示されるようになりました。設定例をいくつか紹介です。

### Markdownの設定方法について
ダッシュボードの画面を開き、「＋Add widget」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/35bc3fd4-bf7e-4785-b91b-e630e31c808f.png" width="90%">
「Add text, images, or links」を選択するとMarkdownエディターが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/dff2f52d-e7f4-49ee-9f27-1e43dfd512cc.png" width="50%">
書いたMarkdownの表示をPreviewで確認しながら記述できるようになっています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/e24d40df-1c81-4c0f-b039-5a7137852eab.png" width="90%">
````
```mermaid
ここにMermaid記法を記述する
```
````

### 設定例

幾つかMermaid記法による表現例をご紹介です。

:one:システム構成図
````markdown
```mermaid
flowchart LR
  A[TOPページ] --> B[API]
  B -->C[サービス1]
  B -->D[サービス2]
  C -->E[データベース]
  D -->F[キャッシュ]
```
````
```mermaid
flowchart LR
  A[TOPページ] --> B[API]
  B -->C[サービス1]
  B -->D[サービス2]
  C -->E[データベース]
  D -->F[キャッシュ]
```
:two:シーケンス図
````markdown
```mermaid
sequenceDiagram
    フロント->>バックエンド: リクエストを送信
    バックエンド-->>フロント: レスポンスを返却
```
````
```mermaid
sequenceDiagram
    フロント->>バックエンド: リクエストを送信
    バックエンド-->>フロント: レスポンスを返却
```

:three: AWS構成図
少し記述が複雑になりますが、AWSの構成図を表現することも可能です。
````markdown
```mermaid
flowchart LR

%%ユーザーを定義
OU1[User]

%%VPCとサブネットを定義
subgraph GC[AWS]
  subgraph GV[vpc-sc1]
    subgraph GS1[subnet-1]
      NW1{{"ELB<br>web1"}}
    end
    subgraph GS2[subnet-2]
      CP1("EC2<br>web1")
    end
    DB1[("RDS<br>db1")]
  end
end

%%サービス同士の関連性を定義
OU1 --> NW1
NW1 --> CP1
CP1 --> DB1

%%VPC、サブネットのスタイルを定義
classDef SGC fill:none,color:#345,stroke:#345
class GC SGC

classDef SGV fill:none,color:#0a0,stroke:#0a0
class GV SGV

classDef SGPrS fill:#def,color:#07b,stroke:none
class GS2 SGPrS

classDef SGPuS fill:#efe,color:#092,stroke:none
class GS1 SGPuS

%%AWSサービスのスタイルを定義
classDef SOU fill:#aaa,color:#fff,stroke:#fff
class OU1 SOU

classDef SNW fill:#84d,color:#fff,stroke:none
class NW1 SNW

classDef SCP fill:#e83,color:#fff,stroke:none
class CP1 SCP

classDef SDB fill:#46d,color:#fff,stroke:#fff
class DB1 SDB

classDef SST fill:#493,color:#fff,stroke:#fff
class ST1 SST
```
````
```mermaid
flowchart LR

%%ユーザーを定義
OU1[User]

%%VPCとサブネットを定義
subgraph GC[AWS]
  subgraph GV[vpc-sc1]
    subgraph GS1[subnet-1]
      NW1{{"ELB<br>web1"}}
    end
    subgraph GS2[subnet-2]
      CP1("EC2<br>web1")
    end
    DB1[("RDS<br>db1")]
  end
end

%%サービス同士の関連性を定義
OU1 --> NW1
NW1 --> CP1
CP1 --> DB1

%%VPC、サブネットのスタイルを定義
classDef SGC fill:none,color:#345,stroke:#345
class GC SGC

classDef SGV fill:none,color:#0a0,stroke:#0a0
class GV SGV

classDef SGPrS fill:#def,color:#07b,stroke:none
class GS2 SGPrS

classDef SGPuS fill:#efe,color:#092,stroke:none
class GS1 SGPuS

%%AWSサービスのスタイルを定義
classDef SOU fill:#aaa,color:#fff,stroke:#fff
class OU1 SOU

classDef SNW fill:#84d,color:#fff,stroke:none
class NW1 SNW

classDef SCP fill:#e83,color:#fff,stroke:none
class CP1 SCP

classDef SDB fill:#46d,color:#fff,stroke:#fff
class DB1 SDB

classDef SST fill:#493,color:#fff,stroke:#fff
class ST1 SST
``` 

ダッシュボードに追加したときのイメージです。
例えば、アーキテクチャ図を追加しておけば、パフォーマンス劣化や障害がどの箇所で起きているのか、アーキテクチャ図で確認したいときに別のツールや資料を開かなくても、ダッシュボード内で迅速に確認することができますよ。ぜひ、ご活用ください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485441/9312f9bf-9a87-44f8-8277-3de15202a8a0.png)

# その他
New Relicでは、**新しい機能やその活用方法**について、QiitaやXで発信しています！
**無料でアカウント作成**も可能なのでぜひお試しください！

:::note info
New Relic株式会社の[X(旧Twitter)](https://x.com/NewRelicJapan) や [Qiita OrganizationOrganization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::

:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::