Help us understand the problem. What is going on with this article?

Plantuml を VSCode で利用する

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

描画

sample.png

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-pdfMarkdown PDF 拡張機能をインストール
  2. ext install plantumlPlantUML 拡張機能をインストール
  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/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした