Visual Studio Code で PlantUML のファイルを閲覧できるようにする。PlantUML Server のインストールとも言える😎

# 背景
ChatGPTが出てきて大きく変わったところの一つに、**概念モデル**でのアセット管理があげられます。概念モデルさえ管理しておけば、そこからプログラムコードを作成したり、レンダリングツールで表示させたり、編集したりといった幅広い使い方ができるわけです。

つまりモデリングした時点での情報。何かといえば**UML**だったり**ER図**だったり。その図の状態を保持しておけば。そこからRDBMSだろうが、NoSQLだろうが。C#だろうが、Javaだろうが、Pythonだろうが。Azureだろうが、AWSだろうが、GCPだろうが。ChatGPT君がドラフト生成してくれますよね。

概念モデル大事!😊

**Mermaid** と **PlantUML**が、このLLM時代に強力なソフトウェアエンジニアである私を助けてくれるツールになると思うんですね。なぜかといえば、テキストの情報だからです。バイナリーじゃない。しかもベンダーに依存してませんよね。PlantUML自体が。テキストですからバージョン管理も簡単ですよね。GitHubなどが即座に使えるわけです。

PlantUMLにどっぷりつかってもいいんですが。概念モデルの表現方法の一つに過ぎませんので。これに**拘り過ぎないように**しましょうね😊

PlantUML:
https://github.com/plantuml/plantuml

Visual Studio Code には豊富なExtensionがあるんですけど。PlantUMLを使おうと思うとextensionだけだと動かないんですね。**PlantUMLのサーバー**の**URL**を指定する必要があります。

# 作戦

PlantUMLのServerのURLは、あるんですよ。公開されているものが。

https://www.plantuml.com/plantuml/uml/plantuml

ですが、**業務上の機密情報**などを外部に出せないですよね😅

ですので、会社・組織内で用意するか。
あるいは、**ローカル**でも大したコンピューティングリソースの利用状況じゃないので良いかと思います。

ここでは自分のPCもしくはMacにPlantUMLサーバーを立てましょう。

で、PlantUMLのインストールなんですけど。

PlantUML Serverの構築には、いろんなものが必要になるんです。そのためにスクリプトも公開されているかもしれないです。

ここでは**バージョンアップやらの課題を回避**するために、Dockerバージョンを使う事にします。
まあアップデートも簡単ですしねえまあ、その辺ケアしたくないというのもありますし。また、OSが違っていても。まあ、ある程度動くわけですよね。

そして、Docker環境にしておけば。エンジニアではない方であっても、比較的容易ですし。そして、エンジニアとそうでない方とで Markdown のテキストファイルだけで、**情報の共有**が出来るようになりますよね!😊

# 手順

各手順で、動かなかったら、

- アプリの再起動
やあるいは、
- OS自身の再起動

をしてください。これは、いつもの事ですけど。

## 1. Visual Studio Code のインストール

これは、言うまでもなく😊

https://code.visualstudio.com/Download

## 2. Docker Desktop のインストール

Windows の例でご紹介します。

Docker Desktop のインストールに、**winget** を使います。Windows パッケージマネージャーですね。各アプリケーションのバージョンアップもラクチンですし。

私はwingetでインストール出来るアプリケーションについては、全てそこでインストールとバージョンアップを行っています。

### 2.1. winget (アプリ インストーラー)のインストール

Microsoft Store から、インストールしてください。Micrsoft Store のアプリで検索してもいいですし。

https://apps.microsoft.com/detail/9nblggh4nns1?rtc=1&hl=ja-jp&gl=JP#activetab=pivot:overviewtab

公式ドキュメント:
https://learn.microsoft.com/ja-jp/windows/package-manager/winget/

### 2.2. WSL のインストール

こちらも公式ドキュメントを。

公式ドキュメント:
https://learn.microsoft.com/ja-jp/windows/wsl/install

### 2.2. WSL 用の Ubuntu をインストール

Microsoft Store で、**ubuntu** を検索して、インストールしてください。
このBlogを書いている時点でのバージョンは、**22.04**ですね。

どのバージョンでもある程度動くかと。動かなかったら、比較的最新のLTSのものをインストールしてください。WSLでは、複数のディストリビューションを同時に稼働できます。

