Plantuml を VSCode で利用する

5518 ワード
VSCode plantuml plantuml テキストリンク

PlantUML

公式サイト

以下の様なコードをパースしてUMLを描画できる。

サンプルコード

sample.puml
@startuml sample

skinparam shadowing false
autonumber

participant "い" as a
participant "ろ" as b
participant "は" as c
participant "に" as d

a -> b : 同期
activate a
    activate b
        b-->c : 非同期
        activate c
            b->b : **太字**
            activate b
                loop ループ
                    c->c: __下線__
                end

                ref over c: リファレンス\n（更に詳しい情報は XXX を参照等）

                alt IF 分岐
                    c->c: 処理
                    else 別の条件
                    c->c: 処理
                end

                c-->b : 非同期処理の\n完了
            deactivate b
        deactivate c
    b->a : 処理完了
    deactivate b
    create d
    a->d : 作成
a->a: 完了処理
deactivate a

note over a: Note A
note left b: Note B
note right c: Note C

@enduml

描画

VSCode で拡張子 puml でUMLを書けるようにする

1. 拡張機能をインストールする

  1. VSCode を 開き クイックオープン を開く (windowsでは Ctrl + p )
  2. ext install plantuml と入力して Enter
  3. 左のペインに拡張機能の一覧が表示されるので PlantUML をインストールする

2. Graphviz をインストールする

PlantUMLの拡張機能を利用するため Graphviz をインストールする

Graphviz - Graph Visualization Software

  1. windows の場合は Windows > Stable 2.38 windows install packages に進む
  2. graphviz-2.38.msi をダウンロードして実行
  3. 環境変数に Graphviz のPATH を指定する
C:\Program Files (x86)\Graphviz2.38\bin

VSCode の Markdown で記述できるようにする

VSCode の通常の Markdown のプレビューでは PlantUML が展開されないため拡張機能をインストールする

  1. VSCode を 開き クイックオープン を開く (windowsでは Ctrl + p )
  2. ext install markdown-preview-enhanced と入力して Enter
  3. 左のペインに拡張機能の一覧が表示されるので Markdown Preview Enhanced をインストールする
    (現在2種類あるようだ、 製作者は Yiyi Wang のものを選択する)

TIPS

  • Pandoc をインストールしていれば Docx に書き出し → GoogleDoc で共有もできる（GitHubでやればもっと簡単だけどね…）
  • markdownを記述してプレビューするときは Ctrl + k の後 v を押下する
  • 外部の puml ファイルを @import キーワードで Markdown の文中に読み込む事ができる
test.md
* こんな感じで↓

＠import "puml/seq.puml"

* 文章がスッキリする。
* ＠は半角で書くこと。

Markdown All in One を利用している場合の注意点

Markdown Preview Enhanced のプレビューのショートカットを上書きしてしまうのでショートカットキーの編集を行う

  1. ctrl + shift + p でコマンドパレットを開く
  2. shortcut と入力し 基本設定: キーボードショートカットを開く を選択する
  3. markdown.extension.togglePreviewToSide を右クリックしキーバインドを削除

PDF書き出ししたい場合

Markdown Preview Enhanced でのPDF書き出しはめんどいので別の拡張機能をインストールする

  1. ext install markdown-pdf で Markdown PDF 拡張機能をインストール
  2. ext install plantuml で PlantUML 拡張機能をインストール
  3. （現在のところ）デフォルトだとエラーが出るので公式サーバーから plantuml.jar をDLする
  4. > setting で基本設定を開く
  5. plantuml.jar の値にDLしてきた plantuml.jar を設定する

注意点

  • @import は使えないのでPDF書き出しする時は puml ファイルを SVG 書き出しして貼り付ける
    • こんな感じにする → ![サンプル](out/sample/sample.svg)
  • Markdownと一緒に書いて後で切り分けてもよい
    • 設定で plantuml.server に公式の https://www.plantuml.com/plantuml を設定すればデフォルトのMarkdownプレビューでも描画できる
    • 公式とはいえ外部サーバーなので注意が必要
    • Docker使ってローカルでサーバー建てることもできる
    • See. https://hub.docker.com/r/plantuml/plantuml-server/