【PlantUML】VSCODEでUMLする

Visual Studio Code で UML を使うためのメモです。
コードからグラフを作成できるのは、かなり便利ですよ!

環境構築

Java をインストールする

お好きなを Java をインストールする。

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 ファイルで出力してみた。

plantuml_iterator.png

関連リンク

参考書

クラス図の参考にさせていただきました。