はじめに
- mermeid.jsは簡単なフロー図などをmarkdownで書けるライブラリです
- github, VSCode対応のExtentionも出て使い勝手良さそうなので簡単に紹介してみます
mermaid.jsの紹介
https://qiita.com/uzuki_aoba/items/a01f8b0b52ced69c8092
とてもすばらしくわかりやすい。もう追記することがない。
↓に紹介するExtensionを入れると、githubなどでも使えるようになります。
関連ツールの紹介
githubでmermaid.jsを描画できるようにする
以下のExtensionを入れて開くだけ。
https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil
↓確認用にgithubに簡単な図を上げてみました。
https://github.com/lc-shimazaki/qiita-sample/blob/master/mermeidjs/README.md
VSCode
以下のExtensionを入れてMarkdownでPreviewするとmermaid.jsで描いたフローが描画できます。
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
Atomとかにもあるので、割といろんなエディタで似たようなツールがあるはず。
所感
- 自分１人のためのドキュメントや、簡単なプレゼンで使う分には結構いい！
- でもチームで使うほどかは微妙、自己満ツールかも
- 複雑な図は管理しづらい
- そもそも図が変わるようなことってあんまないだろうから無理に差分管理とかする必要もない気がする
- でも少人数チームとかで、軽く声かけたらExtension入れてくれるような感じなら使っていいんじゃないかなぁ