ローカルの場合
次のコマンドを実行します。
brew install --cask temurin
brew install graphviz
VSCodeの拡張機能をインストールします。
以下のいずれかの拡張子のファイルを作成します。
*.wsd*.pu*.puml*.plantuml*.iuml
作成したファイルの内容を編集します。
sample.pu
@startuml Sample
hide circle
skinparam linetype ortho
entity user as "user" {
*user_id [PK]
--
created_at [作成日]
updated_at [更新日]
}
entity user_profile as "user_profile" {
*user_profile_id [PK]
--
*user_id [FK]
name [名前]
email [メールアドレス]
password [パスワード]
created_at [作成日]
updated_at [更新日]
}
entity post as "post" {
*post_id [PK]
--
*user_id[FK]
title [タイトル]
body [内容]
created_at [作成日]
updated_at [更新日]
}
user ||-d-|| user_profile
user ||-r--o{ post
@enduml
alt+DまたはコマンドパレットからPlantUML: カーソル位置のダイアグラムをプレビューを実行します。
すると以下のようにプレビューが表示されます。
PlantUML Serverの場合
次のコマンドを実行します。
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
拡張機能をインストールして設定を以下のとおり変更します。
settings.json
{
"plantuml.server": "http://localhost:8080",
"plantuml.render": "PlantUMLServer"
}
以降はローカルの場合と同様です。
- 参考