VScodeのMarkdownファイル中にPlantUMLで図を描く環境を整える

2022年8月8日

環境

  • Mac OSX Monterey ver 12.0
  • Windows 10

前提条件

  • VSCodeをインストールしている

作業手順 (Mac OSX)

  1. brewで必要なパッケージをインストール
    brew install graphviz
    brew install adoptopenjdk --cask
    brew install plantuml
  2. VSCodeのExtensionをインストール
    1. MarkdownのPreview用のExtensionをインストール
      Markdown Preview Enhanced: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
    2. PlantUML用のExtensionをインストール
      PlantUML: https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml
  3. VSCodeでmarkdownファイル(拡張子 .md)を作成して記述後、Cmd+K、Vを押すとプレビューが表示される

作業手順 (Windows 10)

  1. Javaをインストール
    https://www.oracle.com/java/technologies/downloads/
  2. Graphvizをインストール
    https://www.graphviz.org/download/
    • インストール時に環境変数を設定する項目にチェック
  3. 環境変数の設定
    1. スタートボタン->「環境変数を編集」と入力
    2. 下記の二つの環境変数を追加
      • 変数:GRAPHVIZ_DOT 値:C:¥Program Files¥Graphviz¥bin
        • 値のパスはインストール状況によって変わる可能性あり
        • dot.exeが入っているフォルダを指定する
      • 変数:PLANTUML_LIMIT_SIZE 値:8192
  4. VSCodeのExtensionをインストール
    1. MarkdownのPreview用のExtensionをインストール
      Markdown Preview Enhanced: https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
    2. PlantUML用のExtensionをインストール
      PlantUML: https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml
  5. VSCodeでmarkdownファイル(拡張子 .md)を作成して記述後、Ctrl+K、Vを押すとプレビューが表示される

手順PlantUML,VSCode,Markdown

Posted by ttnt