AsciiDoc - ローカルkrokiサーバを使用したPlantUMLプレビュー表示

4884 ワード
asciidoc kroki asciidoc テキストリンク

AsciiDocプレビュー表示

VSCode＋AsciiDoc（拡張機能）を使用してプレビュー表示を行う

以下、今回使用するAsciiDocファイル

sample.adoc
== シーケンス図

[plantuml,format=png]
....
@startuml sample
Bob -> Alice : こんにちは！
@enduml
....

AsciiDocファイルのタブで右クリック、Open Previewを選択するとプレビュー表示される

以下、プレビュー表示結果

AsciiDoc内のPlantUMLプレビュー表示

AsciiDoc（拡張機能）のUse_kroki設定を有効にする

settings.jsonに以下が追加される

settings.json
  "asciidoc.use_kroki": true

以下、プレビュー表示結果

ローカルkrokiサーバを使用したAsciiDoc内のPlantUMLプレビュー表示

※Docker環境が必要

Note that this extension will send graph information to https://kroki.io. If this is an issue it is also possible to use your own kroki instance (see the instructions for further information).

----
（訳）
この拡張機能はグラフ情報をhttps://kroki.ioに送信することに注意してください。 
これが問題である場合は、独自のkrokiインスタンスを使用することもできます（詳細については、手順を参照してください）。

上記がAsciiDoc（拡張機能）に記載されており、グラフ情報をhttps://kroki.ioに送信しないようローカルでkrokiサーバを立ち上げる

krokiサーバ起動

Using Docker or Podmanに記載されている以下コマンドでkrokiサーバのコンテナが立ち上げる

docker run -p8000:8000 yuzutech/kroki

2回目以降はすでにコンテナが存在するので、Docker Desktop等から起動

krokiサーバ指定

settings.jsonに以下を追加する
（ポートはkrokiサーバ起動時に指定したポートを設定する）

settings.json
    "asciidoc.preview.attributes": {
        "kroki-server-url": "http://localhost:8000"
    }

プレビュー表示のセキュリティ設定変更

ローカルホストからHTTP経由でコンテンツをロードするためにセキュリティ設定変更を行う

AsciiDocファイルを開いている状態でコマンドパレット（F1）から、
AsciiDoc: Change Preview Security Settings → Allow insecure local content
を選択する


以下、プレビュー表示結果