개요

PlantUML에서 ER 그림을 쓰는 것이 있었지만,
그 시선이 엉망이 되어 고생했기 때문에 Tips를 남깁니다.

PlantUML을 사용한 적이 없지만 ER 다이어그램을 작성해야합니다

엔티티의 상자가 점점 오른쪽으로 늘어나서 곤란하다

관계의 선 길이를 변경하고 싶습니다

이런 고민을 가진 초보자의 방향의 내용입니다.

사전 준비

이번에 사용하는 테이블에 대해

이번에 사용하는 테이블은 아래와 같은 느낌입니다.
(Rails 응용 프로그램 테이블의 ER 다이어그램을 작성했기 때문에,
테이블의 명명 등은 ActiveRecord의 방식을 따른다. )

엔티티의 내용에 대해서는 언급하지 않습니다.

엔티티를 결합한 PlantUML

tables.pu

@startuml tables
entity companies as "companies\n会社" {
  + id [PK]
  --
  name [会社名]
  created_at [作成日]
  updated_at [更新日]
}

entity positions as "positions\n役職マスタ" {
  + id [PK]
  --
  company_id
  name [役職名]
  created_at [作成日]
  updated_at [更新日]
}

entity user_positions as "user_positions\nユーザー役職マスタ関連" {
  + id [PK]
  --
  user_id
  position_id
  created_at [作成日]
  updated_at [更新日]
}

entity users as "users\nユーザー" {
  + id [PK]
  --
  company_id
  login_id [ログインID]
  password [パスワード]
  created_at [作成日]
  updated_at [更新日]
}

entity user_profiles as "user_profiles\nユーザー詳細" {
  + id [PK]
  --
  user_id
  birthday[生年月日]
  name [ユーザー名]
  created_at [作成日]
  updated_at [更新日]
}

entity user_subordinate_users as "user_subordinate_users\nユーザー部下ユーザー関連" {
  + id [PK]
  --
  user_id
  subordinate_user_id [部下ユーザーID]
  password [パスワード]
  created_at [作成日]
  updated_at [更新日]
}

@enduml

초기 상태의 ER 다이어그램

특히 아무것도 고안하지 않은 상태에서는 아래와 같은 느낌입니다.

erd.pu

@startuml erd
' tables.pu はこのファイルと同じディレクトリに存在している想定です。
!include tables.pu

companies ||-o{ users
companies ||-o{ positions
users ||-o| user_profiles
users ||-o{ user_subordinate_users
users ||-o{ user_positions
positions ||-o{ user_positions
@enduml

여기에서 출력되는 그림은 이런 느낌이 됩니다.



음, 읽을 수 없습니다. 차라리 존재하지 않는 쪽이 괜찮은 ER도・・・.
이 그림을 몇 가지 수정으로 잘 보기 쉬운 그림으로 해 가고 싶습니다.

ER 그림을 쓰는 요령 목록

엔티티를 표시할 방향 결정

엔티티를 표시하는 방향,
상하 좌우로 지정하고 싶습니다.

erd.pu

 @startuml erd
 !include tables.pu

-companies ||-o{ users
+companies ||-d-o{ users
 companies ||-o{ positions
-users ||-o| user_profiles
-users ||-o{ user_subordinate_users
+users ||-l-o| user_profiles
+users ||-d-o{ user_subordinate_users
 users ||-o{ user_positions
 positions ||-o{ user_positions
 @enduml

지정하면 이런 느낌이 듭니다.



꽤 가시성이 개선되었습니다.

지정 방법

companies ||-d-o{ users의 의미는
"companies 의 아래를 향해 (down) users 를 표시한다"라고 하는 것입니다.
-r- 와 -u- 와 같이 지정하는 것으로,
상하좌우 어디에 엔티티를 표시할지를 변경할 수 있습니다.

지정할 수 있는 방향

l: left

r: right

u: up

d: down

사용하지 않아도 좋은 느낌으로 표시될 때는 일부러 지정할 필요는 없지만,
이번 ER 그림과 같은 경우에는 유용합니다.

참고

유스 케이스 다이어그램의 구문과 기능 - PlantUML
화살표 방향을 변경하려면을 참조하십시오.

관계의 선 길이 변경

관계의 선 길이를 변경할 수 있습니다.

erd.pu

 @startuml erd
 !include tables.pu

-companies ||-d-o{ users
+companies ||-d--o{ users
 companies ||-o{ positions
 users ||-l-o| user_profiles
 users ||-d-o{ user_subordinate_users
 users ||-o{ user_positions
 positions ||-o{ user_positions
 @enduml

변경점은 - 를 1개 추가했을 뿐입니다.
ER 다이어그램은 다음과 같습니다.



약간의 변경으로 상당히 관계의 흐름을 알기 쉬워졌습니다.

어떤 때에 편리?

위의 그림이라면 거기까지 고마움이 느껴지지 않습니다만,
아래와 같이 선이 교차해 버렸을 때 등에 힘을 발휘합니다.

선이 교차합니다.

아래 그림은 erd.pu의 엔티티 표시 방향 등
조금 어레인지 한 그림입니다.
이 그림에서는 관계의 선이 교차합니다.

another_erd.pu

@startuml erd
!include tables.pu

companies ||-r-o{ users
companies ||-u-o{ positions
users ||-u-o| user_profiles
users ||-d-o{ user_subordinate_users
users ||-o{ user_positions
positions ||-o{ user_positions
@enduml

선을 늘려 교차를 해소

아래와 같이 수정하면 선의 교차를 해소할 수 있습니다.

another_erd.pu

 @startuml erd
 !include tables.pu

 companies ||-r-o{ users
-companies ||-u-o{ positions
+companies ||-u--o{ positions
 users ||-u-o| user_profiles
 users ||-d-o{ user_subordinate_users
 users ||-o{ user_positions
 positions ||-o{ user_positions
@enduml

완성된 ER 그림

완성된 그림은 이런 느낌입니다.
그렇게 복잡한 일은 하지 않은 것에 비해 상당히 깨끗했습니다.



erd.pu

@startuml tables
!include tables.pu

companies ||-d--o{ users
companies ||-o{ positions
users ||-l-o| user_profiles
users ||-d-o{ user_subordinate_users
users ||-o{ user_positions
positions ||-o{ user_positions
@enduml

결론

처음에는 "이제 Excel이라든지 Draw.io로 그리면 어쩌면 ...?"라고 생각했습니다만,
요령마저 잡으면 어쩐지 보기 쉽게 그릴 수 없다고 생각했습니다.
그 밖에도 Tips를 발견하면 추기해 갑니다.

참고 사이트・기사

ER 다이어그램의 문법과 기능 - PlantUML

PlantUML로 ER 다이어그램 (ERD) 그리기 (비슷하지 않음) - Qiita

타도! PlantUML의 이런 레이아웃. How difficult it is to adjust the… | by Takuo | VELTRA Engineering | Medium