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

はじめに

　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もしくはコマンドプロンプトを管理者権限で開き、下記コマンドを実行する。

1. Rubyインストール

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

2. 依存関係のインストール
   1. JDKインストール

      winget search jdk     
      

      AdoptOpenJDK(ver16)インストール

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

   2. GraphVizインストール

      winget search graphviz
      

      winget install --id Graphviz.Graphviz -e
      

3. 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を書く際に有用なので試してみてください。

参考