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

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

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

# VSCodeのダウンロード

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

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/8f5cd113-bb19-9ac3-f6fd-5da7544aff6d.png)


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

**other platforms**

を押します。

![Untitled 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/a39f1dee-bf7e-a07c-5c21-fef7403cfdbe.png)
そしたら各OS用のダウンロードボタンが表示されるので自分のOSに対応したダウンロードボタンを押しましょう。

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

![Untitled 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/52459075-07b6-50c6-75a9-0bf83288e041.png)

**User Installerのx64**を押します。

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

# VSCodeのインストール

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

- 最初の画面で**同意する**を選択して次へ。

- 次にインストール先を選択する画面が出てくるのでそのまま次へを選択。
    
    (**もしインストール先を自分で指定したい場合は参照からお好みの場所を選択して下さい**)
    

- 次にWindows のスタートメニューに Visual Stddio Code のメニューを追加するかどうかの選択画面に移ります。追加する場合は「次へ」をクリックしてください。追加する必要がない場合は「スタートメニューフォルダを作成しない」をクリックしてください。

- 追加の設定画面に移ります。デフォルトで設定したい項目があればチェックをしてください。
    
    (今回は**特になにも触らずそのまま次へを選択**)
    

- **最終確認画面**に移ります。
    
    インストールしちゃいましょう。
    

- **最後**に
    
    **Visual Studio Code　セットアップウィザードの完了**
    
    みたいな画面が表示されたらインストールは**完了**です。
    

# PlantUMLの追加

VSCodeを開くと左側に

![Untitled 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/0433a6ea-0929-d44f-02e4-81c3e2a95fdf.png)
このような欄があると思います。

一番下の項目を押すと

![Untitled 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/91d5d4b4-bd6f-966f-95ac-07d2c9c1c98c.png)
こんな感じで調べる場所があるのでそこに

**PlantUML**

を入力します。

そしたら
![Untitled 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/1f87227b-ad27-491e-8966-e0cba29bc37e.png)
こんなマークのやつが出てくるのでインストールしましょう。

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

# Javaのダウンロード

[**https://www.java.com/ja/**](https://www.java.com/ja/)

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

![Untitled 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/f1a3bd93-3ada-31aa-ff55-ccd8abba8871.png)
すると以下のページに飛ぶので同じく**Javaのダウンロード**を押します。
![Untitled 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/492363b9-6300-7ed5-4e33-6d0d83acb2b2.png)

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

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

# **Graphvizのダウンロード**

[**http://www.graphviz.org/download/**](http://www.graphviz.org/download/)

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

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

![Untitled 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/535d76f6-a5f7-cad4-8ff2-78fe2c2fc701.png)

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

今回は**青文字3行目**の

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

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

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

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

# クラス図書いていこう

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

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

そしたら試しに

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

と打ちます。

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

`>PlantUML: Preview CurrentDiagram`

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

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

![Untitled 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2930062/ee9be450-15fe-ed75-c005-939210011bce.png)


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

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