はじめに
Mermaid はとても便利な記法です。
テキストで図が書けて、構造も分かりやすい。
一方で、業務で使っているとこんな場面に出会います。
- 図は描けたけど、会議で拡大すると文字が潰れる
- 全体を俯瞰したいのに、スクロールと拡大を繰り返すことになる
- 「ちょっとここ見せて」と言われた瞬間に詰まる
「描画できる」ことと
「会議で使える」ことは別なんだな、というのを痛感しました。
背景：Notion での運用が限界だった
当初は、Mermaid コードを Notion で管理していました。
- コード管理はしやすい
- 図も表示できる
ただし、会議で使うと問題が顕在化します。
- 拡大すると文字・線が潰れる
- 全体像を見せたいのに解像度が足りない
- 「どこを見ているか」が共有しづらい
拡大・移動自体は可能でも、
解像度と操作感が会議用途に耐えないと、結果的に使われなくなる
という点が一番の課題でした。
| 観点 | Notionでの実際の挙動 |
|---|---|
| 解像度 | 拡大すると文字や線が潰れ、可読性が下がる |
| 操作性 | スクロール移動が中心で、直感的なパン操作がしづらい |
| 会議利用 | 「今どこを見ているか」が共有しづらい |
mermaid.js 本来の思想に立ち返る
mermaid.js 自体は、
- SVG ベース
- 拡大縮小前提
- 劣化しないことが前提の設計
という思想を持っています。
つまり、
「拡大しても読める」
「全体を俯瞰しながら確認できる」
という使い方が 本来の姿 です。
であれば、
kintone 上でも、その体験を壊さずに使いたい
というのは、自然な発想だと思いました。
目指した利用シーン
このプラグインで一番重視したのは、次のシーンです。
- 会議・レビューの場
- 図を見ながら説明・確認する
- 「ここを拡大」「全体を見たい」が即座にできる
そのために、以下を必須要件にしました。
- SVG をそのまま描画する
- 拡大・縮小しても解像度を落とさない
- マウスホイールでズームできる
- ドラッグで直感的に移動できる
「高機能化」ではなく、
“本来あるべき使い勝手”を取り戻すことが目的です。
実装のポイント（技術）
1. Mermaid は SVG を直接レンダリング
Mermaid の render() を使い、
SVG をそのまま DOM に差し込みます。
- Canvas 化しない
- 画像として扱わない
これだけで、解像度劣化の問題は回避できます。
2. viewBox を内容に合わせて正規化
Mermaid が生成する SVG は、
初期状態だと viewBox が最適でない場合があります。
そこで、
- getBBox() で描画内容を取得
- padding を加えた viewBox を再設定
これにより、
- 初期表示で図が切れない
- 画面中央に収まりやすい
状態を作っています。
3. panzoom による拡大・移動
SVG に対して panzoom を適用します。
- マウスホイールでズーム
- ドラッグで移動
- 解像度は常に維持
ここで重要なのは、
「ズームできる」より「ズームしても読める」
という点です。
4. kintone プラグインとしての設計
- 複数の Mermaid フィールドに対応
- レイアウトの SPACE 要素を描画先に指定
- 全画面表示モードも用意
設定は最低限にして、
会議中に操作に迷わないことを優先しています。
なぜ無料で公開するのか
このプラグインは無料公開しています。
理由はシンプルで、
- Mermaid × SVG × pan/zoom
- kintone プラグインでの扱い方
これらの 実装例として参考にしてほしいからです。
無料だからといって、
UX の基本品質を下げたつもりはありません。
むしろ、
「無料でも、ここまでは当たり前にやる」
というラインを示したかった、という気持ちがあります。
AI と UX について少しだけ
最近は、AI でコードを書くこと自体は簡単になりました。
でも、
- 会議中にどう使われるか
- 一瞬の「見づらさ」がどう影響するか
- どこで使うのを諦められるか
こういう判断は、
実際に使って、失敗してみないと分からない。
今回のプラグインは、
- Notion で試して
- 会議で使って
- 「これはダメだ」と判断した結果
生まれたものです。
こうした実際の使い心地 ＝ UX 作りでは、
まだまだ AI に負けていないと思っています。
おわりに
このプラグインは、
- Mermaid を描画するだけのツールではありません
- 会議で「ちゃんと使える」図を目指しています
もし、
- Mermaid を業務で使っている
- 図を見ながら説明することが多い
- 拡大すると読めなくて困ったことがある
という方がいれば、
試してみてもらえると嬉しいです。
コードも公開していますので、
実装の参考としても自由に使ってください。
GitHub リポジトリ
ソースコード・README・使い方はこちらです。
👉 https://github.com/youtotto/kintone-Mermaid-Viewer-Plugin
不具合報告・改善案・PR も歓迎しています。
このリポジトリは、 kintone プラグイン開発におけるUX設計の一例としても公開しています。