VSCodeでPlantUML入りMarkdown文書を作成してPDF化する方法【Docker対応】

Last updated at 2026-04-04Posted at 2024-11-24

0. はじめに

個人環境にMarkdown Preview Enhancedをセットアップしてみたところ、
妙なところに癖があって手間取ったので手順を書き残しておくことにしました。
先達の投稿には感謝です。

Linux Mintでの対応方法を追記しました。

Dockerでの構築手順を追記しました。

　なお、PlantUMLが不要なケースではVSCodeとEdgeでセットアップが完結します。

1. Markdown Preview Enhancedのすゝめ

こちらの記事から引用しています。

Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う (2017-10月時点) #VSCode - Qiita

1.1 Markdownのメリット

テキスト形式のため、とにかく編集が簡単。
テキスト形式なので、GitHubのプルリクエスト形式やGitLabのマージリクエストのプロセスに馴染みやすく、ここ、間違ってない？と誰かが修正することも容易。
テキスト形式のため、変更差分の管理が容易である。
テキスト形式のため、各種プログラムによる処理／自働化に馴染みやすい。

1.2 Markdown Preview Enhancedで出来るようになること

様々なUML図を描画する。(PlantUML連携)

様々な数式を描画する。

$\sum_{n=1}^{100}foo(n)+bar(n^2)$

CSV表の取り込み
別フォーマットでのエクスポート

2. PlantUMLを使うための下準備

こちらの記事から引用しています。

2.1 Graphvizのインストール

PlantUMLはdotを使って図を作成するので、
あらかじめGraphvizをインストールしておく必要があります。以下URLから、
stable版のインストーラをダウンロード＆インストールしてください。
https://www.graphviz.org/download/

dotコマンドが使えるように環境変数PATHにGraphvizのパスが必要です。
インストール時は「Add Graphviz to the System PATH」を選択してください。

【Linux Mint】ソフトウェアマネージャーから以下をインストール。
パスの追加は不要です。

Graphviz

2.2 Javaのインストール

JavaにはOpenJDKを使用します。
昔のPlantUML導入記事ではOracle Javaが使用されているものもありますが、
2019年4月16日から有償化されているため商用利用では使用できません。

以下よりOpenJDKをダウンロードします。
https://jdk.java.net/

zipを解凍して出てくるフォルダを以下にコピーします。
フォルダ名は「OpenJDK」にリネームしておくと良いでしょう。

C:\Users\ユーザー名\AppData\Local

コピーできたら、ユーザー環境変数「Path」に以下を追加します。

変数	値
Path	`C:\Users\ユーザー名\AppData\Local\OpenJDK\bin`

コマンドプロンプトで「java --version」を入力し、
OpenJDKのバージョン情報が出力されたらインストール成功です。

【Windows】「Microsoft Build of OpenJDK」のほうが楽に導入できます。
exe 形式はインストーラなので、パスも自動で追加されます。

https://www.microsoft.com/openjdk

【Linux Mint】ソフトウェアマネージャーから以下をインストール。
こちらも、パスの追加は不要です。

Openjdk-バージョン番号-jdk

2.3 環境変数の設定

あと、ユーザー環境変数に以下を追加しておきましょう。
これはPlantUMLで大きな図を描くと途切れてしまう対策です。(参考URL)

変数	値
PLANTUML_LIMIT_SIZE	`8192`

【Linux Mint】~/.bashrcの末尾に以下を追加。

export PLANTUML_LIMIT_SIZE=8192

3. Visual Studio Codeの設定

こちらの記事から引用しています。

3.1 Visual Studio Codeのインストール

VSCodeを以下よりダウンロードし、インストールします。
https://code.visualstudio.com/

インストール設定はデフォルトでも問題ありませんが、
使い勝手が良くなるのでコンテキストメニューの追加をオススメします。

【Linux Mint】同サイトから.debをダウンロードしてインストール。
コンテキストメニューのチェック項目はありません。

