2018年7月13日

【PlantUML】Visual Studio Codeのプラグインを使ってUMLを作成しよう!(基本編)


Content
【PlantUML】Visual Studio Codeのプラグインを使ってUMLを作成しよう!
こんにちは、ゆうこです。2015年に中途入社し、プログラム組みつつプロジェクト管理もしてます。
突然ですがUML、便利ですよね!
ユースケース図を描いて、機能が足りているか確認したり、
シーケンス図を描いて、関連する処理と順番を共有したり。
UML図を描くのに何を使ってますか?オンラインの画像描画エディタ?Excel?
実はVisualStudioCodeでも、プラグインを入れると簡単にUMLが描けるんです。
今回はUML作成プラグイン PlantUMLの活用と、実際にプロジェクトで使った感想を紹介します。

なおこの記事は、プロジェクトメンバー4名(せーいち、たいすけ、つかさ、ゆうこ)で共同執筆しています。

PlantUMLはどうやって入れるのよ?

[expand title=本文を表示 swaptitle=本文を非表示]
【基本編】使ってる?Visual Studio Code おすすめプラグイン紹介 #01にもあるように、
サイドメニューの上から5番目のアイコンをクリック、もしくはCtrl+Shift+Xを押して、拡張機能タブを開きます。
“PlantUML”と入力して、プラグインをインストールしましょう。
プラグインをインストール
このままだと見栄えの確認が出来ないので、Graphvizも入れます。
Graphvizの公式サイトのDownload > 対象OS > パッケージを選んでダウンロードします。
Graphvizが使えるOSは、Windows、Mac、Linux(Ubuntu、Fedora、Debian、Redhat、CentOS)、Unix(FreeBSD)です。
今回私たちはWindows8.1、Windows10で作業しましたので、
Stable 2.38 Windows install packagesからmsiを取得しました。
解凍してインストールしましょう。
Graphvizの公式サイト
アイコン設定はvscode-iconsがお勧めです。PlantUMLファイルが専用アイコンになります。
vscode-icons
[/expand]

基本の使い方

[expand title=本文を表示 swaptitle=本文を非表示]

ファイルを作る

VisualStudioCodeのメニュー > ファイル > 新規ファイル(もしくはCtrl+N)で新しいファイルを作ります。
ファイルに以下のように打ち込みます。

@startuml
@enduml

任意の場所に、ファイルの拡張子”*.pu”で一旦保存します。
これで下準備は出来ました。

ためしに表示してみる

それでは、先ほどのファイルに、

@startuml
title シーケンス図
ユーザ -> 登録画面
@enduml

と入力して、Alt+Dを押してみてください。PlantUMLプレビューが開き、UMLが表示されます!
シーケンス図1
なんとこれだけで、シーケンス図が描けました。すごくないですか!?
色変えやアイコンの変更も、文字入力だけです。
今までのように「アクターをドラッグして、いい感じのところにおいて、線をはみ出さないように引いて…」という努力は一切なしです。

@startuml
title シーケンス図
hide footbox
Actor ユーザ as User #eecc99
Boundary 登録画面 as Register #66ddbb
User -> Register : 画面を開く
activate Register
@enduml

シーケンス図2
すごくないですか!?

UML図を複数描きたい場合は?

@startuml~@endumlが囲んだ部分が1つのUMLに対応します。
1ファイルの中に、複数回@startuml~@endumlを書いたらプレビューはどうなるの?といいますと、カーソルが当たっている部分がプレビュー対象になります。
UML図が多くなる場合は、VisualStudioCodeのワークスペースで管理すると便利ですね。

作成した図を、画像で保存しよう

