Mermaidを使ってみた

プログラミング

2024.09.29

初めに
Mermaid とは
やってみた
感想

初めに

最近、ER図などの作図をするときにMermaidを使っています。
以下のようにGithubで図として表示されるのが便利で使っています。

Mermaid とは

Markdownで作図が可能なツールです。
「初めに」で書いたようにGithubで表示されたりvscodeの拡張があったり、Zennで書いた際にも図を表示できたりと対応するサービスも多いです。

作図できる図も多く、いくつか挙げると以下の図が作図可能です。

フローチャート
シーケンス図
クラス図
Gitグラフ
ER図

公式サイトに対応している図や書き方などは書かれています。

About Mermaid | Mermaid

Create diagrams and visualizations using text and code.

やってみた

初めにで表示したER図は以下MarkdownをGithubで表示したものです。

```mermaid
erDiagram

tasks {
  bigint id PK
  bigint user_id FK
  string title "タイトル"
  text description "詳細"
  datetime finished_at "完了済み"
  datetime created_at "作成日"
}

users {
  bigint id PK
  string sub "JWTから取得したsub"
  boolean is_disabled "無効化したユーザか"
  datetime deleted_at "ユーザ削除日"
}

tasks ||--o{ users : has
```

vscodeで「Markdown Preview Mermaid Support」という拡張を入れることでプレビューを表示しながら編集することが可能です。