mermaid で作った図を Web ページに出す際、図が入りきらないので小さめに出したりしています。ただ、そうすると文字が小さくなって読みづらくなります。Google Maps みたいにズームとかパン（上下左右にドラッグで移動）できたらいいなと思ったのでスクリプトを書いてみました。
mermaid とは別に、 D3.js というライブラリを導入しました。以下が実行例です。
D3.js には SVG をズームできる機能があるので、それを利用してズーム・パン操作を導入しています。D3.js のズームは、 SVG タグの内側に g 要素を用意し、その g 要素の中身をパン・ズームできるようにするものです。
ただ mermaid が作る SVG は SVG 直下に色々な要素ができてしまうので、 g 要素を用意してその中に移動してあげる必要があります。
設計書などの文書を mkdocs で作る1テンプレートはこちら試みをしているのですが、上記のようなスクリプトを使えば動きのある面白いものが作れそうな予感がします。ただ、印刷が必要な環境だと印刷用のスタイルも考える必要がありそうです。