環境構築：MACで VS Code の PlantUMLプラグインを使用できるようにする

今日は、VSCodeにPlantUMLのプラグンを導入した方法についてご紹介します。

背景

MACにVS CodeのPlantUMLプラグインをインストールして、使用したので、その時のインストール方法と使用方法を記載しています。

VS Code（Visual Studio Code）は、Microsoftが開発したオープンソースの統合開発環境（IDE）です。主にソフトウェア開発者やプログラマーに向けて設計されており、多くのプログラミング言語に対応しています。

PlantUMLは、テキストベースのユーザーフレンドリーなDSL（ドメイン固有言語）を使用して、UML（Unified Modeling Language）ダイアグラムを生成するためのオープンソースツールです。

インストール手順

下記のアプリをインストールしました。

• VS Codeのインストール
• Javaのインストール
• graphvizのインストール
• PlantUMLプラグインのインストール

VS Codeのインストール

VS Codeのインストールは下記のサイトを参考にインストールしました。

Javaのインストール

asdfコマンドを使用してJavaをインストールしました。コマンドは下記になります。

# 最新のJDKをインストール
asdf install java openjdk-20.0.2

# グローバルに設定した
asdf global java openjdk-20.0.2

確認コマンドは下記になります。

% java --version
openjdk 20.0.2 2023-07-18
OpenJDK Runtime Environment (build 20.0.2+9-78)
OpenJDK 64-Bit Server VM (build 20.0.2+9-78, mixed mode, sharing)

asdfコマンドに関しては下記の記事も参考にしてください。

graphvizのインストール

brewコマンドを使用してgraphvizをインストールしました。コマンドは下記になります。

brew install graphviz

確認コマンドは下記になります。

% dot --version
dot - graphviz version 8.0.5 (20230430.1635)

PlantUMLプラグインのインストール

下記のプラグインをVS Codeにインストールします。

動作確認

下記の内容で新規ファイル(test.pu)を作成します。

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

VS Code上で、⌥ (Option) + d キーを押します。

上記のようにシーケンス図が表示されていれば、成功です。

解説

PlantUMLについて

PlantUMLは、テキストベースのユーザーフレンドリーなDSL（ドメイン固有言語）を使用して、UML（Unified Modeling Language）ダイアグラムを生成するためのオープンソースツールです。PlantUMLを使用すると、シーケンス図、クラス図、アクティビティ図、コンポーネント図などのさまざまなUML図を記述することができます。

以下にPlantUMLの特徴の概要を説明します：

1. テキストベース: PlantUMLはテキストファイルにUMLダイアグラムを記述します。UML図を描くのにグラフィカルなツールを使う必要がなく、プレーンテキストでの定義が可能です。
2. DSL: PlantUMLのDSLは非常にシンプルで、直感的に理解できる形式です。これにより、UML図を素早く作成できます。
3. 多様な図のサポート: PlantUMLは、シーケンス図、クラス図、アクティビティ図、ステートチャート図、コンポーネント図、ユースケース図など、さまざまなタイプのUML図をサポートしています。
4. プラットフォーム非依存: PlantUMLはJavaで実装されており、Javaが動作するほとんどのプラットフォームで使用できます。
5. 統合: PlantUMLは、エディタやドキュメント作成ツール（Visual Studio Code、Atom、Confluenceなど）など、さまざまなツールと統合することができます。
6. オープンソース: PlantUMLはオープンソースであり、無料で使用できます。

PlantUMLの詳細な使い方や構文については公式ウェブサイトやドキュメントを参照することをお勧めします。また、PlantUMLは定期的にアップデートされる可能性があるため、最新情報を確認することも重要です。

おわりに

今日は、VSCodeにPlantUMLのプラグンを導入した方法についてご紹介しました。

PlantUMLを使用する理由は、以下のような特徴と利点があります：

1. 簡単な構文: PlantUMLのDSLはシンプルで直感的な構文を持っています。UML図を描くために専門的なツールを学ぶ必要がなく、テキストベースの定義を使って素早くダイアグラムを作成できます。
2. 可読性と保守性: テキストベースの定義により、UMLダイアグラムがコードとしてバージョン管理システムで管理されるため、変更履歴を追跡しやすく、保守性が向上します。
3. プラットフォーム非依存: Javaで動作するため、ほとんどのプラットフォームで動作します。また、特定のオペレーティングシステムに依存しないため、チーム内での共有が容易です。
4. 軽量なツール: PlantUMLのエンジンは軽量であり、シンプルなテキストファイルからダイアグラムを生成するため、リソースの消費が少ないです。
5. UML図のバージョン管理: PlantUMLを使用すると、UML図をコードとしてバージョン管理できます。これにより、チーム全体が変更を追跡し、協力して開発できます。
6. 自動レイアウト: PlantUMLは自動レイアウトをサポートしているため、要素の配置に手間をかける必要がありません。ダイアグラムの要素の位置を自動的に最適化してくれます。
7. 統合と拡張性: PlantUMLは多くのエディタやドキュメント作成ツールと統合できます。また、拡張性が高いため、独自のカスタム機能を追加することも可能です。
8. 無料かつオープンソース: PlantUMLは無料で使用できるオープンソースツールです。ライセンスの心配なく、自由に利用できます。

総合的に、PlantUMLは手軽にUMLダイアグラムを作成できる優れたツールであり、プロジェクトのコミュニケーションや設計文書の作成、コードのドキュメンテーションなどで役立ちます。特に、コードとUML図を一元管理することで、開発プロセスを迅速かつ効果的に進めることができます。