最後に、作成した図を画像にしましょう。
VisualStudioCode上でShift+Ctrl+Pを押して、コマンドパレットを開きます。
メニューの表示→コマンドパレットでもOKです。
コマンドパレットで”Plantuml export”と入力すると、出力方式が「カーソル位置」「ファイル内」「ワークスペース内」から選べます。
「カーソル位置」は、現在カーソルが当たっているUMLのみが対象
「ファイル内」は、ファイル内のUMLが対象
「ワークスペース内」は、ワークスペース内のすべてのUMLが対象
です。今回は「ファイル内」を選びます。
ファイル内
続いて、出力形式を選びます。pngを選んでみます。
出力形式
しばらくして、画面右下にエクスポート完了のメッセージが表示されたら成功です!
エクスポート完了
「レポートを表示」を押すと出力パネルが開き、出力場所が表示されます。
レポートを表示
Ctrlを押しながら出力ファイルパスをクリックすると、パスの位置にあるファイルが開きます。
出力ファイル
無事、png形式でファイルが出力されました。使い方の一通りの説明はおしまいです。お疲れ様でした。
[/expand]

PlantUMLでできること

PlantUMLではシーケンス図以外にも色々作図できます!UML表記はもちろん、ワイヤーフレームでモック画面もつくれたりするのです。
[expand title=クラス図]

クラス図

title クラス図例
class "BaseClass(基底クラス)" as BaseClass {
+ string userID
+ string userName 
}
note right :"全てのクラスは基底クラスを継承する"
 
class "UserManagerClass(ユーザー管理クラス)" as UserManagerClass {
+ bool Login()
}
BaseClass <|-- UserManagerClass: 継承

クラス図例
[/expand]
 
[expand title=ユースケース図]

ユースケース図

@startuml
left to right direction
actor A君
actor B君
rectangle 運動会 {
A君 --> (開会式)
A君 --> (徒競走)
A君 --> (パン食い競争)
A君 --> (障害物競走)
A君 --> (大玉転がし)
A君 --> (閉会式) 
(開会式) <-- B君
(障害物競走) <-- B君
(パン食い競争) <-- B君
(閉会式) <-- B君
}
@enduml

ユースケース図
[/expand]
 
[expand title=アクティビティ図]

アクティビティ図

@startuml
start
if(コンロは2つ以上ある?) then (yes)
fork
:目玉焼きを焼く;
fork again
:ホウレン草のソテーを作る;
end fork
else (no)
:目玉焼きを焼く;
:ホウレン草のソテーを作る;
endif
@enduml

アクティビティ図
[/expand]
 
[expand title=コンポーネント図]

コンポーネント図

@startuml
[在庫管理システム] as InventorySystem
[発注システム] as OrderSystem
[顧客管理システム] as CustomerSystem
:店員:<.l.顧客:注文
OrderSystem<.l.:店員::注文情報入力
InventorySystem<.l. OrderSystem :連携
CustomerSystem<.u. OrderSystem:連携
@enduml

コンポーネント図
[/expand]
 
[expand title=状態遷移図]

状態遷移図

@startuml
state GameStart{
[*] -> 自機小
自機小 -> [*] : 敵に接触
自機小 --> 自機中 : アイテムに接触
自機中 --> 自機中 : 敵小に接触
自機中 --> 自機小 : 敵中・大に接触
自機中 --> 自機大 : アイテムに接触
自機大 --> 自機中 :敵大に接触
自機大 --> 自機大 :敵小・中・アイテムに接触
}
@enduml

状態遷移図
[/expand]
 
[expand title=オブジェクト図]

オブジェクト図

@startuml
title オブジェクト図の例
object "Order : 発注画面" as Order
object "InventorySearch : 在庫検索" as InventorySearch
object "CustomerSearch: 顧客検索" as CustomerSearch
object "InventoryMasterAccess : 在庫マスタアクセス" as InventoryMasterAccess
object "SupplierMasterAccess : 発注先マスタアクセス" as SupplierMasterAccess
 
Order -- InventorySearch
Order -- CustomerSearch 
InventorySearch -- InventoryMasterAccess 
InventorySearch -- SupplierMasterAccess 
@enduml

オブジェクト図
[/expand]
 
[expand title=配置図]

配置図

@startuml
title 配置図の例
package クライアント {
class "Webブラウザ" as WebBrowser
}
package Webサーバー{
class IIS 
class "モジュール" as Module
}
package DBサーバー{
class SqlServer
}
IIS -- WebBrowser 
Module - IIS 
SqlServer -- Module
' クラスボックスの余計な情報を非表示に
hide members
hide circle
@enduml

配置図
[/expand]
 
