【UML】VSCode + PlantUMLでUMLを書く

3644 ワード
plantuml uml VSCode uml テキストリンク

概要

作図ツールの選択肢はいくつかありますが、下記の点に魅力を感じ、PlantUML（ http://plantuml.com/ja/ ）を選択しました。

  • ソースコードから画像を出力できる
  • バージョン管理できる（差分を見られる！）
  • レイアウトの微調整を自動でやってくれる

機能

  • シーケンス図、ユースケース図、クラス図、アクティビティ図、状態遷移図（ステートマシン図）などのUMLの作成だけでなく、ガントチャートやER図も作成できるようです。（私はUML以外では使用したことはありません）
  • 画像の出力形式は、png, svg, eps, pdf, vdx, xmi, scxml, htmlに対応しています。
  • オンラインジェネレータ（ http://plantuml.com/ja/ ）もあるので、試用の上、検討すると良いかもしれませんね！

準備

Visual Studio Code（VSCode）＋ PlantUMLのプラグインを使いました。

VSCodeをインストール

https://code.visualstudio.com/ からダウンロードしてインストールします。

Javaをインストール

PlantUMLを実行するためにはJavaが必要です。
https://java.com/ja/ からダウンロードしてインストールします。

Graphvizをインストール

GraphvizはPlantUMLのソースファイルからUMLの画像ファイルを生成する際に必要となります。
http://www.graphviz.org/ からダウンロードしてインストールします。

VSCodeにPlantUMLをインストール

  1. VSCodeを起動
  2. ウィンドウの左下にある歯車アイコンをクリックして EXTENSIONSを開く。

  3. 検索窓に PlantUMLと入力すると、PlantUML Rich PlantUML support for Visual Studio Code.が現れるので、Install

    （Ctrl + P→ext install plantumlだと早いみたい）

  4. VSCodeを再起動

以上で、準備は完了！

使い方

1.ファイルを新規作成し、***.puで保存

2.試しにユースケース図を書いてみます。
詳細な説明は割愛しますが、図とサンプルコードを交互に眺めると書き方が掴めてくると思います。

@startuml

:管理者: as admin
:一般ユーザ: as user
(ユースケース) as use

admin -> use
user ..> use

note bottom of admin : 図中にコメントを書けます
note right of use
  このユースケースは、
  サンプルです。
end note

@enduml

3.Alt + Dでプレビューを見ることができます。

4.画像を出力する
Ctrl + Shift + Pでコマンドパレットを開き、plantと入力すると、PlantUML: Export Current Diagramが表示されるので選択します。画像形式を選択すると、ファイルがエクスポートされます。

こんな感じで簡単に図を作ることができます！

感想

  • 最初はレイアウトが思ったように整わずもどかしいですが、慣れてくると綺麗にレイアウトできるようになると思います。（->を-->にしてみたり、-left->とかにしてみたり）
  • gitでバージョン管理できるのは素晴らしい。切り戻しが楽！

バージョン情報

  • VSCode：1.36.1
  • PlantUML：2.11.2
  • Graphviz：2.38