VSCodeでMD&PlantUMLのプレビューとPDF出力をできるようにする

 背景情報ユースケース図をmarkdownまたはテキストを使用して作図することになった。

まずはmermaid記法にユースケース図が対応しているのか調べてみた。

その結果zenUMLなどがあり、似たような作図はできそうだったが非対応であった。

他に調べてみると、PlantUMLというJavaで実装されたテキストベースのUML作図ソフトの存在を知った。
これには少し見覚えがあり、markdown PDFの設定にジャンプすると、案の定PlantUMLをレンダリングする設定があった。

つまりPlantUMLを出力する機能がmarkdown PDFにはある。しかし、VSCodeのmarkdownファイルのプレビューでUMLが表示されていなかった。

また、markdown PDFではplantUMLをそのまま文中に挿入することで認識されるらしく、コードブロックに入れてしまうとUMLがレンダリングされなくなってしまっていた。
このスクラップでは主にこのプレビューの問題と、PDF出力時のUML生成のためのmarkdown記法の修正、設定を目的とする。

 目的
 VSCodeのmarkdownプレビュー時にUMLを表示する

 コードブロックを使用したPlantUMLの記法を採用したmarkdown PDFの設定

 サンプルコードこのユースケース図ををVSCodeのmarkdownプレビューで表示されるようにしつつ、拡張機能のMarkdown PDFで出力されるように設定する。
```plantuml
@startuml
left to right direction
skinparam packageStyle rectangle

actor "乗客" as Passenger
actor "支払いサービス" as PaymentService
actor "切符発行システム" as TicketSystem

rectangle "Web予約システム" {
  usecase "路線検索" as SearchRoute
  usecase "座席予約" as ReserveSeat
  usecase "支払い" as MakePayment
  usecase "予約確認" as ConfirmReservation
  usecase "予約キャンセル" as CancelReservation
}

Passenger --> SearchRoute
Passenger --> ReserveSeat
Passenger --> MakePayment
Passenger --> ConfirmReservation
Passenger --> CancelReservation

MakePayment --> PaymentService : <<include>>
ReserveSeat --> TicketSystem : <<include>>

@enduml
```

Timdaik

 解決策解決したい目的2つに対する処方をそれぞれ記す。

 VSCodeのPlantUMLのmarkdownプレビュー結論: jebbs 氏が提供している拡張機能「PlantUML」をインストールしていくつか設定をすればよい。
https://marketplace.visualstudio.com/items/?itemName=jebbs.plantuml

 諸設定まずplantuml.javaにローカルのJava.exeを指定する必要がある。

おそらくOracleサーバー？等と一緒にWindowsにはデフォルトでJava環境が入っている気がするので、ターミナルからwhere javaでパスを調べるのが良いかも。

入っていなければ、Javaの環境構築を行いましょう。
次にplantuml.renderにPlantUMLServerが選ばれていることを確認してから、plantuml.serverにhttps://www.plantuml.com/plantumlを入力してやればよい。
他のPlantUML環境構築の記事を調べてみると、plantuml.jarなど他に多くのファイルをダウンロードしたり環境構築が大変なのですが、Javaさえもともと入っていれば今回のように楽に導入できそうです。

 PlantUMLをコードブロックで囲った状態でのPDF出力時レンダリング設定結論: markdown PDFの設定を少しいじれば即解決。

拡張機能入れていない人は入れてくださいな。
https://marketplace.visualstudio.com/items/?itemName=yzane.markdown-pdf
markdown-pdf.plantumlOpenMarkerとmarkdown-pdf.plantumlCloseMarkerという設定がある。

この2つは初期値がそれぞれ、@startuml, @endumlとなっている。

これをそれぞれ```plantuml, ```と書き替えてやるだけで良い。
なお、PlantUMLを囲うコードブロックにはシンタックスハイライト兼ファイルの種類を認識しやすいようにplantumlと追記しているのでこの設定となっている。

Timdaik

背景情報

目的

サンプルコード

解決策

VSCodeのPlantUMLのmarkdownプレビュー

諸設定

PlantUMLをコードブロックで囲った状態でのPDF出力時レンダリング設定

参考