Visual Studio Codeで書いたPlantUMLの図をエクスポートする

普通にHTMLとかdocxにできると思っていたらそのままではできなかったようで…。

というわけで、以下の拡張とソフトを追加でインストールしました。

MPEを入れてからCtrl-K Vでプレビューすると自動でプレビューがMPEのものになり、プレビュー画面からコンテキストメニューの[HTML] - [HTML (offline)]を選ぶと.mdファイルと同じフォルダに同名のHTMLファイルが出力され、PlantUMLのコードブロックがSVG(!)の図として出力されます。SVGのソースはHTML内に記述されるのでHTML単体で完結できて便利です。

f:id:wata_d:20180102175323p:plain

また、Pandocを入れておくとこれを使用して出力することもできます。たとえば本文に

---
title: "Wordのタイトル"
output:
  word_document:
    path: test.docx
---

と書いてからプレビューのコンテキストメニューの[Pandoc]を選ぶとtest.docxが出力され、PlantUMLのコードブロックもちゃんと図として出力してくれます。Pandoc経由で図を出力するにはImageMagicが必要になります。

f:id:wata_d:20180102175333p:plain

MPEを入れておくとflowchart.jsなど他のダイアグラムも使えるようだし、かなり出来ることも増えて楽しそうですね。