VSCodeを使ってMarkDownのプレビューが良い感じにできる記事を紹介しました
詳しくは下記リンクから覗いてみてください
今回はVSCode（Visual Studio Code）エディタでMarkDown（マークダウン）を更に進化させて、
図を取り入れた文書の作成方法を記事にしました
最初にどんな感じの文書が作れるのかお見せしておきます
どうでしょう？ちゃんとMarkDownのスタイル（css）も効いているし
文書の中に自然にUMLが描かれるんです！
しかも、このUMLはテキストで書いてるだけなので、図の整形とか余計な事を考える必要がないんですよ
図を描こうとすると綺麗に仕上げたくなって地味に時間かかるでしょ？
そういう時間をバサっと短縮できるわけです
ちなみにこの文書はHTML出力も可能！めっちゃ便利！！
はい、導入方法書きますか
導入するソフト
- PlantUML（VSCodeのExtension）
- Graphviz
PlantUMLを導入
VSCodeを起動して、Extensionをチャチャッと入れてしまいましょう
「⌘ + Shift + x」でExtensions windowが開きますー
検索窓に「plantuml」を入力してもらえれば候補が出てきてくれます
Installボタンを押してExtensionsに追加してください
Graphvizを導入
MacだとbrewコマンドでInstallできますし、Windowsだったら公式サイトからzipファイルをdownloadしてください
brew install graphvizこれで大体OKです
あとは書くだけ！
最初のサンプルでもお見せしていますが、通常のMarkDownの中に埋める場合は
```plantumlでスタートするとそこからumlの記述エリアになります。
再度 ```を書けばそこまでがumlの記述として認識され、
それ以降は再びMarkDownの記法が有効になります
この機能をうまく使えば設計書を全てMarkDownで記載する事もできると思います
少なくとも、以前現場で私はこのツールで処理フローなどを記載したHTMLを出力して
活用することができました。draw.ioのように優れた描画ツールもありますが
ある程度形式が決まっていて、要素だけが変わるようなUMLについては
レイアウトを自動整形してくれるこの方法が圧倒的に楽だと思いました
また追記したいと思いますが、一旦ここまで！
