(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 ファイルを作成
.puml
ファイルを作成(例:diagram.puml
)- 以下のコードを書きます:
@startuml Alice -> Bob: Hello Bob --> Alice: Hi! @enduml
3. SVG 形式でのエクスポート
PlantUML で図を SVG 形式でエクスポートする方法は以下の通りです:
方法 ①: VS Code のコマンドでエクスポート
Ctrl+Shift+P
を押してコマンドパレットを開くPlantUML: Export Current Diagram
を選択SVG
形式を選択し、ファイルを保存
方法 ②: CLI でエクスポート
PlantUML の JAR ファイルを使用する場合:
- PlantUML.jar をダウンロードし、配置
- 以下のコマンドで
.puml
を SVG に変換:
すると、java -jar plantuml.jar -tsvg diagram.puml
diagram.svg
ファイルが生成されます。
方法 ③: PlantUMLServer 経由で変換
PlantUML の Web サーバーを利用して、SVG を取得:
http://www.plantuml.com/plantuml/svg/{エンコード済みのUMLコード}
をアクセスSave As
で SVG 形式として保存
4. SVG をさらに活用
- SVG を GitHub Pages で公開
- CSS で SVG のデザインを変更
- VS Code で直接プレビュー (
Ctrl+Shift+V
)