Visual Studio Code + MarkDown + PlantUML で開発ドキュメントをわかりやすくする

きっかけ

githubなどのソース管理ツールで新規のリポジトリを作成したり、フレームワークのプロジェクトを作成したりすると、Readme.mdができる。

Markdownは流行りというか、Qiitaでもお馴染みだし使いやすい。
しかし、画像（というか図）はどこかで作ってリンクするなど、ちょっと面倒だった。

そんな中、こんな記事を見る。
https://qiita.com/kitfactory/items/31cdf80cf1d3d8b42de8

「ああ、Markdownで図が描ける」

ということで、さっそく導入しようとしたのだが、最初の？？？となったところをまとめておく。

導入手順

Windows環境にVSCodeは既にインストール済みであることは前提として、次の手順が必要となる。

1. VSCodeの拡張機能で、「Markdown Preview Enhanced」をインストール

2. 以下URLから、「Graphviz(dot)」をインストール（msiファイルが楽）

   http://www.graphviz.org/download/

使い方

正しい使い方かわからないが、Markdownファイルを開いて、「Ctrl + k（Ctrl離す）v」というショートカットキーでMPEで開く。

「Markdown Preview Enhanced」は、Markdownのビューワである。
普通に右クリックしてプレビューしても、デフォルトのビューワで開いてしまって、MPEにならない。

MPEで開いた状態になれば、右クリックで画像やPDFでエクスポートすることもできる。

最後に

最初は、PlantUMLのモジュールなども入れないといけないのか？など色々入れようかどうか迷っていたが、実際には先述の2つのものを入れればよいので、プロジェクトで他のメンバーにも入れてもらいやすいかなと思う。

エクスポートも使えるので、最悪画像で共有することもできるし、結構良いと思っている。
仕様の説明は、できるだけソースと一緒に管理出来てほしいと思っていて、ソースのコメントだけで全て済ましたいとすら思っていた。
mdという別ファイルになってしまうものの、ソースの近くに置いておければ直ぐ仕様が分かるはず。
Excel信者は未だたくさんいると思うが、これでまた一段ソースのみの管理に一段近づけそう。