はじめに Mermaid はとても便利な記法です。テキストで図が書けて、構造も分かりやすい。 一方で、業務で使っているとこんな場面に出会います。 図は描けたけど、会議で拡大すると文字が潰れる 全体を俯瞰したいのに、スクロールと拡大を繰り返すことになる 「ちょっとここ見せて」と言われた瞬間に詰まる 「描画できる」ことと「会議で使える」ことは別なんだな、というのを痛感しました。 背景：Notion での運用が限界だった 当初は、Mermaid コードを Notion で管理していました。 コード管理はしやすい 図も表示できる ただし、会議で使うと問題が顕在化します。 拡大すると文字・線が潰れる 全体像を見せたいのに解像度が足りない 「どこを見ているか」が共有しづらい 拡大・移動自体は可能でも、解像度と操作感が会議用途に耐えないと、結果的に使われなくなるという点が一番の課題でした。 mermaid.js 本来の思想に立ち返る mermaid.js 自体は、 SVG ベース 拡大縮小前提 劣化しないことが前提の設計 という思想を持っています。 つまり、