VSCodeで書くカッコイイMD&UML

vscode

VSCodeを使ってMarkDownのプレビューが良い感じにできる記事を紹介しました
詳しくは下記リンクから覗いてみてください

今回はVSCode(Visual Studio Code)エディタでMarkDown(マークダウン)を更に進化させて、
図を取り入れた文書の作成方法を記事にしました
最初にどんな感じの文書が作れるのかお見せしておきます

どうでしょう?ちゃんとMarkDownのスタイル(css)も効いているし
文書の中に自然にUMLが描かれるんです!

しかも、このUMLはテキストで書いてるだけなので、図の整形とか余計な事を考える必要がないんですよ
図を描こうとすると綺麗に仕上げたくなって地味に時間かかるでしょ?
そういう時間をバサっと短縮できるわけです

ちなみにこの文書はHTML出力も可能!めっちゃ便利!!

  1. テキストで記述できるので、図の整形に手間を取られる事が無い
  2. バージョン管理ツール(GitHubやSVN等)でも差分を取りやすくなる
  3. HTML出力も可能なので、そこからPDFやJPEG等にも変換可能

はい、導入方法書きますか

スポンサーリンク

導入するソフト

  1. PlantUML(VSCodeのExtension)
  2. 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については
レイアウトを自動整形してくれるこの方法が圧倒的に楽だと思いました

また追記したいと思いますが、一旦ここまで!