変数名末尾の $（ドル記号）が動作しない
Mermaidのクラス図でクラス変数（静的変数 / Static Member）を表現するには、属性（変数）名の末尾に $（ドル記号）を記述しますが、これが上手く動かないようです。
AIに相談しながら色々と試してみましたが、結局 Mermaid の不具合ということに落ち着きました。どうやら前から指摘されていた不具合のようですが2021年ごろから繰り返し指摘されてきた不具合のようです。
それ以外にもメソッドを示す () や辞書型のデータを指定する {} についても表示がおかしくなるようです。
() については、Python のタプルで初期値を設定しようとしたところ変数がメソッドと認識されてしまいました。これはパーサーの不具合かと思いますが、こちらも解決することはできませんでした。
結局 AI の提案で PlantUML へ移行することにしました。
Mermaid と PlantUML はどちらが優れているということはなく、「用途や使う環境」によって向き不向きがはっきりと分かれます。目的に合わせて以下のように選びます。Mermaid がおすすめな人・ケース• 手軽さ・スピードを重視したい• GitHub、Notion、Zenn、Obsidian など、Markdown を書くプラットフォーム上でそのまま図を表示したい（特別なプラグインや環境構築がほぼ不要）• 学習コストを下げたい（Markdownに似た直感的な記法）• AI（ChatGPTやCursorなど）に図のコードを生成させたい（AIとの相性が非常に良い）• 主な用途：フローチャート、シーケンス図、ガントチャート、簡易的なER図などPlantUML がおすすめな人・ケース• 本格的なUML図（クラス図、コンポーネント図、ユースケース図など）をしっかり作りたい• 細かいレイアウトや表現力の高さを求めている（複雑なシステム設計に向く）• オフライン環境や社内サーバー等でセキュアにレンダリングしたい（JavaやGraphviz環境を構築できる）• 主な用途：ソフトウェアの詳細設計、複雑なオブジェクト指向のモデリング
Mermaid は Markdown の中でも記述できたりGitHub でも図が表示できるなど便利なのですが、今回はクラス変数が必要だったので移行することにしました。
PlantUMLの本家サイトは広告の嵐
無償で利用させてもらっていてなんなんですが、Webサイトはあまりの広告の多さに利用を諦めました。ポップアップでダウンロードを進めてくるのですが無視していたらいつのまにか画面が真っ黒になりウイルスに感染したかと思いました。
結局、VSCode 用の拡張機能があるのでそちらを使用することに。
しかしながらこちらでもやはり () の問題が発生。
AI としばらくやりとりした結果
{field}
を指定することで強制的に変数と認識させることに成功しました。
{} 内の () は数値文字参照で逃げる
Mermaid でもあった辞書型のデータ指定については、PlantUML でも表現が無理なようです。
最終的に {} をダブルクオーテーションで囲むことで文字列として認識させることになりました。
さらに、辞書型のデータの中にタプルが入っている場合は、数値文字参照で無理やり図に () を表示させることに。
( -> (
) -> )
漢字で逃げる手もあった
AIと色々やって上記の結果になったのですが、やはりソースを見ていて数値文字参照があったりと分かりづらい点もあったので色々と試行錯誤した結果、漢字で記述したらどうかなと思い立って試してみたところうまく動いてくれました。
パーサーが漢字の（）｛｝を区切り文字として認識しないようなのでそのままデータとして図に表示してくれるようです。
さて、どちらが良いのか？
作成したクラス図のテキストをAIに読み込ませることを考えるともう少し検討が必要かもしれません。