3.2 Visual Studio Codeを日本語化する

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

Japanese Language Pack for Visual Studio Code

インストールが完了したらVSCodeの再起動を行います。
完了後に画面右下に「Change Language and Restart」と表示されるので
クリックしてください。

3.3 VSCodeの拡張機能のインストール

VSCodeの拡張機能から以下の拡張機能を導入します。

PlantUML
Markdown Preview Enhanced

3.4 Markdown Preview Enhancedの設定

VSCodeの設定から以下の設定を変更します。

設定	値
Markdown-preview-enhanced: Chrome Path	`C:\Program Files (x86)\Microsoft\Edge\` `Application\msedge.exe`
Markdown-preview-enhanced: Enable Extended Table Syntax	`☑` Enable extended table syntax to support merging table cells.
Markdown-preview-enhanced: Plantuml Jar Path	`C:\Users\ユーザー名\.vscode\extensions\` `jebbs.plantuml-バージョン番号\plantuml.jar`

【Linux Mint】上記2つのパスはそれぞれ以下のようになります。
Chrome Pathは/usr/bin/microsoft-edge-stableでも動きます。

/usr/bin/google-chrome-stable
/home/ユーザー名/.vscode/extensions/
jebbs.plantuml-バージョン番号/plantuml.jar

3.5 VSCode上でのUMLの描画

以下のサンプルコードのプレビューがVSCode上で描画できるか確認します。

サンプルコード

sample.md

```plantuml
@startuml サンプルコード
skinparam classAttributeIconSize 0

title サンプルクラス

