公式の見本ページを参考に Mermaid の装体調整で終了。
なぜか円画表が必要以上に大きく表示され見にくかったため,aria-roledescription="pie"
の場合のみ <svg>
に max-width: 75%
を設定した。他の画表は横幅によって中央寄せが適切でない場合があるが,円画表はある程度一定の大きさで目立つように表示されるため中央寄せにしておいた。これで概ね見本通りに表示されるようになった。
幅狭領当てで円画表の見出しや凡例が見切れてしまうことがあるが,これは公式見本でも同じなのでいったん保留。
違了表示が梱体を突き抜ける問題もあったため,親要素に overflow: hidden
を設定しておいた。