動画版
はじめに
エンジニアの方が設計書を書く際にマークダウン形式で書くことも増えてきたかと思います（ってかQiitaはマークダウンだし）。
マークダウンで図を書くときに便利なのがPlantUMLです。
UMLは設計だけでなく要件定義でも使えます。非エンジニアの方にも是非お勧めしたいです。
オープンソースの総合開発環境Visual Studio CodeにPlantUMLをインストールする方法を紹介します。
（ noteの記事 で技術よりはQiitaにも転記してます）
メリット
- マークダウンで記載するとバージョン（Git）管理したときにバージョン間の差分がみれる（Diffが取れる）
- フォーマットが固定されるので視認性が向上
- とにかく軽い（マークダウンはただのテキスト）
環境
macOS Catalina 10.15.7 (2020/10/13)
手順
ウェブサイトからVSCodeをダウンロードしインストール
コマンドラインでgraphvizをインストールし設定
コマンドラインでplantumlをインストールし設定
VSCodeでUMLを書いてプレビュー
1. ウェブサイトからVSCodeをダウンロードしインストール
1-1. https://code.visualstudio.com/download にアクセス
1-2. リンゴをクリック
1-3. ZIPを解凍する（きっと自動でしてくれる）
1-4. アプリケーションに移動
1-5. ダブルクリックで起動
ターミナル？brewって何？
（ご存知の方は飛ばしてください）
・ターミナルはテキストで入力していろいろできる攻殻機動隊みたいなやつ
（誤字は許して）
・brewはmacのターミナルから使えるツールのパッケージマネージャ（楽にインストールできるツール）
どうしてもわからない時は得意な人に頼みましょう 笑
インストール方法などは割愛します。
2. コマンドラインでgraphvizをインストールし設定
2-1. ターミナルを開く
2-2. インストール
$ brew install graphviz と入力
2-3. 設定（シンボリックリンクを貼る）
次の2行を入力
$ echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> /Users/$(whoami)/.bash_profile
$ echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> /Users/$(whoami)/.bash_profile
3. コマンドラインでplantumlをインストールし設定
3-1. インストール
$ brew install plantuml と入力
3-2. 終わったら次を実行
$ echo 'export PATH="/usr/local/opt/openjdk/bin:$PATH"' >> /Users/$(whoami)/.bash_profile
4. VSCodeでUMLを書いてプレビュー
4-1. 拡張子は「.pu」
サンプルは「sample.pu」
4-2. 保存
4-3. プレビュー
option + d を押す
