Visual Studio Code で UML を使うためのメモです。
コードからグラフを作成できるのは、かなり便利ですよ!
環境構築
Java をインストールする
お好きなを Java をインストールする。
- https://java.com/ja/download/
- http://jdk.java.net/
- https://aws.amazon.com/jp/corretto/
- https://developers.redhat.com/products/openjdk/download
Graphviz をインストールする
Windows
Windows の場合は、下記 URL から msi ファイルからインストールするのが楽。
OSX
OSX の場合は、下記のコードをターミナルで実行する。brew のアップデートを促されたらアップデートする。
brew install graphviz
Linux
Ubuntu
Linux(Ubuntu)の場合は、下記のコードをターミナルで実行する。
apt install graphviz
plantuml を Visual Studio Code にインストールする
Visual Studio Code 上でコマンドパレット(Ctrl + Shift + P or F1)を開き、下記のコードを実行する。
ext install plantuml
テスト
お試しで「Java言語で学ぶデザインパターン入門 結城 浩 著」に掲載されている「Interator」パターンのクラス図で表示するコードを入力してみる。
ファイルの拡張子を pu にして一旦保管しておくと、予約語がハイライトされ見やすくなる。
@startuml
interface Aggregate {
iterator()
}
class BookShelf {
books
last
getBookAt()
appendBook()
getLength()
iterator()
}
class Book {
name
getName()
}
interface Iterator {
hasNext()
next()
}
class BookShelfIterator {
bookShelf
index
hasNext()
next()
}
Aggregate -right-> Iterator : Creates
BookShelfIterator o.left. BookShelf
BookShelf o.down. Book
BookShelf .up.> Aggregate
BookShelfIterator .up.> Iterator
@enduml
コマンドパレット(Ctrl + Shift + P or F1)を開き、下記のコードを実行する。
PlantUML: Export Current Diagram
お好きなファイル形式で出力する。
試しに png ファイルで出力してみた。
関連リンク
参考書
クラス図の参考にさせていただきました。