はじめに
最近、Bayesian Approachによる回帰モデルを活用する機会が有り、その際にグラフィカルモデルを描きたいと思ったんですが、どんなツールで書くべきか迷ってしまいました。
一方で世の中にはmermaid.jsというものがあり、「最近githubでmermaid記法を使えるようになった！」という話題をtwitterで目にしたので、「mermaid.jsを使えば楽にグラフィカルモデルを書けるのでは？」という考えに至りました。
本記事では、グラフィカルモデルをmermaid.jsで描く為に使えそうなtipsをまとめました：）
グラフィカルモデルって例えばこんな感じ
例えばこんな感じのグラフィカルモデルを書きたいんです。
mermaid.js でノードの形を変更する
括弧を使い別ける事で、ノードの形を変更できるようです。
こんな感じになるようです。
なお、グラフィカルモデルにおいては、基本的には円形ノードを使っていきます。
mermaid.js でノードの色を変更する
CSS の記法(?)が使えるようです。
こんな感じになります。
また、ClassDef を使う事で、複数のノードに同一のテーマを適用できるようですね。ノード名:::クラス名と記述します。
なおグラフィカルモデルにおいては、観測されていない確率変数は塗りつぶさず、観測されている確率変数は塗りつぶして表します。なので、ClassDef で観測変数と見観測変数のスタイルをそれぞれ定義して、使い分けたいです。
(ちなみに既知の定数は塗りつぶした点で表します。)
なので例えば、
繰り返しのノードを枠で囲む
サブグラフを用いれば、特定のノードを枠で囲める様ですね。
例えばこんな風に。
おわりに
とりあえずこれで何とか、グラフィカルモデルっぽい図は書けそうな気がします。(気がするだけで、実際には決して最適解ではないと思います...!)
皆さんはグラフィカルモデルをどうやって書いてるのでしょうか？オススメのツール等があればぜひコメント等で教えていただければ嬉しいです：）
draw.io等で手書きすべきなのかー。
参考
- 【目的無しの泥臭調査⑤】mermaid.jsの記法を覚えて、楽しく図を描く。
- Mermaid のテーマ・スタイルの変更方法
- CSS カラーコード