遅ればせながら Mermaid.js を使ってみた
先日紹介した LogicFlow.js にも似ている、Mermaid.js というダイアグラムが描けるツールを使ってみる。知名度はコチラの方が高いだろうか。JS 製で、UML とかを描きやすいので、Java 製である PlantUML なんかよりも扱いやすい。
今回も CDN で JS を読み込んで、Vanilla なページで実装してみた。
- デモ : Practice Mermaid
- コード : frontend-sandboxes/practice-mermaid/index.html at master · Neos21/frontend-sandboxes
簡単なシーケンス図っぽいモノを描いてみた。もちろん文字でシーケンスを書いていくワケだが、構文は PlantUML とかを触ったことがあれば何となく習得していけそうなレベル。けっこう高機能なので、API は色々探してみてほしい。
レンダリング結果は SVG 要素内にゴロゴロと展開されるので、外部から CSS を無理やり当て込んだりもできる。ココらへん、完全に画像として出力されてしまう PlantUML と比べると都合の良いところかもしれない。
