- 2023/02/06(月)
VSコードでmermaid.jsを使ってフローチャートを書くのが便利すぎる
本文中にアフィリエイトリンクが含まれる場合があります。
表示が乱れた場合は再ロードをお試しください。
表示が乱れた場合は再ロードをお試しください。
知っている方も多いかもしれませんが、mermaid.jsというものを知って非常に便利だったので紹介します。
色々な図が簡単に表示できます。
mermaid.jsとは
Mermaid.js（マーメイド・ジェイエス）は、テキストベースでフローチャートやシーケンス図、ガントチャートなどを描画できるJavaScriptライブラリです。
プログラマーやドキュメント作成者に人気があり、Markdown記法に近い感覚で図を作成できるのが特徴です。
何がいいか
これの何がいいかというと、
・メモ的にサクッと図を作ることができる
・作業ファイルと一緒に保存できる
というところが挙げられます。
フローチャート図って意外と作るためのいいソフトがなくて、もちろんpowerpointやdrow.ioなどで作ることができます。しかし、いちいちソフトを起動するのも面倒くさいですし、外部に公開するまでもないようなメモだと非常に手間がかかります。
その点、これを使えば簡単な記法で見れるような図を作ることができますし、何よりもmdファイルなので軽量で保存もしやすいのが特徴です。
導入方法・使い方
vscodeを使っている方は非常に簡単で、以下のプラグインを入れることでプレビューに反映されるようになります。
色々な図が作れるのですが、私がよく使うフローチャート図の書き方を下にまとめます。
非常にシンプルで、結果も見やすくていいですよね。
細かい図形の違いもcssとかいじらないで変えることができます。
| 記法 | ノードの形 | 例 |
|---|---|---|
A[テキスト] | 四角 | A[開始] |
B(テキスト) | 丸（楕円） | B(処理中) |
C{テキスト} | ひし形（条件） | C{OK？} |
D[[テキスト]] | サブプロセス風（角丸） | D[[サブ処理]] |
E((テキスト)) | 丸（二重円） | E((終了)) |
| 記法 | 意味 | 例 |
|---|---|---|
--> | 通常の矢印 | A --> B |
-.-> | 点線矢印 | A -.-> B |
==> | 太矢印 | A ==> B |
-- テキスト --> | ラベル付き矢印 | A -- はい --> B |
他にも色々な図が書けます。
開発も進んでいるので、今後も種類が増えていきそうです。
| 図の種類 | 説明 | graph指定 or キーワード |
|---|---|---|
| ✅ フローチャート（Flowchart） | 一般的な処理や条件分岐を表現 | graph TDなど |
| ✅ シーケンス図（Sequence Diagram） | オブジェクト間の時間順のやり取り | sequenceDiagram |
| ✅ ガントチャート（Gantt Chart） | タスクの期間や進行管理 | gantt |
| ✅ クラス図（Class Diagram） | オブジェクト指向のクラス構造 | classDiagram |
| ✅ 状態遷移図（State Diagram） | 状態とイベント遷移の流れ | stateDiagram-v2 |
| ✅ ER図（Entity Relationship Diagram） | データベースのテーブルとリレーション | erDiagram |
| ✅ ユーザー旅路図（Journey） | ユーザー行動やステップの可視化 | journey |
| ✅ Gitグラフ（Git Graph） | ブランチやコミットの視覚化 | gitGraph |
| ✅ 円グラフ（Pie Chart） | 円グラフ（統計的な割合） | pie |
| ✅ 要素マップ（Quadrant Chart） | 4象限で分類する図 | quadrantChart（実験的） |
| ✅ レーダーチャート（Radar Chart） | 多軸評価（五角形のような） | radar（実験的） |
| ✅ Zennチャート（C4 Diagram風） | C4モデリングに近い図 | flowchart応用、またはカスタム |
