Help us understand the problem. What is going on with this article?

Visual Studio Code で UML を描こう!

More than 3 years have passed since last update.

この記事では、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で管理しやすい
  • 図の細かいレイアウト調整などを気にしなくて良い

参考情報

couzie
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした