VSCodeとPlantUMLインストールしてマークダウンでUMLを描いたらなんかカッコよくね? Mac版
動画版
はじめに
エンジニアの方が設計書を書く際にマークダウン形式で書くことも増えてきたかと思います(ってか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 にアクセス
ウェブサイトからVSCodeをダウンロードしインストール
コマンドラインでgraphvizをインストールし設定
コマンドラインでplantumlをインストールし設定
VSCodeでUMLを書いてプレビュー
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 を押す
UMLの詳細
Author And Source
この問題について(VSCodeとPlantUMLインストールしてマークダウンでUMLを描いたらなんかカッコよくね? Mac版), 我々は、より多くの情報をここで見つけました https://qiita.com/RyosukeKamei/items/c8448036c57a1064bd5b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .