47
49

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-04-15

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

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

VSCodeのダウンロード

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

Untitled.png

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

other platforms

を押します。

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

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

Untitled 2.png

User Installerのx64を押します。

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

VSCodeのインストール

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

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

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

    (もしインストール先を自分で指定したい場合は参照からお好みの場所を選択して下さい)

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

  • 追加の設定画面に移ります。デフォルトで設定したい項目があればチェックをしてください。

    (今回は特になにも触らずそのまま次へを選択)

  • 最終確認画面に移ります。

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

  • 最後

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

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

PlantUMLの追加

VSCodeを開くと左側に

Untitled 3.png
このような欄があると思います。

一番下の項目を押すと

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

PlantUML

を入力します。

そしたら
Untitled 5.png
こんなマークのやつが出てくるのでインストールしましょう。

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

Javaのダウンロード

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

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

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

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

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

Graphvizのダウンロード

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

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

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

Untitled 8.png

現在(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

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

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

Untitled 9.png

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

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

47
49
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
49

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?