【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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA