【簡単!!】Visual Studio Code のインストールからPlantUMLを使えるようになるまで!!【オフライン対応】

ソフト

こんばんは。黒猫です。

今日は、簡単にUMLを描くことができるPlantUMLというツールを紹介したいと思います。

Visual Studio Code のインストール

ホームページに行き、Visual Studio Code(VSCode) をインストールします。
自分のパソコンに合わせて32bitか64bitを選択してください。

オフラインでインストールしたい方は.zipファイルをデスクトップなどのわかりやすい場所にダウンロードしてください。あとは解凍するだけで使用できるようになります。
(インストールというよりかはexeファイルを起動するといった状態に近いです)

プラグインの追加(日本語対応)

インストールが終わったらVSCodeを開いてください。
開くと左側にあるバーの中からプラグインの検索できる画面を開きます。
そこで「Japanese Language Pack for Visual Studio Code」というプラグインをインストールします。

オフラインでインストールしたい方はここで「Download Extension」をクリックしてダウンロードしてください。

その後、VSCodeのプラグイン検索画面で「VSIXからのインストール」を選択してします。
先ほどインストールしたVSIX拡張子のファイルを選んでプラグインをインストールをしてください。

PlantUMLのインストール

PlantUMLを使用するにはいくつかのソフトをいれる必要があります。

  • java
  • Graphviz (UMLを描画するために必要)
  • PlantUMLのプラグイン

javaのインストール

こちらのページでjavaをインストールします。
オフラインの場合は、オフライン版をダウンロードしてから実行してください。

Graphvizのインストール

こちらのページでインストーラをダウンロードしてインストールします。
windowsの場合は「stable 2.38 Windows install packages」を選択し、msiファイルを選択してダウンロードします。

PlantUMLのプラグインをインストール

日本語対応のプラグインを入れたときと同様に「PlantUML」を検索して、インストールします。
オフラインでインストールするためのVSIXファイルはこちらにあります。

PlantUMLの使い方

PlantUMLでシーケンス図を描く方法について紹介します。
VSCodeで新規作成をして、以下のテキストを入力します。

@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ –> アリス: レスポンス
@enduml

拡張子を.puで保存して、「Alt + D」を押すとプレビューが表示されます。

この画像を保存したいときは、「Ctrl + Shift + P」でコマンドパレットを開きます。macの方は「Command + Shift + P」で開くことができます。
開いたら「PlantUML: Export Current Diagram」と入力して出力したい拡張子を選択すれば出力ができます。

出力画像は作成したpuファイルのディレクトリに同じ名前のフォルダが作成され、その中に保存されます。

参考資料

今回はPlantUMLでシーケンス図の作成方法を説明しましたが、他の図の描き方については詳しいpdfがありますので、そちらを参照していただければと思います。

ダウンロードのページ
あなたがコンパイルされたjarファイル、言語のリファレンスガイドのいずれかをダウンロードすることができ、Eclipseプラグイン、jQueryプラグイン、Wordのアドインは、Javadocのためのドックレット、ソースコード

コメント

%d人のブロガーが「いいね」をつけました。
タイトルとURLをコピーしました