自由気ままに書いちゃおう

好きなことをつらつらと・・・

トップ > VSCode > 【VSCode】MarkdownでPlantUMLを利用する

【VSCode】MarkdownでPlantUMLを利用する

VSCode

今回は、VSCodeにてMarkdown内でPlantUMLを利用する方法を記載しております。

（ついでにPlantUML自体も少し含めてます）

環境

  • M1 MBA(Sonoma 14.6.1)

PlantUMLのインストール

以下コマンドを実行します。

brew install graphviz
brew install adoptopenjdk --cask
brew install plantuml

VSCodeの拡張機能「PlantUML」をインストール

PlantUMLをインストールします。

VSCodeの拡張機能「Markdown Preview Enhanced」をインストール

Markdown Preview Enhanced をインストールします。

新しいフォントをダウンロード

「Times」というフリーフォントをインストールします。

既にMacにインストールされている場合には対応不要です。

Timesインストール

ココ にアクセスします。

遷移後、フォントをダウンロードします。

MacにTimesフォントをインストール

「Font Book」アプリを起動します。

「ファイル」> 「フォントを現在のユーザに追加」をクリックします。

先ほどダウンロードしたTimesフォント（拡張子tff）を選択し、「開く」をクリックします。

正常にインストールされた場合、以下の通り「Font Book」アプリに「Times」が表示されます。

拡張機能: Markdown Preview Enhanced の設定変更

Markdown Preview Enhanced の設定画面を開きます。（下記画像の「設定」）

markdown-preview-enhanced.plantumlJarPath を検索ボックスに入力し、表示された設定項目に以下を入力します。

# 入力項目。ユーザー名とバージョンはご自身のものを入力
/Users/ユーザー名/.vscode/extensions/jebbs.plantuml-x.yy.z/plantuml.jar

拡張機能: PlantUML の設定変更

VSCodeの設定画面を開き、「CommandArgs」を入力します。

以下の設定項目が表示されるため、settings.jsonをクリックします。

jsonファイル内で以下を設定します。

# setttings.jsonのplantuml.commandArgs に以下を追加
"plantuml.commandArgs": ["-Xmx2g", "-DPLANTUML_LIMIT_SIZE=16384"]

VSCodeを再起動

ここまで設定できたら、VSCodeを再起動します。

Markdown内でPlantUMLを書くための記法

Markdown（拡張子md）内に以下のように記載します。

プレビュー表示: Markdown Preview Enhanced を使う場合

Markdownファイルを選択した状態でコマンドパレット（Command+Shift＋P）を開き、以下項目をクリックします。

Markdown: Markdown Preview Enhanced: Open Preview

うまく行けば、Markdownの中にPlantUMLが描画されているはずです。

プレビュー表示: 拡張機能PlantUMLを使う場合

Alt+Dで プレビューが表示されます。

なお、この場合はPlantUMLのみ描画されます。（Markdownのプレビューは表示されません）

以上です。

guri2o1667