放浪軍師のアプリ開発局

VTuberみたいなアプリケーション夏狂乱など、自由気ままにアプリを開発したりしています。他にもいろいろやってます。尚、このブログはわからないところを頑張って解決するブログであるため、正しい保証がありません。ご注意ください。

Visual Studio Code 拡張機能 PlantUML で ER 図を作る

ご無沙汰しております。放浪軍師です。実は2月20日に第四子が誕生しましてね。さらにお仕事もハイパー忙しくて、しばらくブログ更新どころか自分のお勉強もまったくできない状況が続いておりました。あれから1か月ちょい経過し、妻もある程度動けるようになったためお勉強とブログ更新を再開したいと思います。いやぁほんとうに辛かった。特に洗濯…。

Visual Studio Code 拡張機能 PlantUML

さてブログ更新も久々という事で、今回はちょっとした内容で行きましょう。みんな大好き Visual Studio Code拡張機能で、 ER 図とかをいい感じに書ける PlantUML を紹介したいと思います。

plantuml.com

公式によれば ER図だけでなく色々なことに使える様子ですが、今回は ER 図に絞って紹介させていただこうと思います。

PlantUML で ER図を書く

plantuml.com

簡単かつ直感的に ER 図を作ることができるのでデータベースの設計に非常に便利です。テキストベースなので Git で管理できるのが良いですね。また、よくありがちな「テーブルをどの位置に配置すると良いかな?」とか「線を綺麗に等間隔で並ばないと気持ち悪い!」みたいな、よく考えればどーでもいいような事を一切考えなくて済むのが個人的には好きです。

プレビュー

こんな感じのを作ってみました。

f:id:roamschemer:20220405003926p:plain

GitHub

github.com

使い方

  1. VSCode 拡張機能 PlantUML をインストールする

    PlantUML で検索すると出てくるのでインストールします。

  2. .pu ファイルを作成する

    拡張子を *.pu にしてファイルを作成します。

  3. 初期準備をする

    作成した *.pu ファイルを開いて、以下のようなコードを書きます。

     @startuml test
     hide circle
     skinparam linetype ortho
    
     entity "users (ユーザー)" as users {
         * <<PK>> id : Guid : id
         --
         * <<u>> name    : string    : ユーザー名
         * display_name  : string    : ユーザー表示名
         * password_hash : string    : パスワード
         created_at      : date      : 作成日時
         updated_at      : date      : 更新日時
     }
    
     entity "smokers (燻製器)" as smokers {
         * <<PK>> id : Guid : id
         --
         * <<FK>> user_id            : foreignId : ユーザーid
         * name                      : string    : 燻製機器名
         off_temperature             : double    : 電源off温度(℃)
         on_difference_temperature   : double    : 電源onにする温度差(℃)
         created_at                  : date      : 作成日時
         updated_at                  : date      : 更新日時
         --
         unique : [user_id, name] 
     }
    
     entity "smoking_states (M 燻製実施状況)" as smoking_states {
         * <<PK>> id : Guid : id
         --
         * <<u>> name    : string    : 状況名
         * display_name  : string    : 状況表示名
         created_at      : date      : 作成日時
         updated_at      : date      : 更新日時
     }
    
     entity "smokings (燻製実施)" as smokings {
         * <<PK>> id : Guid : id
         --
         * <<FK>> smoker_id          : integer : 燻製器id
         * <<FK>> smoking_state_id   : integer : 燻製実施状況id
         temperature : 温度(℃)
         is_smoke : bool : 煙が出ている
         is_power_on : bool : 電源が入っている
         created_at : date : 作成日時
         updated_at : date : 更新日時
     }
    
     users ||..o{ smokers
     smoking_states ||..o{ smokings
     smokers ||..o{ smokings
    
     @enduml
    
  4. Alt + D でプレビュー(コードの部分で押さないとエラーがでます)

テーブルの書き方

基本はまぁ、見ればわかるので省略。<<PK>> とか <<FK>> とかは好きにローカルルールを決めておけば良いと思います。私の場合はヘッダーにルールを記載して運用しています。

' ローカルルール
'     頭には主キーを記載し -- で区切る
'     * 必須キー
'     <<PK>> 主キー
'     <<FK>> 外部キー
'     <<u>> ユニークキー
'     カラム名 : 型 : 説明 を書く
'     複合ユニークなど特別な記載は -- で更に区切って記述

@startuml test
hide circle
skinparam linetype ortho

@enduml

リレーションの書き方

以下のように書きます。左辺を親、右辺を子にすると良いでしょう。

  • 1 対 0 または 1

      users ||..o| user_details
    
  • 1 対 1

      users ||..|| user_details
    
  • 1 対 0 以上

      users ||..o{ user_items
    
  • 1 対 1 以上

      users ||..|{ user_items
    

まとめ

Visual Studio Code拡張機能を使いこなすとエンジニアライフが捗りますね。がんがん活用していきましょう。