VSCodeでクラス図書けるらしい

ので書くための前準備をやっていきましょう。

VSCodeのダウンロード

https://code.visualstudio.com/
ここからVSCodeのダウンロードページに飛びます。

左側にあるダウンロードボタンの

other platforms

を押します。

そしたら各OS用のダウンロードボタンが表示されるので自分のOSに対応したダウンロードボタンを押しましょう。

今回、自分はWindows10を使用しているので

User Installerのx64を押します。

そうするとダウンロードが始まります。

VSCodeのインストール

先ほどダウンロードしたファイルをダブルクリックするとインストーラーが起動してインストールが始まります。

最初の画面で同意するを選択して次へ。
次にインストール先を選択する画面が出てくるのでそのまま次へを選択。

(もしインストール先を自分で指定したい場合は参照からお好みの場所を選択して下さい)
次にWindows のスタートメニューに Visual Stddio Code のメニューを追加するかどうかの選択画面に移ります。追加する場合は「次へ」をクリックしてください。追加する必要がない場合は「スタートメニューフォルダを作成しない」をクリックしてください。
追加の設定画面に移ります。デフォルトで設定したい項目があればチェックをしてください。

(今回は特になにも触らずそのまま次へを選択)
最終確認画面に移ります。

インストールしちゃいましょう。
最後に

Visual Studio Code　セットアップウィザードの完了

みたいな画面が表示されたらインストールは完了です。

PlantUMLの追加

VSCodeを開くと左側に

このような欄があると思います。

一番下の項目を押すと

こんな感じで調べる場所があるのでそこに

PlantUML

を入力します。

そしたら

こんなマークのやつが出てくるのでインストールしましょう。

そしたら次にJavaとGraphvizをダウンロードしていきます。

Javaのダウンロード

https://www.java.com/ja/

こちらのリンクに飛んで、Javaのダウンロードを押します。

すると以下のページに飛ぶので同じくJavaのダウンロードを押します。

ダウンロードが完了したダウンロードしたファイルをダブルクリックで開き、インストールしていきます。

特に難しい部分はなかったのでデフォルトのまま次へを押していってインストールまで行きましょう。

Graphvizのダウンロード

http://www.graphviz.org/download/

上のリンクからGraphvizをダウンロードしていきます。

下のほうにスクロールしていくとWindowsの欄が出てきます。

現在(2023/01/18)とは違うバージョンが出てるかもしれないですがとりあえず最新のやつをダウンロードしておけば大丈夫だと思います。

今回は青文字3行目の

graphviz-7.0.6
- graphviz-7.0.6 (64-bit) EXE installer [sha256]

をダウンロードしました。

ダウンロードが完了したらファイルをダブルクリックして開き、インストールしていきます。

今回も特に難しいことはしないでデフォルトのまま次へを押していけばインストールできました。

クラス図書いていこう

VSCodeに戻って新しいファイルを作りますが、PlantUMLでクラス図を書く際のファイルの拡張子は.puになります。

今回はサンプルとしてuml.puというファイルを作成します。

そしたら試しに

@startuml
class Enemy {
    - string name
    + void Attack()
}
@enduml

と打ちます。

そして、control+shift+Pを押すとVSCodeのコマンドパネルが表示されるので、

>PlantUML: Preview CurrentDiagram

と入力すると、プレビューが表示されます。

そしたら下のように表示されます。

これでVSCodeでクラス図が書けるようになったのですがアクセス修飾子だったりインターフェースの表示方法だったりクラス間の関係だったりの表し方がいろいろあるのでそれを覚えていくのが大変そうです。

それらの表し方については自身で調べてみてください。

VSCode(Visual Studio Code)でクラス図を書く方法