VsCodeとPlantUMLでMarkdown+UML
きりんです。
今までMarkdown+PlantUMLでドキュメントを書くために、Boostnoteを使ってました。
Boostnoteはインストールが簡単、ドキュメントの保存（先）を意識しなくて良い、と言うメリットがあるのですが、エディタとプレビューのスクロールが同期しない、ファイル単位での取り扱いができないというデメリットも感じていました。
ファイル単位での取り扱いができるとgitでの管理が可能になる、新旧ファイルのdiffが取れる、ドキュメントとソースを一緒に管理できる、といったメリットがあるので何か方法がないかと探していると、会社の同僚がVsCodeとPantUMLでドキュメントを書いていて、非常に快適そうだったのでさっそく真似してみました。
使用するソフト
MarkdownでUMLをプレビューするためのVsCodeのExtensionはいくつかあるようですが、ドキュメントを外部に提出する場合などにPDFなどでのエクスポートができたほうが良いと考え、いろいろ試した結果以下の組み合わせに落ち着きました。
VsCode
Atomと比べて圧倒的に動作が軽いので、今はメインのエディタとして使用しています。 機能も豊富でMarkdownのプレビューも標準で可能ですが、UMLの描画はできません。 しかしAtomと同様、拡張性が高いので必要に応じてExtensionをインストールしカスタマイズが可能です。
Markdown Preview Enhanced
VsCodeのExtention。これを使用することでMarkdownのプレビュー上にUMLを描画することが可能になります。 さらにこのExtensionではMarkdownドキュメントをUML込みでHTMLや画像、PDFへエクスポートすることができます。 名前からするとAtomのものと同じExtensionなのでしょうか。
GraphViz
UMLから画像を描画するためのツール。 PlantUML絡みで何かとお世話になります。
Chrome
Markdown Preview EnhancedからPDF等でエクスポートする際にPuppeteer(=Chrome)が必要なのでこれもインストールします。 （自宅ではFirefox使っているのでChromeはインストールされておらず、PDF出力できなくて右往左往してしまいました）
インストール
VsCodeとGraphViz、Chromeはそれぞれダウンロードしてインストールします。
次にVsCodeにExtensionのMarkdown Preview Enhancedをインストールします。
とりあえず以上でMarkdownでのUML描画が可能になります。
使い方
まずはVsCodeを起動し、Markdownを使用してUMLを記述します。
プレビューの表示
プレビューの表示はエディタ上でCtrl+Kを押した後にVを押すか、編集画面上で右クリックしてMarkdown Preview Enhanced: Open Preview to the Sideを選択すると、右ペインにMarkdownのプレビューが表示されます。
問題なくプレビューできました。
PDFエクスポート
プレビュー上で右クリックするとエクスポートのメニューが表示されます。
メニューからChrome (Puppeteer) > PDFを選択すると、元の.mdファイルと同じディレクトリにPDFが出力されます。
とりあえずPDFは生成されるんですが、漢字が微妙に中国語っぽくなっちゃいました。
フォントの指定
想像ですが、プレビューとエクスポートで使用されるデフォルトのフォントが違うのかもしれません。 そこで、Markdown Preview Enhancedのスタイルでフォントを指定します。
まず、Ctrl+Shift+PをクリックしてMarkdown Preview Enhanced: Customize CSSを検索します。
スタイルを記述します。
とりあえず今回はこんな感じにしてみました。
/* Please visit the URL below for more information: */
/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;
+ * {
+ font-family: Meiryo, sans-serif;
+ overflow: visible;
+ }
+ @media print {
+ font-family: Meiryo, sans-serif;
+ overflow: visible;
+ }
}
今度はちゃんと日本語っぽいフォントでエクスポートできました。
最後に
VsCodeではエディタとプレビューのスクロールが同期するので、作業がとてもしやすくなりました。 また、プロジェクトのソースと一緒にドキュメントを管理できるので、「あれ、このプロジェクトのドキュメントどれ（どこ）だっけ？」ってことが無くなるかと思います。
一方でBoostnoteもその手軽さから、メモや下書きと言ったとりあえずテキストを書き留めておきたいときに向いていると思うので、用途に応じて使い分けてみたいと思います。
