VSCodeとPlantUMLインストールしてマークダウンでUMLを描いたらなんかカッコよくね？　Mac版

動画版

はじめに

エンジニアの方が設計書を書く際にマークダウン形式で書くことも増えてきたかと思います。

マークダウンで図を書くときに便利なのがPlantUMLです。

UMLは設計だけでなく要件定義でも使えます。非エンジニアの方にも是非お勧めしたいです。

オープンソースの総合開発環境Visual Studio CodeにPlantUMLをインストールする方法を紹介します。

メリット

・マークダウンで記載するとバージョン（Git）管理したときにバージョン間の差分がみれる（Diffが取れる）

・フォーマットが固定されるので視認性が向上

・とにかく軽い（マークダウンはただのテキスト）

環境

・macOS Catalina 10.15.7 (2020/10/13)

手順

1. ウェブサイトからVSCodeをダウンロードしインストール

2. コマンドラインでgraphvizをインストールし設定

3. コマンドラインでplantumlをインストールし設定

4. 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
$ 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 を押す

UMLの詳細