コグノスケ

VSCodeとMarkdownとPlantUMLのローカルサーバー

目次: Linux

VSCodeのPlantUML Extensionをインストールすると、MarkdownにPlantUMLの図を混ぜることができます。

何も設定しない状態だと、

PlantUMLのサーバー設定がないときのエラー

このようにプレビュー画面に「No PlantUML server, specify one with "plantuml.server".」エラーが出ます。

設定方法（インターネットにコードを送って良い場合）

VSCodeのSettingsの検索ボックスにplantuml.serverと入力するとPlantuml: Server項目が出るはずなので、そこにサーバーのURLを設定します。ヘルプメッセージにもあるように、自分で書いたPlantUMLのソースコードをインターネットに送ってよければhttps://www.plantuml.com/plantumlを指定するのが最も簡単です。

www.plantuml.comサーバーを使用する設定

設定し終わったら、このようなMarkdownの文書で動作確認します。

# Title 1

This is body.

## Title 2

- aaa
  - aaa is AAA
  - bbb is BBB

```plantuml
node "PC" as pc {
  node "CPU" as cpu
  node "OS" as os
}

cpu -> os: boot
```

プレビュー画面にこのような画像が出るはずです。

www.plantuml.comサーバーを使用したときの表示例

表示されました、簡単ですね。しかし外部にソースコードを送りたくない場合もあります。

設定方法（ローカルサーバー）

インターネットに自分で書いたPlantUMLのソースコードを送信されると困る場合は、PlantUMLのサーバーをローカルで起動すると良いです。PlantUMLのサイト（PlantUML Downloads and Source Code）から、PlantUMLのJARファイルをダウンロードします。今回はバージョン1.2024.4を使用しました。

起動方法は公式サイト（PlantUML PicoWeb Server）にある通りにやりましょう。

$ java -jar ./plantuml-mit-1.2024.4.jar -picoweb:5000:0.0.0.0

オプション-picowebにてサーバーが待ち受けに使うポートとアドレスを指定します。

VSCodeのPlantuml: Serverには、PlantUMLのローカルサーバーを動作させているマシンのIPアドレスと、PlantUMLを起動するときに指定したポートを指定します（例えば、http://192.168.1.2:5000など）。設定し終わったら先ほどと同じMarkdownの文書を用いて動作確認します。一度プレビュー画面を閉じてもう一度開いてください。

Insecure contentを表示させない設定になっているときの表示

VSCodeはhttpつまり暗号化されていないサーバーとの通信を拒否する設定になっています（改ざんが可能なので）。しかしローカルLANで実験する場合はこの制限は不要ですので、プレビュー画面に「Some content has been disabled in this document」と書かれた横長のボタンが表示され、画像が表示されないときは、

Insecure contentを表示させる設定に変更

ボタンを押し、リストに表示される「Allow insecure content Enable loading content over http」を選択します。

表示されたけど画像が変だ

プレビュー画像が表示されました。生成される画像は似ていますが、私の環境だと文字の表示が変になってしまいます。なぜだろう……？それは今度調べるとして、インターネット上のサーバーに比較してレスポンスが早いです。良いですね。

これはテスト用の簡易サーバー機能なので、本格的に運用する際はアプリケーションサーバーに登録したほうが良いと思います、その設定はまた今度。