Mermaid.jsをHTMLで書けるって知ってた？ ちょっとした備忘録   

## 1. はじめに

～ChatGPTキャンバス機能で生成されたHTMLから気づいたこと～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/738950a1-a5b0-9a2d-652e-0a1fc9ddbdc6.png)

- **Markdown上でMermaid.jsが描ける**のはよく知られていますが、実は**HTMLでも簡単にMermaid.jsを埋め込める**ってご存じでしたか？  
- さらに、最近登場した**ChatGPTのキャンバス機能**で図解を生成したところ、**裏側のソースが「HTML＋Mermaid」の形**で出てきて驚きました。  
- 本記事では、ChatGPTのキャンバス機能の概要と、そこで発見したHTMLにMermaid.jsを埋め込む方法を備忘録としてまとめます。

---

## 2. ChatGPTのキャンバス機能とは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/1df303ae-a71f-2773-1d38-35d69a88e309.png)

キャンバス機能でMermaid.js + HTMLを実装させてる様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/bd625cfc-2a38-5222-ae73-34042c9e30f4.png)

- **右上のプレビューで実行可能**
  - プレビュー機能を利用することで、記述内容を即座に確認することが可能。
  - 自分の環境では図解をうまく表示ができなかった。
  - ファイルに実装内容をコピペしてローカル環境で確認する必要があった。

- **コードレビュー機能**
  - コードを確認し、問題点や改善点を指摘する。
- **バグ修正機能**
  - 実装内容の中からバグを検出し、適切な修正案を提示する。


### 2-1. リアルタイム編集が可能
- キャンバス機能は、ChatGPTが生成した文章・コードを「サイド画面」上で直接編集できるインターフェース。  
- ユーザーは修正点をそのまま書き込み、AIにフィードバックを求めることができるため、効率的にプロジェクトを進められます。

### 2-2. インタラクティブな画面
- 従来の「テキストチャット形式」だけでなく、視覚的に編集状態を確認できるのが特徴。  
- チャット画面とは別のキャンバス領域に、文章・コード・図解などが表示されます。

### 2-3. 多機能性
- 部分的なコードレビューや文章校正も可能で、変更箇所を指定してAIにリライトを依頼できる。  
- プロジェクトとして保存・再編集がしやすいので、長いドキュメントや複数ファイルの管理にも対応。

---

![ChatGPTのキャンバス機能の詳細と使い方_1737983596511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/11f9aaf7-d580-3cf0-bd7b-9b5f4a83f516.png)


## 3. キャンバス機能で生成されたHTML + Mermaidに気づいた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/3ede95a6-8412-10a7-c3be-63adb2441bf5.png)


- ChatGPTのキャンバス機能に「あるフロー図を描いてほしい」と依頼したところ、~~キャンバス画面にフロー図~~が表示されました。自分の場合はローカルに実装をコピーしてhtmlの表示を確認してフロー図が表示されるのを確認した。
- その図を右クリックまたは設定メニューから**ソースコードを確認**してみると、下記のように**HTMLの中にMermaid.jsが埋め込まれたコード**が生成されていたのです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Mermaid Demo</title>
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
  <div class="mermaid">
    graph LR
      A[Start] --> B{Check something}
      B -->|Yes| C[Process #1]
      B -->|No| D[Process #2]
      C --> E[End]
      D --> E[End]
  </div>

  <script>
    mermaid.initialize({
      startOnLoad: true
    });
  </script>
</body>
</html>
```

- **「MarkdownでMermaidを書く」**のが一般的だと思っていたところ、**HTMLファイルの形**でそのまま生成されるとは驚き。  
- つまり、このコードをローカルに保存してブラウザで開けば、すぐに**Mermaidで描画されたフローチャート**が確認できます。

---

## 4. HTMLでMermaid.jsを利用する方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/18d8091b-cd95-5a60-b2a7-ace4d07f2df6.png)

### 4-1. CDNを使う場合

1. HTML `<head>` 内でMermaid.jsを読み込む  
   ```html
   <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
   ```  
2. `<div class="mermaid">` にMermaidのコードを貼り付ける  
   ```html
   <div class="mermaid">
     graph LR
       A --> B
       B --> C
       C --> D
   </div>
   ```  
3. 仕上げに `mermaid.initialize()` を呼ぶ  
   ```html
   <script>
     mermaid.initialize({ startOnLoad: true });
   </script>
   ```

### 4-2. ローカルのファイルを使う場合
- CDNのリンクをダウンロード済みの `mermaid.min.js` へのパスに変更するだけでOK。  
- それ以外の設定はほぼ同じです。

---

## 5. 実際の図解の例

### 5-1. フローチャート
```mermaid
graph LR
  A[Start] --> B{Check something}
  B -->|Yes| C[Process #1]
  B -->|No| D[Process #2]
  C --> E[End]
  D --> E[End]
```
- `graph LR` はノードを左から右に並べる指定。  
- 条件分岐っぽい表現も簡単に書けます。

### 5-2. シーケンス図
```mermaid
sequenceDiagram
  participant User
  participant Server
  User->>Server: Request
  Server-->>User: Response
```
- `sequenceDiagram` ブロックを使えばリクエスト応答の流れも可視化。

### 5-3. ガントチャート
```mermaid
gantt
  dateFormat  YYYY-MM-DD
  title プロジェクト進捗
  section 準備
    タスクA :a1, 2025-01-01, 3d
    タスクB :after a1, 4d
  section 実装
    タスクC :2025-01-10, 5d
```
- マイルストーン管理やタスクスケジュール表として使えます。

---

## 6. まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/e211942f-fbc5-aff5-b3df-d4bce870bf0a.png)

1. **ChatGPTのキャンバス機能**は、文章やコードをリアルタイムで編集しながらAIのフィードバックを受け取れる、便利なインターフェース。  
2. キャンバス機能で生成された図を調べたところ、**HTML＋Mermaid.js**でフローチャートなどを描画する実装がそのまま出力されていた。  
3. **Mermaid.jsをHTMLで使う**には、CDNかローカルのスクリプトを読み込み、`<div class="mermaid">...</div>` にコードを書くだけ。  
4. **Markdown環境だけでなく、HTMLでも柔軟にMermaid.jsを扱える**と、ドキュメントやチーム共有にとても便利。

---