クラス図やドメインモデル図を作るのに、良いツールないかなと探していたところ、Mermaidが良いという話を教えてもらった。
で、実際に使ってみたのでMermaidの導入方法についてメモ書きをしておく。
Mermaidとは
MermaidはMarkdown形式で書けるチャートの作成ツールだ。
例えば
- フローチャート
- シーケンス図
- ガントチャート
- クラス図
- 状態遷移図
などを書くことができる。
Mermaidと似たようなツールにPlantUMLがある。
けど、これはJavaの実行環境が必要で少し面倒くさい。
一方MermaidはJavaScriptベースなので、小難しい環境構築が必要なく、すぐに始められる。
Mermaidを使うと何が嬉しいの？
Mermaidを利用して嬉しいことはいくつかある。
アップデートをしやすい
チャート図をFigmaなどのツールで書いていると、プロダクト開発が進むにつれてドキュメントのアップデートが疎かにながちになってしまうことがあると思う。
もちろんMermaidを使ってもドキュメントのアプデートが疎かになる可能性はある。
けど、Markdown形式で書けるので細かな手直しなどが少なく、ドキュメントをアップデートするハードルが低いのは確かだ。
GitHubで管理できる
GitHubで管理できるので更新履歴を残すことも可能だ。
GitHubと連携しているおかげで、どんな経緯で更新されたのかを追いやすくなる。
Mermaidの始め方
僕はVS Codeを使っているので、ここからはVS Codeを使っている前提で話を進めていく。
１：拡張機能を導入する
以下の２つの拡張機能を導入しよう
Markdown Preview Mermaid Support
Markdown Preview Mermaid Supportは、VS Code上でプレビューを見られるようにしてくれるものだ。
マークダウンファイルにmermaid記法で書いてから赤丸のボタンを押す。
そうすると以下のようにプレビューを表示してくれる。
Mermaid Markdown Syntax Highlighting
こちらは名前の通り、Mermaid記法のシンタックスハイライトをしてくれる。
必須ではないけど、入れておくと便利だ。
2：マークダウンファイルを作成する
拡張機能を導入したら、.mdで終わる拡張子を作る。
ER図を書くのであれば、ER_DIAGRAM.mdといったようにファイルを作れば良い。
そしてマークダウンファイルに↓のように書くとチャートを描ける。
```mermaid ここにMermaid記法で書く ```
3：マークダウンファイルにMermaid記法で書く
詳しくはMermaidのGitHubのページをみてほしいけど、以下のように書けば様々なチャートを作成できる。
フローチャート
flowchart LR
A[LP] -->|遷移| B(登録)
B --> C{購入の意思決定}
C -->|購入する場合| D[購入者特典]
C -->|購入しない場合| E[割引クーポン]
シーケンス図
```mermaid
sequenceDiagram
患者->>医師: 体調が悪くて・・・
loop 診察
医師->>医師: 色々と検査する
end
医師-->>患者: 問題ないですね！
```
ER図
```mermaid
erDiagram
users ||--o{ comments: ""
users {
string name
string email
integer age
}
comments {
bigint user_id
string text
datetime created_at
datetime updated_at
}
```
終わりに
導入も簡単な上にそこまで学習コストも高くないので、思っていた以上に使い勝手が良さそう。
ぜひ使ってみてください。
<Mermaidの記事>
