前置き

ネットワークの体験前にまとめたやることリストの消化、第３章としてはネットワーク図を書くツールとしてPlantUMLの環境を構築して、ネットワーク図を書いていきます。

ネットワークで遊ぶために必要な事項をまとめておく

前置きここまでに仮想マシン・コンテナの環境構築→ネットワークの基礎知識→仮想ソフトウェアの基本的なコマンド操作と順番に記事にしてきました。 ↓環境構築から読みたい人向けやることをまとめる Network Namespace ...

環境構築

前提
PlantUMLの実現方法
環境構築の手順
記述テスト

前提

IDEはVS Codeを使用します。

最終目標は、このブログ(WordPress)内にPlantUMLのコードを記述すると、図としてプレビューされるかたちになればOKです。

PlantUMLの実現方法

PlantUMLは様々な環境で様々な実現方法があります。詳しくは公式に譲りますが、今回は以下の方法を検討します。

PlantUMLDocs

PlantUMLファイルの拡張子である[.pu]ファイルをVS Codeでプレビュー
Markdownファイル内のPlantUMLコードをVS Codeでプレビュー
WordPress内でのコード記述がブログ記事としては画像で表示される

環境構築の手順

まずはローカル環境に共通で必要な2つのソフトウェアをインストールします。
ちなみに今回は採用しませんが、Dockerコンテナイメージを使用する方法もあるそうです。

Javaのインストール

まずはJavaをインストールする必要があります。

winget install Oracle.JavaRuntimeEnvironment

Graphviz

2つ目のソフトはGraphvizというグラフの視覚化を目的としたツールです。

winget install Graphviz.Graphviz

VS Codeの拡張機能

VS Codeにインストールする拡張機能は2つあります。

PlantUML

前項のJavaとGraphvizを利用してVS Code上でPlantUMLを描画する拡張機能です。

[.pu]ファイルでのプレビューが可能となります。
また、pngやsvgなどの画像ファイルに出力することも可能です。

インストールはしますが、プレビューに{alt} + {D}の操作が必要で面倒なので、今回はあまり使わないです。

ちなみにこの記事のアイキャッチ画像はこの拡張機能で作成したPNG画像になります。

PlantUML – Visual Studio Marketplace

Markdown Preview Enhanced

こちらもJavaとGraphvizが必要です。MarkdownでPlantUMLを可視化する拡張機能です。

今回は使わないですが、Mermaidという別の図形描画の記法もプレビュー可能になります。

プレビューが自動なので、こちらのほうが書きやすいかも。

Markdown Preview Enhanced

WordPressのプラグイン

PlantUML Renderer

WordPress内のPlantUML記述がブログ閲覧では画像になります。

PlantUML Renderer

記述テスト

Docsのネットワークでいい感じのサンプルを用いて記述してみます。

.puファイル

Docsのコードをコピーして、新しく作成した

Markdownファイル

先ほどのコードを、[plantuml.md]というMarkdownファイルに持ってきたのが上の状態です。VSCodeのプレビューで表示がちゃんと成功していますね。

[@startuml]と[@enduml]の代わりになるのが、[“`plantuml]と[“`]のくくりです。

WordPress

[plantuml]
!include <office/Servers/application_server>
!include <office/Servers/database_server>
nwdiag {
network dmz {
address = “210.x.x.x/24”
// set multiple addresses (using comma)
web01 [address = “210.x.x.1, 210.x.x.20”, description = “<$application_server>\n web01”]
web02 [address = “210.x.x.2”, description = “<$application_server>\n web02”];
}
network internal {
address = “172.x.x.x/24”;
web01 [address = “172.x.x.1”];
web02 [address = “172.x.x.2”];
db01 [address = “172.x.x.100”, description = “<$database_server>\n db01”];
db02 [address = “172.x.x.101”, description = “<$database_server>\n db02”];
}
}
" usemap="#plantuml_map">

・・・図になりませんでした。
WordPressの拡張機能でスプライトがダメな可能性があるので、違うサンプルを試してみます。