スポンサーリンク

【VSCode】PlantUMLの使い方ご紹介。〜 無料サンプル付き 〜

1.プログラミング
スポンサーリンク

今回の記事はVSCodeでUML図を作成する際に便利なPlantUMLの使い方をご紹介する記事です。便利なVSCodeですが、UML作成のプラグインPlantUMLを提供しております。UML初心者でPlantUMLの使い方がわからない方などは是非参考にしてみてください。

今回の操作はMacで行っていますが、Windowsでも手順は同じです。

スポンサーリンク

UML図とは?

簡単に説明するとシステムを設計する際に共通で理解できるようにシステムの流れや、もう少し詳細なクラス図などを同じフォーマットで書いたものがUML図です。

書き方にはコードで書くか手書きチックに図を記載していくかの2通りになりますが、プロジェクト全体の流れが変わることはエンジニアの中でもかなり多いと思います。そう言ったものを管理できるgitとの連携がしやすいのでコードでUML図を書くことをお勧めします。

VSCodeでPlantUMLをインストール

VScode上でエクステンション(拡張機能)でPlantUMLを検索するのみです。有効化してください。また、Javaとgraphvizのインストールが必要です。下記コマンドでインストールできます。

brew install --cask adoptopenjdk
brew install graphviz

以上でPlantUMLを使用する準備は完了です。

UMLでプレビューを確認

Macの場合は「option」+「D」、Windowsの場合は「Alt」+「D」でプレビューが作成できます。

まずは下記サンプルを立ち上げてみましょう。拡張子は「.wsd」でファイル保存しております。

@startuml test

class Test1
class Test2
Test1 <|.. Test2

@enduml

「Option」+「D」で出力すると下記のような表示になっております。

これが簡単な使い方です。では次に線の引き方やクラス以外の記述方法などを紹介していきます。

PlantUMLでクラス図作成

基本的な文は下記のように書きます。

@startuml

class test1{
}

@enduml

PlantUMLでパッケージ作成

@startuml

package {
   class test1{
   }
}

@enduml

PlantUMLでコメントを記載


@startuml

class test1{
}
note right: test1のメモ

@enduml

PlantUMLで線を引く



class1 --|> class2
class3 ..|> class4
class5 ..   class6
class7 --|> class8 :"メッセージ" >
class9 --"メッセージ" class10

PlantUMLのアクセス修飾子

[public]
+ int test1() 
[privacy]
- int test2

PlantUMLでアクティビティ図

アクティビティ図の書き初めは下記のような感じです。

@startuml
start

:テスト\n処理1;
:処理2;

stop
@enduml

ではさらに詳しい文構造をみていきましょう。

PlantUMLでwhile文

while (条件)
    :処理;
endwhile

PlantUMLでif文

if (条件) then (yes)
  :OK;
else (no)
  :No;
endif

PlantUMLでプロセスを分ける

|p1|
:テスト\n処理1;
|p2|
:処理2;

他にも多数の便利な描写機能があるので是非使いこなしてみましょう。公式のURLはこちらです。

では今回の記事は以上です。他にも多数の記事を記載しているので是非参考にしてください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

1.プログラミング
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

タイトルとURLをコピーしました