Markdownの文中にPlantUMLでUMLを埋め込むのに少し苦労したため、備忘として残します。
PlantUMLを使うための下準備
PlantUMLを使うために、GraphvizとOpenJDKをインストールします。
下記を参考にインストールしました。
Visual Studio CodeでPlantUMLを使うメモ (Windows編)
VSCodeの拡張機能のインストール
VSCodeの拡張機能から以下の拡張機能を導入します。
-
PlantUML
VSCodeでPlantUMLを使ってUMLを書くために用います。
-
Markdown Preview Enhanced
Markdownの文書中にPlantUMLのUMLを埋め込むために用います。
Qiita Markdown Previewと同時に有効化すると、干渉して正しく動作しないようなので注意。
VSCode上でのUMLの描画
以下のサンプルコードのプレビューがVSCode上で描画できるか確認します。
個人的に、可視性をPlatUMLの独自記号でなく、+や-で表したいため、skinparam classAttributeIconSize 0を指定しています。
サンプルコード
@startuml
skinparam classAttributeIconSize 0
title サンプルクラス
class Encoder{
+ translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml
プレビュー
プレビューはAlt + dで表示できます。
プレビューが表示できれば動作確認はOK。
クラス図やシーケンス図を単に画像として出力するだけなら、この構成で実現できます。
Ctrl + Shift + pでコマンドパレットを開いて、PlantUML: Export Current Diagramを実行すると、画像として出力できます。
（方法1）外部ファイルとして保存したUMLを読み込む
Markdownの文書中に、別ファイルで保存したUMLを表示できるようにします。
画像化して挿入すると、UMLの更新後に再び画像化しないといけないのが手間なので、PlantUMLで書いたまま挿入できるようにします。
plantuml.jarのインストール
- plantuml.jarファイルをダウンロードします。
https://plantuml.com/ja/download
からplantuml.jarをダウンロードし、任意の場所に配置します。
（公式ページのはずですが）広告が多いので注意。
私はリンク先からgithubのreleaseページに飛んでダウンロードしました。
- VSCodeの設定
Ctrl + ,を押してSettingsを開き、markdown-preview-enhanced.plantumlJarPathの項目に、先ほどのplantuml.jarファイルのパスを設定します。
plantumlJarPathで検索すると出てきます。
本文中へのUMLの挿入
本文中で@import文でpumlファイルを読み込むと、UMLを挿入できます。
@import "sample.puml"
（方法2）コードブロックとしてUMLを描く
Markdownの文書中に、直接PlantUMLでUMLを記載します。
コードブロック記法でplantumlを指定してUMLを描くと、Markdownの文書内でUMLを挿入できます。
```plantuml
@startuml
skinparam classAttributeIconSize 0
title サンプルクラス
class Encoder{
+ translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml
```