Mermaid記法、巨大になったときの対処方｜タムタムのアウトプット

Markdonwで作図する方法の一つに、Mermaid記法ががあります。

このMermaid記法、さっと書けて便利なのですが、規模が大きくなりすぎると肉眼では確認しきれなくなるという問題が発生します。その問題に直面したときの対処療法をまとめてみました。

Contents

Mermaidの問題点

Mermaidは文法も簡単でテキストエディタでガンガン書けるので便利です。VSCodeやJetbrainsのMarkdownのビューで図の確認ができますし、Githubは何の設定もしなくても図が表示されます。またNotionでも対応されています。

使い勝手がいいので、プロジェクト初期などに、とりあえずMermaidでドキュメントを残しておくといったことを良くします。

しかしそんなMermaidでも以下の問題があります。

Mermaidは、図が大きくなるにつれオブジェクトが小さくなっていきます。拡大、縮小はできないので、そのうち肉眼では確認できなくなります。

また図の配置、リレーションは自動で表記され自分で配置を換えることができません。なので図が大きくなるにつれ、線もグチャグチャになり、図を見ても何が何だかわからない状態になります。

Mermaidは増改築を繰り返していくと、そのうち実用に耐えられない図になります。

図が大きくなりすぎたときの解決案の一つとして、図を分けるというものがあります。

例えば全ユースケースを1つの図で表現していた場合、いくつかのグループで分割して複数の図で表現するという方法があります。

ただ、別途、全体の概要図は欲しくなることがほとんどですし、分割が難しい図の場合もあります。この方法は銀の矢ではありません。ごく一部のケースに限り、この方法でも何とかなるぐらいのものです。

別の方法として、Mermaidの図をSVGに出力してしまうというものがあります。

SVGに出力すれば、拡大縮小できるので、小さすぎて見えない図も見えるようにすることはできます。SVGへの出力方法は、Mermaid Live Editorを使う必要があります。Dockerで動かすことができます。

docker run --rm -d -p 80:80 --name mermaid-live-editor ghcr.io/mermaid-js/mermaid-live-editor

と実行すれば、Editorのコンテナが起動します。http://localhostにアクセスして、左のCodeにMermaidのコードを貼り付け、VIEWボタンをじっこすれば、SVGが生成されます。

修了する場合は以下のコマンドです。

docker stop mermaid-live-editor

参考: https://dev.classmethod.jp/articles/mermaid-live-editor/

ただこの方法も、リレーションが見づらいという問題は解決できませんし、毎回SVGにするのが面倒くさいという欠点もあります。

巨大すぎてまともの見られない既存のMermaidがあって、とりあえず確認したいことがあるというときの一時対処として使う感じになるかと思います。

上述のいずれも方法も暫定対処にすぎず、巨大Mermaidを実用レベルにするものではありません。そんな方法は存在しません。

Mermaidは手軽にマークダウンでちょっとした図を書くときに使うものです。巨大になり、複雑になってきたときは、別ツールへの移行を検討するべきです。

移行先のツールとして、その図によって様々です。Drawioが万能で何でもこなせますが、それにも限度があります。Mermaidが巨大になりすぎて以降するときは、すでにDrawioでは厳しい図になっていることが多いかと思います。各分野の専用ツールを考慮すべきでしょう。

以上、Mermaid記法が巨大になりすぎたときの対処方法の考察でした。

Mermaidは好きで個人的にもよく使うのですが、やっぱりメモレベルの用途が多いです。しっかりとしたドキュメントに残す、ナレッジ共有などが目的の場合、早めに別ツールへの移行を検討したいところです。