1443
1399

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Visual Studio Code で UML を描こう!

Last updated at Posted at 2017-04-08

この記事では、Windows 環境に Visual Studio CodePlantUML をセットアップする手順を説明します。

test.gif

PlantUML とは

PlantUML は、以下のような図をテキストで素早く描くためのオープンソースプロジェクトです。

  • シーケンス図 / Sequence diagram
  • ユースケース図 / Usecase diagram
  • クラス図 / Class diagram
  • アクティビティ図 / Activity diagram
  • コンポーネント図 / Component diagram
  • 状態遷移図 / State diagram
  • オブジェクト図 / Object diagram

環境

下記の環境で動作確認しました。

セットアップ

Visual Studio Code のインストール

  1. Visual Studio Code を開く
  2. [Download for Windows] を押してインストーラーをダウンロードする
  3. ダウンロードしたインストーラーを実行する
  • 例)VSCodeSetup-1.11.1.exe

PlantUML のセットアップ

1. Java のインストール

PlantUML の実行には、Javaの実行環境が必要となります。

  1. java.com を開く
  2. [無料Javaのダウンロード]ボタンを押す
  3. [同意して無料ダウンロードを開始]を押し、インストーラーをダウンロードする
  4. ダウンロードしたインストーラーを実行する
  • 例)JavaSetup8u121.exe

2. Graphviz のインストール

PlantUML が UML を描画するために使用しているソフトウェアです。

  1. Graphviz - Graph Visualization Software を開く
  2. 左側のバーから Download を開く
  3. License ページの末尾にある[Agree]を押す
  4. Download ページの Windows の Stable and development Windows Install packages をクリックする
  5. MSIファイルを選択してインストーラーをダウンロードする
  6. ダウンロードしたインストーラーを実行する
  • 例)graphviz-2.38.msi

インストール先を変更した場合には、環境変数"GRAPHVIZ_DOT"でパスを指定する必要があるそうです。

3. PlantUML のインストール

Visual Studio Marketplace で PlantUML をインストールします。

  1. Visual Studio Code を起動する
  2. "Ctrl + P" と入力して、Quick Open を開く
  3. Quick Open に ext install plantuml と入力して、Enter キーを押す
    install.png
  4. 検索結果から PlantUML を選択し、[インストール]を押す
    PlantUML.png
  5. インストール完了後に[再度読み込む]を押して Visual Studio Code を再起動する

動作確認

1. プレビュー表示

  1. Visual Studio Code を起動する
  2. 拡張子 .pu で新規ファイルを作成する
  3. ファイルに以下を入力し、**"Alt + D"**でプレビューを表示する
test.pu
@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml

test_result.png

2. 画像ファイルとして出力

  1. "Ctrl + Shift + P" でコマンドパレットを開く
  2. PlantUML: Export Current Diagram と入力する
    export.png
  3. png, svg, eps, pdf, vdx, xmi, scxml, html から出力形式を選択する
    image.png

PNGファイルとして出力した時のディレクトリ構成は、以下のようになります。

ディレクトリ構成
 test.pu
 test/
     シーケンス図.png

出力結果のPNGファイルは以下のようになります。

シーケンス図.png

PlantUML言語リファレンス

PlantUMLの文法は、"PlantUML Language Reference Guide"としてPDFファイルが提供されています。

  1. http://plantuml.com/download を開く
  2. PlantUML Language Reference Guide にある日本国旗を選択する
  3. "PlantUML_Language_Reference_Guide_JA.pdf"がダウンロードされる

なお、plantuml.com でも同様の説明がありますが、広告表示が鬱陶しいため、PDFファイルの方が読みやすいです。

終わりに

まだまだ PlantUML を使い始めたばかりですが、他のUMLの描画ツールと比べて以下の点が気に入っています。

  • テキストで UML を描けるため、Gitで管理しやすい
  • 図の細かいレイアウト調整などを気にしなくて良い

参考情報

1443
1399
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1443
1399

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?