chatgpt-mermaid-bookmarklet

What’s this これは何？

This is a bookmarklet to visualize/unvisualize Mermaid format code output by ChatGPT(or Copilot). When the bookmarklet is executed, a mermaid icon appears in the upper right corner, and each click on this icon toggles between source and image views.

ChatGPT(Copilot)が出力したMermaid形式のコードをビジュアライズ/解除するブックマークレットです。 ブックマークレットを実行すると右上隅にマーメイドのアイコンが現れ、これをクリックするごとにソース表示と画像表示が切り替わります。

Off On

Install & Basic usage インストールと基本的な使い方

[!IMPORTANT] If you are looking directly at README.md, the Bookmarklet link is not enabled with the following instructions. Please access the link below. github.io/chatgpt-mermaid-bookmarklet

Installation and usage instructions are as follows.

  1. Download mermaid script (mermaid.min.js) from one of following links and save as a file.

  2. DRAG following link on your bookmark toolbar to create bookmarklet.
    🧜‍♀️️ visualize

  3. Visit ChatGPT or Copilot
  4. Click the bookmarklet then you will see a mermaid icon and a dialog on the center of the page.
  5. Drag mermaid.min.js file and drop on the dialog in order to be loaded.
  6. Ask ChatGPT/Copilot to draw any graph in mermaid format.
  7. Click the icon then you will see that the Mermaid code block is converted to diagram.

Step 1, 2, and 5 are required once (Step 5, 6 is required for each service). After set up is done, JS file is saved in localStorage and loaded from there.

[!IMPORTANT] README.mdを直接見ている場合は以下の説明でBookmarkletリンクが有効になりません。下記のリンクにアクセスしてください。 github.io/chatgpt-mermaid-bookmarklet

インストール、利用方法は次のとおりです。

  1. Mermaidスクリプト(Mermaid.min.js)を下記のいずれかからダウンロードしてファイルとして保存します。

  2. 下記のリンクをブックマークバーにドラッグしてブックマークレットを作成します。
    🧜‍♀️️ visualize

  3. ChatGPT あるいは Copilot にアクセスします。
  4. ブックマークレットをクリックします。ページの右上隅にマーメイドのアイコンが現れ中央にダイアログが現れます。
  5. ダウンロードしたmermaid.min.jsをダイアログの上にドラッグし、JSファイルを読み込ませます。
  6. ChatGPT/CopilotにMermaid形式で図を書くよう指示します。
  7. マーメイドアイコンをクリックすると出力されたMermaidコードブロックがビジュアル化されます。

上記のステップ１，２、５は初回のみ必要です。（ステップ５, ６はサービス毎に実施が必要です。）２回目以降にBookmarkletを起動した場合、スクリプトはローカルストレージから読み込まれます。

More.. その他の機能

Toggle Display & Edit 表示切り替え・編集

By repeatedly clicking the icon, you can toggle between Mermaid format display and graph display. After displaying the graph, if you return to the Mermaid format display, it will become editable. If there is a syntax error in the Mermaid format output by the LLM, you can fix it on the page.

アイコンのクリックを繰り返すとMermaid形式表示とグラフ表示を切り替えることができます。 一度グラフ表示したあとにMermaid形式表示に戻すと編集可能になります。 LLMが出力したMermaid書式に問題があってSyntax Errorが発生する場合、ページ上で修正可能です。

Icon Position アイコンの位置

You can drag and move the Mermaid icon to a desired position. The display position is saved and will appear in the same place the next time you start.

マーメイドアイコンの位置はドラッグして移動できます。表示位置は記録され、次回起動時に同じ場所に表示されます。

Update Mermaid JS ファイル更新

To update Mermaid JS, follow these steps (needs to be executed for each site):

  1. Right-click the icon to display the dialog
  2. Drag and drop the new JS file

