VSCode + PlantUML

1.plantuml-with-vscode.md

VSCode（Remote-Container）とPlantUMLでシーケンス図を描く

Remote-Containerをつかってササっとシーケンス図を描いてみましょう。

使い方（簡易版）

1. VSCodeに拡張 Remote Development - Visual Studio Marketplace をインストール
2. ~/plantuml など適当なディレクトリに .devcontainer ディレクトリを作成
3. .devcontainer/devcontainer.json, .devcontainer/compose.yaml を作成
4. VSCode上でコマンド Remote-Containers: Open Folder in Container... を入力
   • Fn1 または Ctrl+Shift+P でコマンドパレットを表示
   • 上記コマンドを入力
5. .devcontainer ディレクトリがあるディレクトリ（この例では ~/plantuml ）を開く
6. Remote-Containerが立ち上がったら適当なファイルを作成する
7. ファイルを開いた状態で Alt+D またはコマンド PlantUML: Preview Current Diagram を実行する

記法については plantuml.com や女子中学生チケット詐欺事件 ¹² を参考にしてください。

Footnotes

1. shunirr/criminal_jc.md ↩

2. kawabata/criminal_jc.md ↩

compose.yaml

services:
  app:
    image: mcr.microsoft.com/vscode/devcontainers/base:alpine
    volumes:
    - type: bind
      source: ../src
      target: /workspaces
    tty: true
    stdin_open: true
  server:
    image: plantuml/plantuml-server

devcontainer.json

{
  "name": "plantuml",
  "dockerComposeFile": [
    "./compose.yaml"
  ],
  "service": "app",
  "workspaceFolder": "/workspaces",

  "remoteUser": "vscode",

  "extensions": [
    "jebbs.plantuml"
  ],
  "settings": {
    "plantuml.render": "PlantUMLServer",
    "plantuml.server": "http://server:8080"
  }
}