PlantUML × Docker + MarkDownをVSCodeで

期待

• VSCodeで、PlantUML + MarkDownを使いたい
• PlantUML Serverには、ローカルへのパッケージのインストールを避け外部Docker Imageを使いたい

要点

• 外部Docker Imageを用いたローカルでのPlantUML Serverの稼働
  • docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
• Markdown Preview Enhancedの設定値
  • http://localhost:8080/svg/
• 用いるVSCodeエクステンションはMarkdown Preview Enhancedのみ

詳細

1. Dockerの起動
2. ターミナルにてdocker run -d -p 8080:8080 plantuml/plantuml-server:jettyを実行
3. VSCodeにて Markdown Preview Enhanced – Visual Studio Marketplace をインストール
4. VSCodeの設定からMarkdown-preview-enhanced: Plantuml Serverの値をhttp://localhost:8080/svg/に設定
   • エラーが出る際はVSCodeを再起動する
5. .mdファイルの編集画面右上のアイコンから、Markdown Preview EnhancedのPreview画面を表示

参考

• UMLの爆速プレビュー環境をVisual Studio Code + PlantUML Server on Dockerで簡単に構築する | DevelopersIO
• Docker + Visual Studio Code で PlantUML を使う – Qiita