PlantUMLを使ったER図の書き方

はじめに

ポートフォリオ作成にあたり初めてER図を一から作成いたしました。
その際に、PlantUMLを使用して作成したので、作成方法について備忘録的に残します。

対象者

この記事は下記のような人を対象にしています。

• 駆け出しエンジニア
• プログラミング初学者
• 初めてER図を作成する方
• 初めてPlantUMLを使用する方

環境

MacBook Air（M2）

PlatUMLとは

PlantUML は、シーケンス図、クラス図のようなダイアグラムを素早く作成するためのコンポーネントです。
UML以外にもER図やガントチャートのようなものも書くことができます。

PlantUMLはVSCode上で記述＆プレビュー表示することができます。
これが非常に便利でしたので、今回はVSCode上でPlantUMLを使用してER図を記載する方法を書いていきます。

PlatUMLをVSCodeで使用する際の導入方法

1. VSCodeの拡張機能としてインストールする

※インストール済のため「アンインストール」の表記となっています

2. （Macの場合のみ）　以下のインストールを実行する

brew install --cask temurin
brew install graphviz

3. プレビューを表示する

option+Dで表示

PlatUMLでのER図の書き方の基本

ファイルを作成する

.pu の拡張子でファイルを作成します。
他にも、.wsd、.puml、.plantuml、.iumlの拡張子も使えます。

基本の構文

@startumlと@enduml内に記載する

erb.pu

@startuml

entity users {
  *id [PK]
  --
  name
  email
  password
}

（省略）

@enduml

エンティティとアトリビュート（属性）の作成

erb.pu

entity users {
  id [PK]
  --             '羅線を引ける
  name
  email
  password
}

リレーションの作成

記述方法	意味
|o-	0か１
||--	1のみ
}o--	0以上
}|--	1以上

example1 |o--o{ example2
example1 ||--|{ example3

配置変更

リレージョンの両エンティティの間に-u-、-r-を記述する。

記述方法	意味
u	上
d	下
r	右
l	左

先ほどのexample2を左に、example3を上に配置するには

example1 |o-l-o{ example2
example1 ||-u-|{ example3

おわりに

PlantUMLを使ったER図の作成方法についてまとめました。
これ以外にも書き方の種類は色々とありますので、以下参考記事等を参照してください。

初めてのQiita記事投稿となり、またエンジニアとしても駆け出しの駆け出しであるため、
記載内容に誤り等がある場合にはご指摘いただけますと幸いです。

参考記事

ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など）
PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る
PlantUMLでER図を書く