【Mac】MarkdownでPlantUMLを書く【VS Code】

以下の環境で試しました。

• MacBook Air M1
• Visual Studio Code

PlantUMLの書き方

以下のサイトに書き方の詳細が書いています。

参考
PlantUML 概要PlantUML

シーケンス図の書き方

試しにシーケンス図を書いてみます。

Markdownファイルに以下のように記述します。

Visual Studio Codeに拡張機能をインストールする

以下の拡張機能をVisual Studio Codeにインストールします。

参考
Markdown Preview EnhancedVisual Studio Marketplace

先ほどのMarkdownファイルをVisual Studio Codeで開きます。

コマンドパレットを開きます。（Command + Shift + P）

以下のコマンドを実行して、Markdownのプレビューが表示されます。

状態機械図（状態遷移図）の書き方

シーケンス図は上記のやり方で表示までができました。

しかし、一部のPlantUMLは表示ができません。

状態機械図は以下のように表示されてしまいます。

これを解消するには、graphvizをインストールすると描画されます

brew install graphviz