テキストから UML やマインドマップなどを作図できる PlantUML のエクステンションを Visual Studio Code にインストールして、サンプルのテキストから図を表示する動作確認までの手順を紹介します。
※ Visual Studio Code のバージョンは 1.103.0 です。
※ PlantUML エクステンションのバージョンは 2.18.1 です。
Open JDK のインストール
OpenJDK がインストールされていることを確認します。
コマンドプロンプトを開いて java -version⏎と入力して、バージョン情報が表示されればインストールされています。
※ Windows10 の場合は、デスクトップ左下の検索ボックスに cmd と入力するとコマンドプロンプトを起動するメニューが表示されます。
C:\>java -version
openjdk version "17.0.12" 2024-07-16
OpenJDK Runtime Environment Temurin-17.0.12+7 (build 17.0.12+7)
OpenJDK 64-Bit Server VM Temurin-17.0.12+7 (build 17.0.12+7, mixed mode, sharing)Open JDK のインストールについては、以下の記事を参照してください。
GraphViz のインストール
GraphViz がインストールされていることを確認します。
コマンドプロンプトを開いて dot -V⏎と入力して、バージョン情報が表示されればインストールされています。
※ Windows10 の場合は、デスクトップ左下の検索ボックスに cmd と入力するとコマンドプロンプトを起動するメニューが表示されます。
C:\>dot -V
dot - graphviz version 12.1.1 (20240910.0053)GraphViz のインストールについては、以下の記事を参照してください。
Visual Studio Code の起動
Visual Studio Code を起動します。
Visual Studio Code のインストールについては、以下の記事を参照してください。
VS Code にPlantUML プラグインを導入
Visual Studio Code を開いたら、左側の Extensions ボタンを押して、リストを表示し、リスト上部の検索ボックスに plantuml と入力して表示された PlantUML (パブリッシャーは jebbs さん）の Install ボタンを押します。
パブリッシャー jebss さんを信頼するかを尋ねるダイアログが表示されるので、問題なければ「Trust Publisher & Install」ボタンを押します。
Do you trust the publisher “jebbs”?
The extension PlantUML is published by jebbs. This is the first extension you’re installing from this publisher.
jebbs is not verified.
Visual Studio Code has no control over the behavior of third-party extensions, including how they manage your personal data. Proceed only if you trust the publisher.
出版社「jebbs」を信頼しますか?
拡張機能 PlantUML は jebbs によって公開されています。これは、この発行元からインストールする最初の拡張機能です。ジェブスは検証されていません。
Visual Studio Code は、個人データの管理方法を含め、サードパーティの拡張機能の動作を制御できません。発行者を信頼できる場合にのみ続行してください。
Install ボタンを押した後のダイアログのメッセージと Google 翻訳
PlantUML エクステンションのページが表示されて、インストールが完了しました。
マインドマップのサンプルで動作を確認
PlantUML エクステンションの動作を確認するため、サンプルのマインドマップのテキストをファイルに保存して、そのプレビューでマインドマップの図を表示します。
メニュー「File」→「New Text File」を選択してから、 Ctrl + S キーを押して .pu 拡張子の任意のファイルを保存します。
PlantUML エクステンションは、以下の拡張子をサポートしています。
Supported Formats
PlantUML – Visual Studio Marketplace
*.wsd,*.pu,*.puml,*.plantuml,*.iuml
サンプルのテキストを公式サイトの「マインドマップの文法と機能」の Markdown 構文セクションのコピーボタンを押して取得します。
作成した a.pu というファイルに、コピーしたサンプルのテキストを貼り付けて Ctrl +S で上書き保存します。
Visual Studio Code の右上の「Preview Current Diagram」ボタンを押します。
PlantUML Preview タブが表示されました。
まだ、表示する画像がない場合は「No valid diagram found here!」と表示されます。
先ほど作成した a.pu ファイルに、マインドマップ用のサンプルのテキストを貼り付けて保存すると、数秒でプレビュータブに、テキストに対応するマインドマップの画像が表示されました。
まとめ
- Visual Studio Code で、UML やマインドマップがテキストから作図できる PlantUML エクステンションを導入しました。
- PlantUML エクステンションを動作させるには Java, GraphViz のインストールが必要です。
- PlantUML エクステンションを導入後、適当な .pu ファイルにサンプルのテキストを保存して、プレビュータブでマインドマップが表示されることを確認しました。
次回は、プレビュータブに表示された画像を保存する手順を紹介します。
参照サイト Thank You!
- シンプルなテキストファイルで UML が書ける、オープンソースのツール
- PlantUML – Visual Studio Marketplace
- Visual Studio Code – Code Editing. Redefined
- Java ホーム・ディレクトリーの場所とバージョンの確認 – IBM Documentation
- Graphvizのコマンド解説 · Helve Tech Blog
記事一覧 → Compota-Soft-Press
コメント