class Encoder{
    + translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml
```

プレビュー

コマンドパレットから以下を実行すると表示できます。
プレビューが表示できれば動作確認はOK。

Markdown: Markdown Preview Enhanced: Open Preview to the Side

3.6 PDFで出力する

プレビュー上でマウスを右クリックし、下図の順で選択すると
mdファイルと同じフォルダに同名のpdfファイルが出力されます。
pdfファイルが既に存在する場合は上書きされます。

3.7 PDFのページレイアウト

指定なしだとレターサイズになるので、印刷するときにちょっと困ります。
以下を冒頭に書いておくと、ちゃんとA4サイズになるのでオススメ。
用紙の向きと余白も設定できます。

---
puppeteer:
    format: "a4"
    landscape: false
    printBackground: true
    margin:
        top:    12.7mm
        bottom: 12.7mm
        left:   12.7mm
        right:  12.7mm
---

改ページを挿入したい場合は、以下のタグセットをお使いください。
タグの中身は空のままで大丈夫です。

<div style="break-before: page;"></div>

4. プログラミングフォントMyrica

必須ではありませんが、視認性が良くなるので導入をオススメします。
こちらのサイトが頒布元です。

プログラミングフォント Myrica | Myrica （ミリカ）は、フリーなプログラミング用 TrueType フォントです。

4.1 Myricaのフォントイメージ

4.2 Myricaのインストール

以下よりMyrica.zipをダウンロードします。
https://github.com/tomokuni/Myrica/blob/master/product/Myrica.md

zipを解凍して出てくるMyrica.TTCを右クリックしてインストールします。

【Linux Mint】Myrica.TTCを以下のどちらかに配置します。

/usr/local/share/fonts（システム全体のフォント）
~/.local/share/fonts（ユーザー専用のフォント）

配置後はキャッシュの更新を行ってください。

fc-cache -fv

4.3 Myricaの設定

VSCodeの設定から以下の設定を変更します。

設定	値
Editor: Font Family	`'Myrica M'`
Editor: Font Size	`16`

5. Dockerでの構築手順

　手数がそれほど多くないとはいえ、環境のセットアップはやはり手間です。そこで、以下ではDockerで環境を構築する手順を説明します。

本節では以下のOSで動作確認を行っています。

5.1 Dockerのセットアップ

　Dockerのセットアップについては、以下の記事をご参照ください。

5.2 VSCodeの事前準備

　こちらも前述の記事をご参照ください。

5.3 コンテナ定義ファイルの作成

　プロジェクトルートに .devcontainer フォルダを作成し、その配下に以下のファイルを作成して配置します。

Visual Studio Code .devcontainer/Dockerfile

FROM node:20

# Install basic development tools
RUN apt update && apt install -y less man-db sudo \
    default-jre graphviz curl \
    chromium fonts-noto-cjk fonts-noto-color-emoji \
    libnss3 libatk-bridge2.0-0 libxcomposite1 libxrandr2 libgbm1 libasound2
RUN curl \
    -fsSL https://github.com/plantuml/plantuml/releases/latest/download/plantuml.jar \
    -o /usr/local/bin/plantuml.jar

# Ensure default `node` user has access to `sudo`
ARG USERNAME=node
RUN echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
    && chmod 0440 /etc/sudoers.d/$USERNAME

# Set `DEVCONTAINER` environment variable to help with orientation
ENV DEVCONTAINER=true

Visual Studio Code .devcontainer/devcontainer.json

// See https://containers.dev/implementors/json_reference/ for configuration reference
{
	"name": "Markdown Preview Enhanced",
	"build": {
		"dockerfile": "Dockerfile"
	},
	"containerEnv": {
		"TZ": "Asia/Tokyo"
	},
	"customizations": {
		"vscode": {
			"extensions": [
				"shd101wyy.markdown-preview-enhanced"
			],
			"settings": {
				"markdown-preview-enhanced.plantumlJarPath": "/usr/local/bin/plantuml.jar",
				"markdown-preview-enhanced.chromePath": "/usr/bin/chromium",
				"markdown-preview-enhanced.puppeteerArgs": [
					"--no-sandbox",
					"--disable-setuid-sandbox",
					"--disable-gpu"
				],
				"files.eol": "\n"
			}
		}
	},
	"remoteUser": "node"
}

　プロジェクトルートのフォルダをVSCodeで開くと、「コンテナで再度開く」ボタンのハイライトされたポップアップが画面右下に表示されます。これをクリックすると、裏でなんやかんや動いて開発環境のできあがりですｗ

5.4 単一のコンテナ定義ファイル

　devcontainer.json を以下の記載にすると、Dockerfile は不要となります。

Visual Studio Code .devcontainer/devcontainer.json

// See https://containers.dev/implementors/json_reference/ for configuration reference
{
	"name": "Markdown Preview Enhanced",
-	"build": {
-		"dockerfile": "Dockerfile"
-	},
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:4-24-trixie",
+	"features": {
+		"ghcr.io/devcontainers/features/common-utils:2": {
+			"username": "node"
+		},
+		"ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
+			"packages": "default-jre,graphviz,chromium,fonts-noto-cjk,fonts-noto-color-emoji,libnss3,libatk-bridge2.0-0,libxcomposite1,libxrandr2,libgbm1,libasound2"
+		}
+	},
+	"postCreateCommand": "sudo curl -fsSL https://github.com/plantuml/plantuml/releases/latest/download/plantuml.jar -o /usr/local/bin/plantuml.jar",
	"containerEnv": {
		"TZ": "Asia/Tokyo"
	},
	"customizations": {
		"vscode": {
			"extensions": [
				"shd101wyy.markdown-preview-enhanced"
			],
			"settings": {
				"markdown-preview-enhanced.plantumlJarPath": "/usr/local/bin/plantuml.jar",
				"markdown-preview-enhanced.chromePath": "/usr/bin/chromium",
				"markdown-preview-enhanced.puppeteerArgs": [
					"--no-sandbox",
					"--disable-setuid-sandbox",
					"--disable-gpu"
				],
				"files.eol": "\n"
			}
		}
	},
	"remoteUser": "node"
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up