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

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

VSCode + Markdown + PlantUMLでそこそこ楽しく物書きしてたけど、成果物はMarkdown PrintとかPandocで何かに変換すりゃいいだろと思ってたら図が出てこなかったので正月はこれなんとかできないか探すか…

— wata_d (@wata_d) December 28, 2017

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

• Markdown Preview Enhanced(MPE)
• Pandoc - Installing pandoc
• Convert, Edit, Or Compose Bitmap Images @ ImageMagick

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

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

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

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

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