1. はじめに
～ChatGPTキャンバス機能で生成されたHTMLから気づいたこと～
- Markdown上でMermaid.jsが描けるのはよく知られていますが、実はHTMLでも簡単にMermaid.jsを埋め込めるってご存じでしたか？
- さらに、最近登場したChatGPTのキャンバス機能で図解を生成したところ、裏側のソースが「HTML＋Mermaid」の形で出てきて驚きました。
- 本記事では、ChatGPTのキャンバス機能の概要と、そこで発見したHTMLにMermaid.jsを埋め込む方法を備忘録としてまとめます。
2. ChatGPTのキャンバス機能とは？
キャンバス機能でMermaid.js + HTMLを実装させてる様子
-
右上のプレビューで実行可能
- プレビュー機能を利用することで、記述内容を即座に確認することが可能。
- 自分の環境では図解をうまく表示ができなかった。
- ファイルに実装内容をコピペしてローカル環境で確認する必要があった。
-
コードレビュー機能
- コードを確認し、問題点や改善点を指摘する。
-
バグ修正機能
- 実装内容の中からバグを検出し、適切な修正案を提示する。
2-1. リアルタイム編集が可能
- キャンバス機能は、ChatGPTが生成した文章・コードを「サイド画面」上で直接編集できるインターフェース。
- ユーザーは修正点をそのまま書き込み、AIにフィードバックを求めることができるため、効率的にプロジェクトを進められます。
2-2. インタラクティブな画面
- 従来の「テキストチャット形式」だけでなく、視覚的に編集状態を確認できるのが特徴。
- チャット画面とは別のキャンバス領域に、文章・コード・図解などが表示されます。
2-3. 多機能性
- 部分的なコードレビューや文章校正も可能で、変更箇所を指定してAIにリライトを依頼できる。
- プロジェクトとして保存・再編集がしやすいので、長いドキュメントや複数ファイルの管理にも対応。
3. キャンバス機能で生成されたHTML + Mermaidに気づいた
- ChatGPTのキャンバス機能に「あるフロー図を描いてほしい」と依頼したところ、
キャンバス画面にフロー図が表示されました。自分の場合はローカルに実装をコピーしてhtmlの表示を確認してフロー図が表示されるのを確認した。 - その図を右クリックまたは設定メニューからソースコードを確認してみると、下記のようにHTMLの中にMermaid.jsが埋め込まれたコードが生成されていたのです。
<!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を利用する方法
4-1. CDNを使う場合
- HTML
<head>内でMermaid.jsを読み込む<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script> -
<div class="mermaid">にMermaidのコードを貼り付ける<div class="mermaid"> graph LR A --> B B --> C C --> D </div> - 仕上げに
mermaid.initialize()を呼ぶ<script> mermaid.initialize({ startOnLoad: true }); </script>
4-2. ローカルのファイルを使う場合
- CDNのリンクをダウンロード済みの
mermaid.min.jsへのパスに変更するだけでOK。 - それ以外の設定はほぼ同じです。
5. 実際の図解の例
5-1. フローチャート
-
graph LRはノードを左から右に並べる指定。 - 条件分岐っぽい表現も簡単に書けます。
5-2. シーケンス図
-
sequenceDiagramブロックを使えばリクエスト応答の流れも可視化。
5-3. ガントチャート
- マイルストーン管理やタスクスケジュール表として使えます。
6. まとめ
- ChatGPTのキャンバス機能は、文章やコードをリアルタイムで編集しながらAIのフィードバックを受け取れる、便利なインターフェース。
- キャンバス機能で生成された図を調べたところ、HTML＋Mermaid.jsでフローチャートなどを描画する実装がそのまま出力されていた。
-
Mermaid.jsをHTMLで使うには、CDNかローカルのスクリプトを読み込み、
<div class="mermaid">...</div>にコードを書くだけ。 - Markdown環境だけでなく、HTMLでも柔軟にMermaid.jsを扱えると、ドキュメントやチーム共有にとても便利。