AsciiDoc内のPlantUMLをVSCodeでプレビュー表示する方法

# はじめに
　AsciiDoc内のPlantUMLをVisual Studio Codeでプレビュー表示する方法を紹介する。
 
  *  以前は[こちらの方法](https://qiita.com/meitoo/items/1adb19690c5f891d5ef2)できたか最新版で出来なくなってしまった
  * asciidoctor-plantumlがメンテナンスされておらず最新版のAsciiDocでは取り除かれている([参考](https://github.com/asciidoctor/asciidoctor-vscode/blob/6a69acb65e0188aadf5b0ed975add9cbdb28094f/CHANGELOG.md?plain=1#L399))
 
 上記の理由より別の方法を紹介する。Visual Studio CodeでAsciiDocを書く際に有用。


# 動作確認環境

* Windows 10 x64
* Asciidoctor 2.0.23
* Asciidoctor PDF 2.3.18

# 方法

## 事前準備 (Windowsの場合)

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

　[公式サイト](https://code.visualstudio.com/download)からインストーラをダウンロードしてインストールする。

### AsciiDocのインストール
 [Windows Package Manager](https://learn.microsoft.com/ja-jp/windows/package-manager/)を使い、AsciiDocの環境構築を行う。 PowerShellもしくはコマンドプロンプトを管理者権限で開き、下記コマンドを実行する。

1. Rubyインストール
    ```powershell
    winget search ruby
    winget install --id RubyInstallerTeam.Ruby.3.1 -e
    ```
2. 依存関係のインストール
    1. JDKインストール
         ```powershell
         winget search jdk     
         ```
         AdoptOpenJDK(ver16)インストール
         ```powershell
         winget install --id AdoptOpenJDK.OpenJDK.16 -e
         ```
    2. GraphVizインストール
         ```powershell
         winget search graphviz
         ```
         ```powershell
         winget install --id Graphviz.Graphviz -e
         ``` 
3. AsciiDocインストール
    ```powershell
    gem install asciidoctor
    gem install asciidoctor-pdf
    gem install asciidoctor-diagram
    ```
    * 参考
        * https://docs.asciidoctor.org/asciidoctor/latest/install/ruby-packaging/


## AsciiDocプラグイン

### AsciiDocプラグインのインストール

　Visual Studio Codeを開いて、拡張機能の検索窓で「AsciiDoc」と検索して以下の拡張機能インストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/34ebced9-99d5-99d7-7511-f355dd648956.png)
* https://marketplace.visualstudio.com/items?itemName=asciidoctor.asciidoctor-vscode

### AsciiDocプラグインの設定

　AsciiDocプラグインの設定ボタン(⚙)を押して設定画面を開く。以下のような画面になるので、「AsciiDoc > Preview: Adciidoctor Attributes」欄の、```settings.jsonで編集```を押す。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/85e93493-492f-5c10-e42e-4353acfae880.png)

settings.jsonに以下を追加する。
```json
"asciidoc.preview.asciidoctorAttributes": {
   "kroki-server-url": "http://localhost:8080"
},
"asciidoc.extensions.enableKroki": true
```
* localhost:8080 
  * 自身で設定したいサーバーを入力する
  * UMLを外部サーバー( https://kroki.io )へ公開しても良い場合は入力不要([参考](https://github.com/asciidoctor/asciidoctor-kroki/blob/fa669d24b4ff8b1cce13d72aea038c63a1b7f3c2/src/kroki-client.js#L75))

:::note
本来は、krokiサーバーへの設定方法だが、PlantUMLサーバーでも動作確認できた。おそらくREST APIの互換性があると思われる。念のためWindowsファイアウォールで、```https://kroki.io```をブロックして検証したところ、ブロック中は、ローカルサーバーを有効にしないとPlantUMLが描画されなかったので、正しく動作していると思われる。
:::

# まとめ

　AsciiDoc内のPlantUMLをVisual Studio Codeでプレビュー表示する方法を紹介した。設定を変更することでローカルサーバーでも表示でき、安全にPlantUMLのプレビュー表示を行える方法を紹介した。Visual Studio CodeでAsciiDocを書く際に有用なので試してみてください。

# 参考

https://github.com/asciidoctor/asciidoctor-vscode/blob/6a69acb65e0188aadf5b0ed975add9cbdb28094f/CHANGELOG.md?plain=1#L399

https://zenn.dev/sumeragizzz/scraps/ddd051fc77c08b

https://qiita.com/meitoo/items/1adb19690c5f891d5ef2

https://qiita.com/takmot/items/36e9da8de640cfdfe96e

https://github.com/asciidoctor/asciidoctor-vscode/issues/479

https://github.com/asciidoctor/asciidoctor-kroki/blob/fa669d24b4ff8b1cce13d72aea038c63a1b7f3c2/src/kroki-client.js#L75