Zoomaid

クリップボードの Mermaid コードを貼り付けて、拡大・移動しながら快適に読むためのビューア。 HTML + mermaid 本体だけで動きます（ビルド不要 / オフライン可 / macOS・Windows 共通）。 そのまま Chrome 拡張としても読み込めます。

セットアップ

git clone https://github.com/shige-misora/zoomaid.git ~/GitHub/zoomaid
cd ~/GitHub/zoomaid
ln -sf "$PWD/bin/zoomaid" ~/.local/bin/zoomaid   # PATH の通ったところへ
ln -sf "$PWD/bin/zoomaid" ~/.local/bin/mmv       # 短い別名（任意）

mermaid 本体は vendor/ に同梱してあるので、ビルドも npm install も不要です。 index.html をダブルクリックすればそれだけで動きます。

使い方

ターミナルから（zoomaid）

zoomaid                  # クリップボードの中身を開く
zoomaid docs/arch.md     # ファイルを開く
cat x.mmd | zoomaid      # 標準入力を開く

引数なしの zoomaid は、クリップボードが Mermaid でなければ（URL や普通の文章、空のとき） 図を渡さずビューアだけを開きます。貼り付け直せばそのまま使えます。 ファイルやパイプで明示的に渡したものは、Mermaid に見えなくてもそのまま渡します。

ビューアを開いたまま zoomaid を撃ち直すと、そのタブの中身が差し替わります。 図を直しては zoomaid で確認、という往復がタブを増やさずに回せます。

zoomaid examples/sample.md   # 動作確認用のサンプル（図が2つ入っています）

ブラウザから

index.html をダブルクリックして開き、⌘V / Ctrl+V で貼り付けるだけ。

• GitHub からコピーした ```mermaid 囲みの Markdown をそのまま貼っても認識します
• 1つの Markdown に複数の図が含まれていれば、ヘッダのページャ（‹ 1/3 ›）で切り替えられます
• .md / .mmd ファイルのドラッグ&ドロップにも対応
• 最後に見た図はブラウザに保存され、次回起動時に復元されます

操作

操作	動作
トラックパッド 2本指スワイプ	平行移動
トラックパッド ピンチ	カーソル位置を中心に拡大縮小
ドラッグ	平行移動
ダブルクリック / ⌥+ダブルクリック	その位置を拡大 / 縮小
⌘/Ctrl + ホイール	拡大縮小（マウス利用時）
+ -	拡大 / 縮小
F または 0	全体表示にフィット
1	等倍（100%）
← →	図が複数あるとき切り替え
C	クリア（表示中の図を消して初期状態に戻す）
T	ダーク / ライト切り替え
E	コード編集ペインの開閉（編集すると即座に再描画）
S または ⌘S	PNG 保存

マウスホイール単体の挙動（パン / ズーム）は ⚙ から変更できます。

「クリア」は図・コード・保存された内容・URL のハッシュをまとめて捨てて初期状態に戻します （テーマや ⚙ の設定は保持）。

PNG 保存

表示中のズーム位置に関係なく、図の全体を高解像度で書き出します。

• 解像度は 2x / 3x / 4x から選択（既定 3x）
• 背景はテーマ色 / 白 / 透過から選択（既定はテーマ色）
• 書き出し時はラベルを SVG テキストとして再描画するため、ブラウザを問わず文字が欠けません

Chrome 拡張として使う

chrome://extensions を開き、デベロッパーモードを ON にして 「パッケージ化されていない拡張機能を読み込む」からこのリポジトリのフォルダを選びます。 ビルドもコピーも要りません（ビューアはターミナル版と同じ index.html を共有しています）。

できること:

• ページ中の Mermaid 図にホバー すると左上に ⤡ Zoomaid が出て、押すとビューアで開きます。 GitHub は図をクロスオリジンの iframe で描画しますが、ソースは親ページに残っているのでそこから拾います。
• テキストを選択して右クリック →「Zoomaid で開く」。サイトを問わず使えるので、 Slack や AI チャットの出力をそのまま図にできます。
• ツールバーのアイコンを押すとビューアだけが開きます（引数なしの zoomaid と同じ）。 そこに ⌘V で貼り付けます。

ターミナル版と同じく、ビューアのタブは開きっぱなしなら中身が差し替わります。

ホバーでボタンが出るのは、既定では GitHub / Gist / GitLab / Backlog だけです。 増やすには manifest.json の content_scripts.matches に足してください。

要求する権限は contextMenus / scripting / activeTab / storage の 4 つだけです。 activeTab は右クリックした瞬間のそのタブにしか効かないので、閲覧履歴を読む権限は持ちません。 図のコードは外に出ず、index.html#c=… のフラグメントとしてローカルのビューアに渡すだけです。

図のソースが取り出せない場合（クライアント側で描画した結果、元のコードが DOM から 消えているページ）はボタンを出しません。その場合はコードを選択して右クリックしてください。

デスクトップアプリのように使う

Chrome / Edge で index.html を開き、アドレスバー右の「インストール」→ アプリとして追加すると、 Dock / タスクバーに独立したウィンドウとして常駐します。

構成

index.html             ビューア本体（マークアップと CSS）
app.js                 ビューア本体（JS）
bin/zoomaid            ターミナルから開くためのラッパ（macOS / Linux）
bin/fetch-mermaid      同梱している mermaid の取得・更新
vendor/mermaid.min.js  mermaid 本体（同梱。読み込めない場合は CDN に自動フォールバック）
examples/sample.md     動作確認用のサンプル
manifest.json          Chrome 拡張の定義（リポジトリ全体がそのまま拡張になる）
extension/             拡張だけが使う部分（サービスワーカー / コンテントスクリプト / アイコン）

JS が app.js に分かれているのは、Chrome 拡張のページではインラインスクリプトが CSP で禁止されているためです。index.html を直接開く使い方は今までどおりです。

zoomaid は図のコードを base64url にして index.html#c=… の URL フラグメントとして渡すだけなので、 一時ファイルもローカルサーバも使いません。

テーマは OS のダーク / ライト設定に自動追従し、手動で切り替えた場合はその選択を記憶します。

mermaid の更新

bin/fetch-mermaid          # 最新の v11 系
bin/fetch-mermaid 11.17.2  # バージョン指定

vendor/mermaid.min.js をリポジトリに含めているのは、クローンしただけでオフラインで動く ことを優先しているためです（3.4MB）。更新したら差分をコミットしてください。

同梱物

mermaid（MIT License）を vendor/ に同梱しています。