【簡単】Mermaidの始め方 | Pharma Lab

【簡単】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記法

そうすると以下のようにプレビューを表示してくれる。

mermaid記法

 

Mermaid Markdown Syntax Highlighting

こちらは名前の通り、Mermaid記法のシンタックスハイライトをしてくれる。

必須ではないけど、入れておくと便利だ。

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
タイトルとURLをコピーしました