VSCodeでMermaidを使ったダイアグラム作成
Mermaidとは
ダイアグラム作成およびチャート作図用のJavaScriptライブラリです。
https://mermaid-js.github.io/mermaid/
フローチャート、シーケンス図、ガントチャート、円グラフなどいろいろな図表を作成できます。
作図にはマークダウン記法が利用でき、作図したものはPNG/JPEGで書き出す事もできます。
zennやGithubやNotionなどエンジニアがよく使うサービスに対応しているのも嬉しい所です。
VSCodeで使うMermaid
VSCode + Mermaidを利用するとマークダウンで書かれた図表のプレビューや、図表の書き出しができます。
手順書やちょっとした説明の際に図表が使えると分かり易くスッキリとまとめる事ができる為、オススメです。
VSCode + Mermaidの準備
使用開始までの手順は以下となります。
- VSCodeのインストール
- Markdown Preview Mermaid Supportプラグインのインストール
- Markdown Preview Enhancedプラグインのインストール
※必須ではないですが、扱いやすくなります。
以上
あとは以下の様にマークダウンファイル内に記述してプレビューするだけです。
いくつか簡単な例を挙げていきます。
フローチャートの例
[flowchart.md] ```mermaid graph LR; enter[入店]; consider[検討]; order[注文]; confirm{材料有無}; cook[調理]; serve[料理提供]; enter --> consider; consider --> order; order --> confirm; confirm -- 無し --> consider; confirm -- 有り --> cook; cook --> serve; ```
シーケンス図の例
[sequence.md] ```mermaid sequenceDiagram autonumber participant guest as 客 participant waiter as ウエイター participant sheff as シェフ guest ->> waiter: 料理注文 waiter ->> sheff: 調理依頼 sheff ->> sheff: 調理 sheff ->> waiter: 配膳依頼 waiter ->> guest: 配膳 ```
円グラフの例
[piechart.md] ```mermaid pie title 売上割合 "餃子" : 10 "ビール" : 15 "天津飯" : 15 "青椒肉絲" : 20 "餃子" : 20 "チャーハン" : 20 ```
\ ログインしなくても検討機能が使える♪ /
Azureの案件を見てみる
まとめ
いかがだったでしょうか。
図表ツールやエクセル、パワーポイント等を使用せずにいつも利用しているエディタで図表が作れるととても効率的ですよね。
ぜひお試しください。