はじめに
七尾百合子さん、お誕生日 195日目 おめでとうございます！ nikkieです。
半年前に書いた記事の宿題を1つ終わらせます
目次
sphinx-revealjs製スライドにMermaidによる図を表示する
今年2月に書いた記事
sphinxcontrib-mermaid を使って、このような sphinx-revealjs スライドを作りました。
以下の宿題を残していました。
- スライドの背景色を黒から白に変えたのは、mermaidディレクティブで黒い線と文字で描画するために何も見えなくなる問題に対処して
mermaidディレクティブでスタイルを調整できるのかも（宿題）
こちらに取り組みます。
:config:で線の色を変えられる！
REAMDE の Directive options
:config:: JSON to pass through to the mermaid configuration
このように書きました1。
.. mermaid:: ../pyconjp/logging-handler-flow.mmd
:config: {"themeVariables": {"lineColor": "#fff"}}
Mermaid のドキュメントを見たところ、線の色は lineColor で指定していました。
- Customizing Themes with
themeVariablesにオレンジにした例 - Theme Variablesに一覧
{"theme": "base"}も指定するのかなと思ったのですが、base テーマのデフォルトのスタイルが当たったので lineColor だけの指定にしています。
https://mermaid.js.org/config/theming.html#available-themes
base - This is the only theme that can be modified. Use this theme as the base for customizations.
Mermaid の図のズームもできる！
再び sphinxcontrib-mermaid の README より
:zoom:: can be used to enable zooming the diagram.
実際の例
https://github.com/mgaitan/sphinxcontrib-mermaid/blob/1.0.0/docs/zoom.rst?plain=1#L4-L5
.. mermaid:: :zoom:
これを設定したのがこちらです。
https://ftnext.github.io/2025-slides/pyconjp/stdlib-logging-kata.html#/11/5
Mac のトラックパッドのみでの確認ですが、ズームインしたりドラッグしたりができました！
終わりに
sphinxcontrib-mermaid の README から、Mermaid の図にスタイル指定する方法を知りました。
:config:でthemeVariablesを指定lineColorで線の色を変えました
:zoom:
先日の PyCon JP 2025 の発表中、Mermaid で描いた Logging Flow の図が小さいなと痛感しました。
事前にできていればなおよかったのですが、公開しているスライドを今回小さく改善できました。
