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

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

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

1. ベクター形式で高品質

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

2. テキストベースで編集が容易

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

3. Web や GitHub Pages との相性が良い

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

4. スタイル適用が可能

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

5. ファイルサイズがコンパクト

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

6. 互換性が高い

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


2. SVG ファイルとして図をエクスポートする手順

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

1. VS Code に PlantUML を設定

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

  • PlantUML 拡張機能(jebbs.PlantUML)
  • Graphviz(必要なら Graphviz もインストール)

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

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

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

2. エクスポートする PlantUML ファイルを作成

  1. .puml ファイルを作成(例:diagram.puml
  2. 以下のコードを書きます:
    @startuml
    Alice -> Bob: Hello
    Bob --> Alice: Hi!
    @enduml
    

3. SVG 形式でのエクスポート

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

方法 ①: VS Code のコマンドでエクスポート

  1. Ctrl+Shift+P を押してコマンドパレットを開く
  2. PlantUML: Export Current Diagram を選択
  3. SVG 形式を選択し、ファイルを保存

方法 ②: CLI でエクスポート

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

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

方法 ③: PlantUMLServer 経由で変換

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

  1. http://www.plantuml.com/plantuml/svg/{エンコード済みのUMLコード} をアクセス
  2. Save As で SVG 形式として保存

4. SVG をさらに活用

  • SVG を GitHub Pages で公開
  • CSS で SVG のデザインを変更
  • VS Code で直接プレビュー (Ctrl+Shift+V)