https://apps.microsoft.com/detail/9pdxgncfsczv?rtc=1&hl=ja-jp&gl=JP

### 2.3. Docker Desktop のインストール

ようやくですね。

Terminalを起動させて、以下のコマンドを入力します。

```cmd
winget install Docker.Desktop
```

インストールが完了したら。定番ですが、**へろーわーるど** コマンドで、動作確認をします。

```cmd
docker run hello-world
```

image が無ければ、ダウンロードしてくれて、実行します。こんな画面になるかと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/d3cf5b4f-da59-89c7-0408-34481885e8c7.png)

Windows に慣れている方は、素直にDocker DesktopのGUIアプリを使うのも吉です😊
Imageの数が少ないうちは、これで十分。多くなっても、状況の把握はしやすいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/5fbc25f6-38f6-7ae4-e5a0-e048d0ff429f.png)

## 3. PlantUML のDocker Image のインストール

ネットで検索するといろんな「やってみた」が出てきます。とっても便利なので是非参照してください。
ただ信じる者は「公式」サイトです。

docker hub にイメージが公開されています。これを使いましょう。

DockerHub:
https://hub.docker.com/r/plantuml/plantuml-server/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/a177f47f-182a-4854-d158-301f164e949a.png)

```cmd
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
```
jettyの方を選びましたが、tomcatでも、どちらかお好みで。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/3663cec0-a3e5-35cf-dff4-0fbd77ffac32.png)

動作確認しましょう。

http://localhost:8080/

にアクセスします。

はい、動いています!😎

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/b4d41efb-c84e-aa56-0d17-4932344c1481.png)

## 4. Visual Studio Code に PlantUMLのextensionをインストール

VS Code 起動します。

extension に PlantUML で検索すると、たくさん出てきます。さすがVS Code。大人気😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9bff08e0-d6f0-c1aa-f8d0-deb3ca2862de.png)

ここでは、一番上に出てきたPlnatUMLのExtensionをインストールします。
メッチャ早くインストールが終わりますね。

VS Code のPlantUML extensionの設定を行います。ここで PlantUML ServerのURLを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/26653d10-2cf4-34f6-a4eb-b4c55fd3c0a7.png)

設定画面の一番上に「plantuml.server」とでも入力して、ServerのURLの入力画面を検索します。
先ほどのDocker ImageのURLを入力します。

こんな感じー😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/763e8431-83dd-ad47-2f06-fae07d56ffa6.png)

はい、終了です。お疲れさまでしたー

## 5. 動作確認

PlantUMLは、Markdownの書式で作成できます。

適当なテキストのファイルを作成して、ファイルの拡張子を **.md** にします。
例えば、こんな感じ。

```text
helloplantumlt.md
```

で、以下の文字をファイルに入力します。先ほどの初期サイトでのテキストの文字列です。
冒頭の「```plantuml」がポイントですね。

```text
```plantuml
@startuml
Bob -> Alice : hello
@enduml
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/28746b5d-de98-8cfc-60d8-9ae48a1d3fe7.png)

画面右上の**プレビュー**ボタンを押します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/28b64613-09ae-91b2-9600-52125bdff69d.png)

表示できない場合は。

こんな画面が出たときですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/b8ad3a2a-ddd6-3e89-7e15-717cee1fed9d.png)

おそらくですが、Visual Studio Code と、PlantUMLサーバーとのやり取りでのアクセス許可が必要になります。

[このドキュメントで一部のコンテンツが無効になっています]を選択します。
そうすると VS Code のコマンドエリアにアクセス許可設定を変更するメニューが表示されます。

[安全でないローカルコンテンツを許可する]

を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/f837ac8b-f9be-8013-ec58-a3225a4defc1.png)


Visual Studio Code のMarkdown レンダリングの詳細はこちら:
https://code.visualstudio.com/docs/languages/markdown#_markdown-preview-security


# まとめ

そんなに複雑な手順でもないとは思います。ですが、相変わらずですが、ソフトウェアエンジニアの生業をしていないと、幾つかアプリを入れる必要があって、ちょっと手間ですよね。
でも、今はそのバージョンアップを補助してくれるツールが沢山出ています。

Windowsのアプリは、wingetがおススメ。
DockerのImageがあるのであれば、imageのバージョンアップするのも簡単。保持も出来る!