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

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

@startuml
@enduml

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

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

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

と入力して、Alt+Dを押してみてください。PlantUMLプレビューが開き、UMLが表示されます！

なんとこれだけで、シーケンス図が描けました。すごくないですか！？
色変えやアイコンの変更も、文字入力だけです。
今までのように「アクターをドラッグして、いい感じのところにおいて、線をはみ出さないように引いて…」という努力は一切なしです。

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

すごくないですか！？

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

最後に、作成した図を画像にしましょう。
VisualStudioCode上でShift+Ctrl+Pを押して、コマンドパレットを開きます。
メニューの表示→コマンドパレットでもOKです。
コマンドパレットで”Plantuml export”と入力すると、出力方式が「カーソル位置」「ファイル内」「ワークスペース内」から選べます。
「カーソル位置」は、現在カーソルが当たっているUMLのみが対象
「ファイル内」は、ファイル内のUMLが対象
「ワークスペース内」は、ワークスペース内のすべてのUMLが対象
です。今回は「ファイル内」を選びます。

続いて、出力形式を選びます。pngを選んでみます。

しばらくして、画面右下にエクスポート完了のメッセージが表示されたら成功です！

「レポートを表示」を押すと出力パネルが開き、出力場所が表示されます。

Ctrlを押しながら出力ファイルパスをクリックすると、パスの位置にあるファイルが開きます。

無事、png形式でファイルが出力されました。使い方の一通りの説明はおしまいです。お疲れ様でした。
[/expand]

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]

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

[/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]

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