目次: Linux
VSCodeのPlantUML Extensionをインストールすると、MarkdownにPlantUMLの図を混ぜることができます。
何も設定しない状態だと、
このようにプレビュー画面に「No PlantUML server, specify one with "plantuml.server".」エラーが出ます。
VSCodeのSettingsの検索ボックスにplantuml.serverと入力するとPlantuml: Server項目が出るはずなので、そこにサーバーのURLを設定します。ヘルプメッセージにもあるように、自分で書いたPlantUMLのソースコードをインターネットに送ってよければhttps://www.plantuml.com/plantumlを指定するのが最も簡単です。
設定し終わったら、このような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」と書かれた横長のボタンが表示され、画像が表示されないときは、
ボタンを押し、リストに表示される「Allow insecure content Enable loading content over http」を選択します。
プレビュー画像が表示されました。生成される画像は似ていますが、私の環境だと文字の表示が変になってしまいます。なぜだろう……?それは今度調べるとして、インターネット上のサーバーに比較してレスポンスが早いです。良いですね。
これはテスト用の簡易サーバー機能なので、本格的に運用する際はアプリケーションサーバーに登録したほうが良いと思います、その設定はまた今度。
< | 2024 | > | ||||
<< | < | 04 | > | >> | ||
日 | 月 | 火 | 水 | 木 | 金 | 土 |
- | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | - | - | - | - |
合計:
本日: