Plantuml を VSCode で利用する

## PlantUML

### 公式サイト

* [PlantUML](https://plantuml.com/ja)
  * （なんでこんなに広告多いんだろうこのサイト…）

* 装飾記法
    * https://plantuml.com/ja/creole

以下の様なコードをパースしてUMLを描画できる。

### サンプルコード

```puml:sample.puml
@startuml sample

skinparam shadowing false
autonumber

participant "い" as a
participant "ろ" as b
participant "は" as c
participant "に" as d

a -> b : 同期
activate a
    activate b
        b-->c : 非同期
        activate c
            b->b : **太字**
            activate b
                loop ループ
                    c->c: __下線__
                end

                ref over c: リファレンス\n（更に詳しい情報は XXX を参照等）

                alt IF 分岐
                    c->c: 処理
                    else 別の条件
                    c->c: 処理
                end

                c-->b : 非同期処理の\n完了
            deactivate b
        deactivate c
    b->a : 処理完了
    deactivate b
    create d
    a->d : 作成
a->a: 完了処理
deactivate a

note over a: Note A
note left b: Note B
note right c: Note C

@enduml
```

### 描画

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9986/6abf3060-6ea3-dc8e-e23e-76322f7fe267.png)


## VSCode で拡張子 puml でUMLを書けるようにする

### 1. 拡張機能をインストールする

1. VSCode を 開き `クイックオープン` を開く (windowsでは `Ctrl + p` )
2. `ext install plantuml` と入力して Enter
3. 左のペインに拡張機能の一覧が表示されるので `PlantUML` をインストールする

### 2. Graphviz をインストールする

PlantUMLの拡張機能を利用するため Graphviz をインストールする

[Graphviz - Graph Visualization Software](http://www.graphviz.org)

1. windows の場合は Windows > Stable 2.38 windows install packages に進む
2. graphviz-2.38.msi をダウンロードして実行
3. 環境変数に Graphviz のPATH を指定する

```text
C:\Program Files (x86)\Graphviz2.38\bin
```

## VSCode の Markdown で記述できるようにする

VSCode の通常の Markdown のプレビューでは PlantUML が展開されないため拡張機能をインストールする

1. VSCode を 開き `クイックオープン` を開く (windowsでは `Ctrl + p` )
2. `ext install markdown-preview-enhanced` と入力して Enter
3. 左のペインに拡張機能の一覧が表示されるので `Markdown Preview Enhanced` をインストールする  
(現在2種類あるようだ、 製作者は Yiyi Wang のものを選択する)

### TIPS

* Pandoc をインストールしていれば Docx に書き出し → GoogleDoc で共有もできる（GitHubでやればもっと簡単だけどね…）
  * See. [VSCodeでMarkdownとPlantumlを使ってDocx 書き出しをする](https://qiita.com/AyumuSuzuki/items/76f98bfb5621d65a04ac)
* markdownを記述してプレビューするときは `Ctrl + k` の後 `v` を押下する
* 外部の puml ファイルを `@import` キーワードで Markdown の文中に読み込む事ができる

```markdown:test.md
* こんな感じで↓

＠import "puml/seq.puml"

* 文章がスッキリする。
* ＠は半角で書くこと。
```

### Markdown All in One を利用している場合の注意点

`Markdown Preview Enhanced` のプレビューのショートカットを上書きしてしまうのでショートカットキーの編集を行う

1. `ctrl + shift + p` でコマンドパレットを開く
2. `shortcut` と入力し `基本設定: キーボードショートカットを開く` を選択する
3. `markdown.extension.togglePreviewToSide` を右クリックしキーバインドを削除

## PDF書き出ししたい場合

`Markdown Preview Enhanced` でのPDF書き出しはめんどいので別の拡張機能をインストールする

1. `ext install markdown-pdf` で `Markdown PDF` 拡張機能をインストール
1. `ext install plantuml` で `PlantUML` 拡張機能をインストール
1. （現在のところ）デフォルトだとエラーが出るので公式サーバーから `plantuml.jar` をDLする
1. `> setting` で基本設定を開く
1. `plantuml.jar` の値にDLしてきた `plantuml.jar` を設定する

### 注意点

* `@import` は使えないのでPDF書き出しする時は `puml` ファイルを SVG 書き出しして貼り付ける
  * こんな感じにする → `![サンプル](out/sample/sample.svg)`
* Markdownと一緒に書いて後で切り分けてもよい
  * 設定で `plantuml.server` に公式の `https://www.plantuml.com/plantuml` を設定すればデフォルトのMarkdownプレビューでも描画できる
  * 公式とはいえ外部サーバーなので注意が必要
  * Docker使ってローカルでサーバー建てることもできる
    * See. https://hub.docker.com/r/plantuml/plantuml-server/