[expand title=タイミング図]

タイミング図

@startuml
Title 飛行機搭乗状況
caption メモリの単位は時間(分)になります。
concise "飛行機 運行状況" as Plane
robust "搭乗者 心理状況" as User
User is リラックス
@0
User is 緊張
Plane is 離陸
@10
Plane is 離陸中
@20
Plane is 安全圏
User is リラックス
Plane -> User : シートベルト解除\nアナウンス
@60
Plane is 着陸中
User is 緊張
Plane -> User : シートベルト着用\nアナウンス
@70
Plane is 着陸
User is リラックス
@75
@enduml

タイミング図
[/expand]
 
[expand title=ワイヤーフレーム]

ワイヤーフレーム

@startsalt
{+
{* ファイル | お気に入り | 履歴 }
{/ トップ | 社内ニュース | 社外ニュース | 飲み会情報 }
{
名前 | " "
性別: | { (X) 男性 | () 女性 }
飲み会名: | { "同期飲み会" | [決定] }
}
{
    { 表示順: | ^新着順^ }
    [X] 他部署情報を含む
    [ ] 真面目な飲み会 
}
{#
. | 参加人数 | 会費
同期飲み会 | 10人 | 3000円
部署内お食事会| 不明 | * 
}
[Close]
}
@endsalt

ワイヤーフレーム
[/expand]
 
[expand title=Ditaa]

Ditaa

@startditaa
 
/--------------+        /------+        /--------------+
|              |        |      |        |              |
|      +-------+        |      |        |      +-------+
|      |         +------+      +------+ |      |        
|      +-------+ |                    | |      +-------+
|    cRED      | +------+      +------+ |    cRED      |
+--------+     |        |      |        +--------+     |
         |     |        |      |                 |     |
+--------+     |        |      |        +--------+     |
|              |        |      |        |              |
|              |        |      |        |              |
+--------------+        +------+        +--------------+
 
+------------------------------------------+
|content                                   |
|                                          |
|  +------------------------------------+  |
|  |Document                            |  |
|  |                                    |  |
|  |  +--------+ +--------+ +--------+  |  |
|  |  | DocA   | | DocB   | | DocC   |  |  |
|  |  | {d}    | | {d}    | | {d}    +<-------+
|  |  +--------+ +--------+ +--------+  |  |  |
|  |                                    |  |  |
|  +------------------------------------+  |  |
|                                          |  |
|  +------------------------------------+  |  |Input
|  |Source                              |  |  |
|  |                                    |  |  |
|  |  +-------------+ +--------------+  |  |  |
|  |  | FileA       | | FileB        +--------+
|  |  +-------------+ +--------------+  |  |
|  |                                    |  |
|  +------------------------------------+  |
|                                          |
+------------------------------------------+
 
@endditaa

Ditaa
[/expand]
 
[expand title=ガントチャート]

ガントチャート

2018年6月現在、β版です。

@startgantt
[機能A 設計] as [A設] lasts 10 days
[機能A 製造・単テ] as [A製] lasts 20 days
[機能B 設計] as [B設] lasts 7 days
[機能B 製造・単テ] as [B製] lasts 12 days
[結テ] lasts 10 days 
[A設] -> [A製] 
[B設] -> [B製]
[A製] -> [結テ]
[B製] -> [結テ]
@endgantt

ガントチャート
[/expand]

まとめ

設計で使用する図は一通りPlantUMLで作成できることが判りました。
次回は、実際の業務でPlantUMLを用いて設計した時の使い心地、メリット/デメリット についてお伝えします!

もしかして興味あるかも?

使ってる?コードエディタ『Visual Studio Code』のススメ
【基本編】使ってる?Visual Studio Code おすすめプラグイン紹介 #01
【HTML編】Visual Studio Code おすすめプラグイン紹介 #02

これで彼女ができる!ITディレクターの課題分析術
要件定義。それが一番大事。

2018年7月13日 【PlantUML】Visual Studio Codeのプラグインを使ってUMLを作成しよう!(基本編)

Category 技術開発

ご意見・ご相談・料金のお見積もりなど、
お気軽にお問い合わせください。

お問い合わせはこちら