コグノスケ

VScodeとAsciiDocとKrokiローカルサーバー

目次: Linux

AsciiDoc ExtensionはAsciiDocのプレビューはもちろんのこと、AsciiDoc文書に埋め込んだMermaidやPlantUMLのような図形作成用言語の画像もプレビュー可能です。

以前のバージョンではローカルにツールをインストールしてプレビュー画像を生成できました（2022年9月4日の日記参照）が、最近のバージョン（おそらく3.1.0以降？）はKroki（Krokiのサイト）による図形描画に変更されたようです。

AsciiDoc Extensionのデフォルト設定だとhttps://kroki.ioにMermaidやPlantUMLのソースコードを送って、画像を受け取る設定になっています。これで問題なければそのまま使用すれば良いですが、外部のサーバーにソースコードを送りたくない場合はローカルにKrokiサーバーを立ち上げることでローカルネットワーク環境で完結することもできます。素晴らしいですね。

Krokiローカルサーバーの設定

Krokiのローカルサーバー立ち上げについてはDockerが便利なようです。Dockerが良い方はそちらを検索してみてください。

今回はKrokiを単体で立ち上げてみます。……と言ってもKroki自体に特に難しいことはなく、公式サイト（Manual Install :: Kroki Documentation）の説明の通りにやればよいです。PlantUMLを表示させたければGraphvizとPlantUMLをインストールした上で、

$ which dot
/usr/bin/dot

$ which plantuml
/usr/bin/plantuml

GitHub ReleaseページからダウンロードしたKrokiのJARファイルを起動するだけでサーバーとして機能します。Krokiはサーバー機能を持っていて、動作テストにちょうど良いです。

$ java -jar kroki-standalone-server-v0.25.0.jar \
  -DKROKI_LISTEN=0.0.0.0:5000

KROKI_LISTENはどのポートで待ち受けるか？の設定です。PlantUML系の設定は特に何も追加しなくてもPlantUMLを認識していました。これはテスト用の簡易サーバー機能なので、本格的に運用する際はアプリケーションサーバーに登録したほうが良いと思います、その設定はまた今度。

VSCodeの設定

Krokiローカルサーバーを立ち上げたら、VSCodeを設定する必要があります。まずAsciiDoc Extensionの設定を開きます。

AsciiDoc Extensionの設定

Asciidoc > Preview: Asciidoctor Attributesの項目にある[Edit in setting.json]のリンクを開きます。

Asciidoctor Attributesの設定

設定の最後辺りに、

    "asciidoc.preview.asciidoctorAttributes": {
            "kroki-server-url": "http://192.168.1.1:5000"
    }

を追加するとローカルサーバーに切り替わるはずです。192.168.1.1の部分はKrokiのローカルサーバーを動作させているIPアドレスを指定します。

見た目が少し違う

ローカルサーバーにて画像生成すると見た目が少し変わります。おそらくですが、インターネット側のKrokiサーバーはデフォルトのデザインを変えていると思われます。下記のAsciidoc文書を入力として確かめます。

This is a sample of PlantUML diagram.

[plantuml]
----
@startuml
box "Box"
participant "App" as app
participant "Library" as lib
endbox

activate app
activate lib

app -> lib : Something()
@enduml
----

デフォルトつまりインターネット上のKrokiサーバーを使用する場合、このような結果になります。

kroki.ioの出力結果

ローカルサーバーを使用する場合、このような結果になります。グレーっぽいデザインから黄色のデザインに変わりました。

ローカルサーバーの出力結果

Krokiはkroki-standalone-server-v0.25.0.jarで、Krokiを動作させている環境はDebian Testingです。各モジュールのバージョンは、

• plantuml: 1.2020.2
• Graphviz: 2.42.2-8

です。