MarkdownのプレビューとPDF変換結果にローカル描画したPlantUMLの図を埋め込む(VSCode + Docker)

はじめに

Markdown内のPlantUMLの図をローカルサーバで描画して、プレビューやPDFエクスポート結果に埋め込む方法をまとめました。

※PlantUMLの単体ファイル(.pu)のプレビュー・エクスポート手順は既に記事にされている方がいましたので割愛します。

本記事では下記の形式のMarkdownをプレビュー・エクスポートします。

Markdown例

# Title

## Fig

```plantuml
@startuml
Bob->Alice: Hello
@enduml
```

エクスポート結果

環境

インストール手順は省略します。

• VSCode
• VSCode 拡張機能
  • Markdown Preview Enhanced
  • Markdown PDF
• Docker
• Docker Compose

ローカルPlantUMLサーバの起動

適当なディレクトリに下記の内容のdocker-compose.ymlファイルを作成します。

docker-compose.yml

version: '3'
services:
  plantuml-server:
    image: plantuml/plantuml-server
    container_name: plantuml-local-server
    ports:
      - "8080:8080"

docker-compose.ymlファイルを配置したディレクトリで下記のコマンドを実行します。

$ docker-compose up -d

参考: VSCode+DockerでPlantUMLの環境を構築する

VSCode設定

下記の拡張機能設定を追加します。

# Markdown Preview Enhanced
"markdown-preview-enhanced.plantumlServer": "http://localhost:8080/svg/"

# Markdown PDF
"markdown-pdf.plantumlOpenMarker": "```plantuml" 
"markdown-pdf.plantumlCloseMarker": "```"
"markdown-pdf.plantumlServer": "http://localhost:8080"

プレビュー・エクスポート手順

Markdownファイルを開いた状態でコマンドパレットから以下のコマンドを実行します。

# プレビュー
> Markdown: Markdown Preview Enhanced: Open Preview

# エクスポート
> Markdown PDF: Export (pdf)

まとめ

Markdown PDFのデフォルト設定だとコードブロック内のUMLを認識してくれないので困っていました。(コードブロックを外すと今度はプレビューが認識してくれない...)

Markdown PDFのUML開始・終了マーカー設定を変更することで、一般的な記法でプレビューとエクスポートを両立する方法の紹介でした。

参考