はじめに

　AsciiDoc内のPlantUMLをVisual Studio Codeでプレビュー表示する方法を紹介する。

以前はこちらの方法できたか最新版で出来なくなってしまった
asciidoctor-plantumlがメンテナンスされておらず最新版のAsciiDocでは取り除かれている(参考)

上記の理由より別の方法を紹介する。Visual Studio CodeでAsciiDocを書く際に有用。

動作確認環境

Windows 10 x64
Asciidoctor 2.0.23
Asciidoctor PDF 2.3.18

方法

事前準備 (Windowsの場合)

Visual Studio Codeのインストール

　公式サイトからインストーラをダウンロードしてインストールする。

AsciiDocのインストール

Windows Package Managerを使い、AsciiDocの環境構築を行う。 PowerShellもしくはコマンドプロンプトを管理者権限で開き、下記コマンドを実行する。

Rubyインストール

winget search ruby
winget install --id RubyInstallerTeam.Ruby.3.1 -e

依存関係のインストール

JDKインストール

winget search jdk

AdoptOpenJDK(ver16)インストール

winget install --id AdoptOpenJDK.OpenJDK.16 -e

GraphVizインストール

winget search graphviz

winget install --id Graphviz.Graphviz -e

AsciiDocインストール
```
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」と検索して以下の拡張機能インストールする。

https://marketplace.visualstudio.com/items?itemName=asciidoctor.asciidoctor-vscode

AsciiDocプラグインの設定

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

settings.jsonに以下を追加する。

"asciidoc.preview.asciidoctorAttributes": {
   "kroki-server-url": "http://localhost:8080"
},
"asciidoc.extensions.enableKroki": true

localhost:8080
- 自身で設定したいサーバーを入力する
- UMLを外部サーバー( https://kroki.io )へ公開しても良い場合は入力不要(参考)

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

まとめ

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

参考