MacでVSCode+PlantUMLを用意する

3374 ワード
MacOSX VSCode plantuml MacOSX テキストリンク

概要

MacでPlantUMLが書ける環境を用意したい時があるので手順をメモ

前提

  • MacのバージョンはMojave Ver10.14.6
  • Homebrewのバージョンは2.2.6
  • VSCodeのバージョンは1.42.0
  • HomebrewとVSCodeは既にインストールされている前提です

導入手順

PlantUMLを導入

公式ドキュメントに

自分の環境に Java をインストールしておいてください。 また、シーケンス図とアクティビティ図 以外 のダイアグラムを使いたい場合は、Graphviz software もインストールしてください。

と書いてあり、私はよくクラス図を書くのでGraphvizもインストールします。

Macなのでbrewを使ってインストールします。

console
# graphvizとplantumlをインストール
brew install graphviz
brew install plantuml

VSCodeにPlantUMLプラグインを導入

VSCode左袖のExtensionsタブでplantumlと検索します。

すると画像のプラグインが表示されるのでインストールします。

動作確認

では動作を確認します。
VSCodeで新規ファイル(拡張子は.pu)を作成し、以下のクラス図を貼り付けます。

@startuml
package Logger {
    class Logger {
        void __construct(Driver driver)
        string log(string comment)
    }
    class Driver {
        string output()
    }
}

Logger ..> Driver
@enduml

プレビュー

貼り付けたらoption+dを押してUML図を描画します。

このようなプレビューが出たら成功です。

画像生成

プレビューの画像はダウンロードもできます。

関係各所への共有に便利です。

command+shift+pでVSCodeのコマンドモードに移行します。

入力画面にplantumlと入力するといくつかサジェストされるので、

PlantUML: Export current diagramを選択してください。

するとファイル形式の一覧が出るので選択してください。

選択後しばらくすると以下の通知が出るので、ダウンロードフォルダを探してみてください。

UML図の画像が出来上がっているはずです。

参考

  • PlantUMLのドキュメント

    • PlantUML自体の記法や使い方は上記ページを確認してください。(一番正確なので！)

  • PlantUMLをMac OS Xで使う

    • 普段大変お世話になっています。今回は自分の必要な部分だけ切り抜いて加筆しました。