簡単なUMLをMarkdown内に直接書き込む方法

概要

• VScode内にてMarkdownの文章とUMLを同じプレビュー内に表示させる方法を記述。
• 前投稿PlantUMLを用いた簡単なシーケンス図の作成方法の続き。
• UMLとして記述したコードが変換されないエラーの解消法あり。
• 使用拡張機能：Markdown Preview Enhanced、PlantUML
• 使用環境：Windows11 Pro、VScode

記述の方法

• ファイルの拡張子は.mdにて作成。簡単なシーケンス図を作成する。VScodeにて以下のコードを``` plantumlと```で挟んで記述する。

uml.md

@startuml

object Object1
object Object2

Object1 -> Object2: メッセージ1
Object2 -> Object1: メッセージ2

@enduml

• 実際にMarkdown内に記述した全体コードはこちら。
  

• 右クリックで以下画像のように選択することでプレビュー可能。
  

• プレビュー後
  

Markdown内のUMLが変換されない事象について

Markdown内にUMLとして記述したはずのコードが反応せず、以下のようなエラーが出てしまう場合の対処法について記述。
参考サイト：VSCodeでMarkDownとPlantUMLを使う - yuDigiLife

    Error: plantuml.jar file not found: ""

Please download plantuml.jar from https://plantuml.com/download.  


If you are using VSCode or coc.nvim, then please set the setting "markdown-preview-enhanced.plantumlJarPath" to the absolute path of plantuml.jar file.

If you don't want to use plantuml.jar, then you can use the online plantuml server 
by setting the setting "markdown-preview-enhanced.plantumlServer" to the URL of the online plantuml server, for example: https://kroki.io/plantuml/svg/

• VScodeにて追加済みの拡張機能を確認。Markdown Preview Enhancedの拡張機能の設定を開く。
  

• Markdown-preview-enhanced:Plantuml Jar PathにPlantuml Jarのファイルパスを入力。すべてのプロファイルに適用に設定。