Mermaid JSをアップデートするには以下の手順に従います。(サイトごとに実行が必要です)

  1. アイコンを右クリックしてダイアログを表示させる
  2. 新しいJS Fileをドラッグ＆ドロップする

Uninstall Localstorage アンインストール

To delete the recorded MermaidJS and other information from Localstorage, follow these steps (needs to be executed for each site):

  1. Right-click the icon to display the dialog
  2. Press the Uninstall button

記録したMermaidJSやその他の情報をLocalstorageから削除するには以下の手順にしたがいます。(サイトごとに実行が必要です)

  1. アイコンを右クリックしてダイアログを表示させる
  2. Uninstallボタンを押下する

Note 技術的なメモ

Install on localstorage

This bookmarklet uses Mermaid.js to visualize the Mermaid code. mermaid.js is published on CDN and freely accessible, but ChatGPT’s CSP does not allow you to import it by specifying script.src or by using fetch.

To work around this limitation, we decided to have users download Mermaid.js and then pass it to the bookmarklet. Once passed, Mermaid.js is stored in localStorage (in ChatGPT’s domain), so this operation is not necessary after the second time.

このブックマークレットはMermaid.jsを使ってMermaidのコードを可視化します。mermaid.jsはCDNで公開されており、自由にアクセスできますが、ChatGPTのCSPではscript.srcを指定したり、fetchを使ってインポートすることができません。

この制限を回避するために、ユーザにMermaid.jsをダウンロードしてもらい、それをブックマークレットに渡すことにしました。一度渡されたMermaid.jsはlocalStorage(ChatGPTのドメイン内)に保存されますので、2回目以降はこの操作は必要ありません。

Patch for Mermaid.js

This bookmarklet extracts codes corresponds to code.language-mermaid ,which is generated by ChatGPT/Copilot, and processes it one by one in the form mermaid.run({nodes:[TARGET]}). mermaid.run can also treat the query code.language-mermaid directly, in which case it processes this query internally using document.querySelector. While document.querySelector is powerful, it cannot find the element under it if ShadowDOM is used (i.e. case of Copilot). This bookmarklet will search inside the ShadowDOM to find the code matching code.laguage-mermaid and pass it to mermaind.run.

Since Mermaid.js also uses document.querySelector inside each diagram render, the above tweaks is not sufficient to achieve visualization in the case of Copilot. The patched Mermaid.min.js provided here has been modified so that where document.querySelector is called (where it becomes null when using ShadowDOM), it becomes a call to TARGET.querySelector.

このブックマークレットでは表示されている画面のcode.language-mermaid に該当する箇所を抽出して mermaid.run({nodes:[TARGET]})という形で一箇所ずつ渡します。 mermaid.runはcode.language-mermaidというクエリを直接受け取ることもでき、その場合、内部でdocument.querySelectorなどを使ってこのqueryを処理します。 document.querySelectorは強力ですが、ShadowDOMが利用されている場合(つまりCopilotの場合）にはその配下の要素を見つけることができません。 このブックマークレットではShadowDOMの内部まで探索してcode.laguage-mermaidに合致するコードを見つけ、mermaind.runに渡します。

Mermaid.jsでは個々のレンダーの内部でもdocument.querySelectorを利用して操作を行うため、Copilotでのビジュアライズを実現するには上記の対応でも不十分です。ここで提供しているパッチ適用されたMermaid.min.jsはdocument.querySelectorが呼ばれているところ(ShadowDOM利用時にnullになるところ)がTARGET.querySelectorの呼び出しになるよう、変更を加えています。

Markdownではリンクを[xxx](link)という形式で表記します。 linkに()を含むと正しく認識できないため、 通常のbookmarkletではエスケープしないこれらの文字もエスケープする必要があります。このREADME.mdに添付しているブックマークレットは下記のコマンドで生成しています。

bookmarklet source.js | sed 's/(/%28/g; s/)/%29/g' | pbcopy

Misc その他

This site is open source. Improve this page.