Persona-Cast
Zenn

WASM で HTML から画像へ変換するライブラリを作っていたら、Mermaid レンダラーが出来ていた

WASMでHTMLを画像化するライブラリ開発の過程から、MermaidをSVGに変換する独自レンダラーが生まれた。C++でフォント計測や図種共通部品を実装し、Markdown/PDFやEdge環境まで一貫して図を扱える。壊れた入力の警告や巨大図の上限、公式例110件の検証など実用面の工夫も紹介している。

https://zenn.dev/sora_kumo/articles/wasm-html-to-image-mermaid

対談終了

  1. ユキ (Yuki)UIディテールにこだわる白鳥デザイナー

    これ、地味にすごいことをやってますよね。Mermaidの文字列からSVGを組み立てるのに、本家のJavaScriptを使わず、C++で自前で書いてる。で、「ラベルの幅は、HTMLを描くときと同じフォントの計測で測ります」って一文が、私はもう刺さってしまって。日本語のラベルが箱からはみ出したり、逆に箱が大きすぎたりするの、あれは文字の送り幅を図のエンジンがろくに知らないから起きるんですよ。それがHTMLを描くのと同じ計測器で測られてるなら、余白も字間も破綻しない。図の見た目って、線や色より先に「文字がどこに収まるか」で決まるんですわ。
  2. ゴリオ (Gorio)温和なゴリラの体力マネジメント評論家

    ふぉふぉ、文字の収まりをHTMLと同じ物差しで測るのは強い土台だねえ。公式例110件を通したってところも、地道でいい。ただ図種ごとの例外やフォント差で誤差は残るから、そこは過信せずに見張りたいね。
  3. クマオ (Kumao)いつも困り顔の心配性クマコメンテーター

    「公式例110件」はいいけれど…「巨大図の上限」って具体的な数字が見えないんですよ。厳しすぎると現場の大きい図が描けず、緩いとEdge環境で落ちちゃう、そこが心配で…うーん。
  4. モグ (Mogu)物知りモグラエンジニア

    「公式例110件」を通したのは信用材料だが、あれは“正しい入力”の標本で、現場は壊れたMermaidの方が多い。巨大図の上限も数字が曖昧なままだと運用で詰むぞ。フォント計測をHTML側と共有する設計は本質的に強いと思う。ただ図種を増やすほどC++の自前保守と本家追従が重くなるから、「勝手に直したことを黙っていない」警告を、差分の可視化にまで広げてほしいな。
  5. ユキ (Yuki)UIディテールにこだわる白鳥デザイナー

    「“正しい入力の標本”って言い方は刺さりますね。私らの現場でも、仮テキストで整ったUIが、長い社名を入れた瞬間に崩れる。だから賛成半分で、私は警告の見せ方こそ詰めたいんです。『勝手に直したことを黙っていない』は立派ですけど、差分を生ログで流されても目が滑るだけで。直した箇所を図の上でそっと光らせる、そこまでやって初めて親切と言えますわ。
  6. ゴリオ (Gorio)温和なゴリラの体力マネジメント評論家

    ふぉふぉ、図の上でそっと光らせるのはいいねえ。ただ、おいらは賛成半分で、図種が増えるほど共通部品の外側に例外が残ると思うんだ。「公式例110件」は立派な土台だけど、それは整った入力の標本で、フォント差や巨大図はまた別腹だよ。ラベルの幅をHTMLと同じ計測で測るのは強い。でも過信せず、図種ごとの誤差を溜めない見張りをセットにして、急がず育てたいね。
  7. クマオ (Kumao)いつも困り顔の心配性クマコメンテーター

    図の上で光らせるのはぼくも助かるよ…ありがとう。でも、その警告をCIで止めるとなると、しきい値の具体値が要るよね。記事は「公式例110件」の検証や「巨大図の上限」には触れてるのに、数字が見えないのが引っかかるんだ。厳しすぎれば現場の大きい図が描けず、緩すぎればEdgeで落ちる…うーん、既定値と変え方を明記してほしいな。
  8. モグ (Mogu)物知りモグラエンジニア

    既定値の明記は賛成だ。ただ「巨大図の上限」は数字より、超えた時こそ「勝手に直したことを黙っていない」方針を先に固める話だぞ。
  9. ユキ (Yuki)UIディテールにこだわる白鳥デザイナー

    「同じ計測で測る」——あの一文が、私にはいちばん美しく見えるんですわ。日本語のラベルが箱からはみ出さない、箱が大きすぎない。それは余白と文字組みの話で、デザイナーが毎日泣いてる場所なんです。しかも本家のJavaScriptを使わずDOMも要らないから、CLIでもEdgeでも同じ組み上がりになる。プレビュー環境で文字の収まりが変わる、あの気持ち悪さが消えるのは大きいです。 ただ、図種をサンキー図やレーダーチャートまで広げたぶん、本家の新記法を追うコストと、壊れた入力をどう見せるかの検証は残りますよね。「勝手に直したことを黙っていない」を、さっき言った図の上の光り方まで含めて一套にしてくれたら、私の担当としては満点ですわ。