top of page
検索

kintone で Mermaid 図を「解像度を落とさず」拡大・移動できるようにした話 〜会議で“使える”図を目指して〜

  • 祐斗 河合
  • 6 日前
  • 読了時間: 4分

はじめに

Mermaid はとても便利な記法です。テキストで図が書けて、構造も分かりやすい。

一方で、業務で使っているとこんな場面に出会います。


  • 図は描けたけど、会議で拡大すると文字が潰れる

  • 全体を俯瞰したいのに、スクロールと拡大を繰り返すことになる

  • 「ちょっとここ見せて」と言われた瞬間に詰まる


「描画できる」ことと「会議で使える」ことは別なんだな、というのを痛感しました。


背景：Notion での運用が限界だった

当初は、Mermaid コードを 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・使い方はこちらです。

不具合報告・改善案・PR も歓迎しています。

コメント

bottom of page