VSコードでmermaid.jsを使ってフローチャートを書くのが便利すぎる

知っている方も多いかもしれませんが、mermaid.jsというものを知って非常に便利だったので紹介します。

色々な図が簡単に表示できます。

mermaid.jsとは

Mermaid.js（マーメイド・ジェイエス）は、テキストベースでフローチャートやシーケンス図、ガントチャートなどを描画できるJavaScriptライブラリです。

プログラマーやドキュメント作成者に人気があり、Markdown記法に近い感覚で図を作成できるのが特徴です。

何がいいか

これの何がいいかというと、

・メモ的にサクッと図を作ることができる

・作業ファイルと一緒に保存できる

というところが挙げられます。

フローチャート図って意外と作るためのいいソフトがなくて、もちろんpowerpointやdrow.ioなどで作ることができます。しかし、いちいちソフトを起動するのも面倒くさいですし、外部に公開するまでもないようなメモだと非常に手間がかかります。

その点、これを使えば簡単な記法で見れるような図を作ることができますし、何よりもmdファイルなので軽量で保存もしやすいのが特徴です。

導入方法・使い方

vscodeを使っている方は非常に簡単で、以下のプラグインを入れることでプレビューに反映されるようになります。

色々な図が作れるのですが、私がよく使うフローチャート図の書き方を下にまとめます。

非常にシンプルで、結果も見やすくていいですよね。

細かい図形の違いもcssとかいじらないで変えることができます。

他にも色々な図が書けます。

開発も進んでいるので、今後も種類が増えていきそうです。