PlantUMLのファイルをコマンドラインでPNG、SVG、PDF変換

# はじめに
VSCodeのCUIでPlantUMLのPUファイルからPNG、SVG、PDFに変換するやりかたをまとめておきます。
CUIはPwerShellでコマンド実行します。
ネットには方法を説明したたくさんのドキュメントがありますが、環境設定など複雑なものが多いような気がします。

以下のような変換を説明します。

・plantuml.jarでPUファイルをPNGに変換する。(PU → PNG)
・plantuml.jarでPUファイルをSVGに変換する。(PU → SVG)
・SVGからInkscapeを利用してPDFに変換する。 (SVG → PDF)

# 前提
* Windows 7 以上のOS
* VSCode(Visual Studio Code)インストール済み
* [JRE](https://www.oracle.com/java/technologies/javase-downloads.html)(Java Runtime Environment)また[JDK](https://www.oracle.com/java/technologies/javase-downloads.html)(Java Development Kit)がインストール済みかつjavaコマンドがCUIで実行可能
* VSCodeの拡張機能でPlantUMLをインストール済み(2.14.2)、PUファイルのプレビューに利用
* VSCodeの拡張機能でSVGをインストール済み(1.4.5)、SVGファイルのプレビューに利用
* [plantuml.jar](https://plantuml.com/ja/download)をダウンロードしてPCの任意のディレクトリに配置済み、PUファイルからPNGおよびSVG変換に利用
* [Inkscape](https://inkscape.org/ja/release/inkscape-1.0.2/)インストール済み、SVGからPDF変換に利用

# 変換元のPUファイル

変換するPlantUMLのルPUファイルとして下記のフローチャートを用意しました。

**test.pu**

```PlantUML
@startuml
(*) --> "前処理1"

if "NG" then
  -->[true] "Error Message"
else
  -->[false] "前処理2"
    if "NG" then
      -->[true] "Error Message"
      --> (*)
    else
      -->[false] "Main処理"
      -->"ファイル取得"
      -->"ファイル変換"
      -->"ファイル出力"
      --> (*)
    endif
endif

@enduml

```
**PlantUMLのプレビューでtest.pu表示**
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239597/68d32dc4-81af-df7b-a746-171c55f98e0e.png)


# PUファイルをPNGに変換

変換するPUファイルと同じディレクトリにplantuml.jarを配置するとコマンドでパス指定がなくなるので簡便。
下記のコマンドを実行します。

```shell
java -jar .\plantuml.jar .\test.pu -charset UTF-8
```
|パラメータ|説明|
|:--|:--|
|test.pu|PUファイル|
|-charset|文字コード (UTF-8を指定)|

PUファイルと同じディレクトリにtest.pngが作成されます。

**test.png**
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239597/704243b2-d383-2d9c-603f-fde0c86fe2c4.png)

# PUファイルをSVGに変換

下記のコマンドを実行します。PNGとの違いは**-svg**を指定します。

```shell
java -jar .\plantuml.jar -svg .\test.pu -charset UTF-8
```
|パラメータ|説明|
|:--|:--|
|-svg|変換ファイルSVG|
|test.pu|PUファイル|
|-charset|文字コード (UTF-8を指定)|

PUファイルと同じディレクトリにtest.svgが作成されます。

**SVGのプレビューでtest.svg表示**

![2021-04-05-13-58-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239597/97e91aba-8fc6-4e98-e1d4-dd283669a73d.png)

# SVGファイルをPDFに変換

変換するSVGファイルのディレクトリにCUIのディレクトリを変更後、Inkscapeのbinのパスを環境変数のPathに設定します。

```shell
cd C:\SVGファイルのディレクトリ
Set-Item Env:Path "$Env:Path;C:\Program Files\Inkscape\bin"
```
※システム環境変数のPathに設定でもよい（パス指定を省略できる）

下記のコマンドを実行します。

```shell
inkscape -z test.svg test.pdf -w 200 -h 200
```
|パラメータ|説明|
|:--|:--|
|-z|InkscapeのGUIを非表示|
|test.svg|入力SVGファイル|
|test.pdf|出力PDFファイル|
|-w|PDFファイルの幅(例:200)|
|-h|PDFファイルの高さ(例:200)|

SVGファイルと同じディレクトリにtest.pdfが作成されます。

**test.pdf**

![2021-04-05-15-21-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239597/49cc74ca-0c15-e673-d7c2-5311edc7b3f6.png)

### コラム
下記のようなエラーの場合、実行しているユーザの権限がディレクトリに対してtest.pdfファイルを作成できない状態です。
権限のあるユーザで実行するか、あらかじめ**test.pdf**をIkscapeのGUIで作成済みにすることで上書きできます。

```shell
** Message: 15:14:54.121: couldn't open the PDF file.

** (org.inkscape.Inkscape:15276): WARNING **: 15:14:54.132: Can't open file: C:\Users\～\test.pdf (doesn't exist)
ink_file_open: 'C:\Users\～\test.pdf' cannot be opened!
InkscapeApplication::document_open: Failed to open: C:\Users\～\test.pdf
ConcreteInkscapeApplication::on_open: failed to create document!
```

# まとめ

PlantUMLはフローチャート、シーケンス図、クラス図など多種多様な作図ができる強力なツールです。
VSCodeを利用してPlantUML図作成後、他のドキュメントへ展開するために、PNGやPDFファイルの変換が必要となります。
特にPNGに変換するとOfficeなどのドキュメントでそのまま使えます。
私が普段変換しているやり方をまとめました。（備忘録）
もっと簡単な方法があるかもしれません。