【簡単】Mermaidの始め方

Engineering
この記事を書いた人

PharmaXというオンライン薬局のスタートアップで薬剤師・エンジニアとして働いています。Rails・React・TypeScriptなどを書きます。英語が得意でTOEIC900点・通訳案内士資格取得。主に薬剤師の働き方やプログラミング、英語学習について書きます。当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
>> 詳しいプロフィール

Tomoyuki Katoをフォローする

 

クラス図やドメインモデル図を作るのに、良いツールないかなと探していたところ、Mermaidが良いという話を教えてもらった。

 

で、実際に使ってみたのでMermaidの導入方法についてメモ書きをしておく。

 

Mermaidとは

MermaidはMarkdown形式で書けるチャートの作成ツールだ。

 

例えば

  • フローチャート
  • シーケンス図
  • ガントチャート
  • クラス図
  • 状態遷移図

などを書くことができる。

 

Mermaidと似たようなツールにPlantUMLがある。

けど、これはJavaの実行環境が必要で少し面倒くさい。

 

一方MermaidはJavaScriptベースなので、小難しい環境構築が必要なく、すぐに始められる。

 

Mermaidを使うと何が嬉しいの?

Mermaidを利用して嬉しいことはいくつかある。

アップデートをしやすい

チャート図をFigmaなどのツールで書いていると、プロダクト開発が進むにつれてドキュメントのアップデートが疎かにながちになってしまうことがあると思う。

 

もちろんMermaidを使ってもドキュメントのアプデートが疎かになる可能性はある。

けど、Markdown形式で書けるので細かな手直しなどが少なく、ドキュメントをアップデートするハードルが低いのは確かだ。

 

GitHubで管理できる

GitHubで管理できるので更新履歴を残すことも可能だ。

GitHubと連携しているおかげで、どんな経緯で更新されたのかを追いやすくなる。

 

Mermaidの始め方

 

僕はVS Codeを使っているので、ここからはVS Codeを使っている前提で話を進めていく。

 

1:拡張機能を導入する

以下の2つの拡張機能を導入しよう

 

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の記事>

Mermaidでユースケース図を書いてみる
Mermaidの他にUML図を描くツールとしてPlantUMLがある。 PlantUMLはユースケース図を書けるのだけど、実はMermaidはユースケース図に対応していない。 しかし以下の記事でも書いた通り、Ja