SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeをUML図やフローチャート作成に使ってみよう

開発用エディタのド定番「VSCode」を使いこなそう 第11回

UML図の作成に便利な「PlantUML」

 PlantUMLは、UML図の作成のためのツールです。シーケンス図やユースケース図をはじめとするUML図の他に、ネットワーク図、マインドマップ図などの作成もサポートします(図6)。このPlantUMLのVSCode版が、jebbsによる拡張機能「PlantUML」です。

図6:PlantUMML
図6:PlantUMML

 PlantUMLを利用するには、Javaのランタイムと、プレビュー描画のためのライブラリGraphvizがプラットフォームに必要なので、インストールしておいてください。Graphvizについては、ダウンロードページに案内がある通り、macOSではHomebrewを用いたインストールが簡単です。Windowsではインストーラをダウンロードし、実行してインストールできます。

 作図に入るには、新規作成したファイルを拡張子.puで保存します。PlantUMLにおける作図は、基本的にテキストベースで行います。例えば、ファイルに以下のリストのようにクラス定義を記述すると、クラス図を作成できます。

@startuml one
class Fighter {
    - string name
    + void attack()
}
@enduml

 コマンドパレットから、「PlantUML: Preview Current Diagram」と入力して実行すると、図7のようにクラス図がプレビューに表示されます。

図7:PlantUMLによるクラス図(単独)
図7:PlantUMLによるクラス図(単独)

 図7においてクラス名の脇に、○にCと記載されています。これはクラスの印であり、抽象クラスならA、インタフェースならIが記載されます。また、上のリストのクラス定義には、「-」(private)、「+」(public)といったアクセス修飾子が指定されており、図6には赤や緑のシンボルとなって反映されます。アクセス修飾子には、他に「#」(protected)、「~」(package private)を指定できます。この他にもabstract(抽象クラス)やstatic(静的メンバ)、interface(インタフェース)の指定も可能です。

 関係性の記述も可能です。関係性には、継承、実現、依存などを以下のリストのように記述できます。

@startuml two
abstract class Player {
    # string name
}
class Fighter {
    + void attack()
}
Fighter --|> Player
@enduml

 最後の「Fighter --|> Player」が継承関係の記述です。プレビューは、図8のようになります。

図8:PlantUMLによるクラス図(関係)
図8:PlantUMLによるクラス図(関係)

 他にもいろいろな使い方ができるので、冒頭の公式サイトからドキュメントを参照してください。

[NOTE]macOSでプレビューが表示されないとき

 macOSにおいてプレビューが表示されず(赤い×が表示される)、「Warning: the fonts "Times" and "Times" are not available for the Java logical font "Serif",…」というエラーメッセージが表示される場合は、「Times」フォントを入手してインストールしてください。例えば、「Times free font」から無料のTrueTypeフォントを入手して、Font Bookを使ってインストールします。

次のページ
Mermaid記法によるダイアグラム作成

この記事は参考になりましたか?

開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/20527 2024/12/06 11:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー