(MarkDown)Plant UML で作成した図の保存方法 - tsukimisoba/Blog GitHub Wiki

1. Plant UML の図を保存する場合の画像形式

Plant UML の図を保存する場合、SVGファイル で出力するのが最適です。
SVG 形式を選ぶ理由はいくつかありますが、特に以下の点がメリットになります。

SVG はベクターグラフィックなので、どれだけ拡大・縮小しても画質が劣化しません。これにより、細かい UML 図や技術的な図面を高品質に保ったまま表示できます。

SVG ファイルはXML ベースのテキスト形式なので、コードエディタで直接編集が可能。VS Code で PlantUML を使用する場合も、生成された SVG を手軽に微調整できます。

SVG はブラウザで直接表示できるので、GitHub Pages や技術ドキュメントに埋め込むのに最適。特に Markdown 内に埋め込む場合、PNG よりもスマートに扱えます。

CSS を使ってSVG 内の要素を動的に変更できるため、カラーテーマの切り替えや、特定の図形を強調するなどの調整が可能。

複雑な図でも、PNG や JPEG に比べてファイルサイズが小さいことが多いため、軽量で扱いやすい。

SVG はブラウザだけでなく、Illustrator や Inkscape などのグラフィックツールでも編集可能。様々な環境で活用できるのが強みです。

PlantUML で SVG ファイルとして図をエクスポートする手順を説明します。

PlantUML を Visual Studio Code で使用するために、以下の拡張機能をインストールします：

VS Code の settings.json を調整して、SVG 形式で出力する設定を追加：

{
  "plantuml.previewMode": "svg",
  "plantuml.render": "PlantUMLServer"
}

この設定により、PlantUML のプレビューが SVG 形式になります。

以下のコードを書きます：

@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml

PlantUML で図を SVG 形式でエクスポートする方法は以下の通りです：

PlantUML の JAR ファイルを使用する場合：

PlantUML.jar をダウンロードし、配置
以下のコマンドで .puml を SVG に変換：
```
java -jar plantuml.jar -tsvg diagram.puml
```
すると、diagram.svg ファイルが生成されます。

PlantUML の Web サーバーを利用して、SVG を取得：