10
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Visual Studio Codeでプレビューを見ながらPlantUMLを書ける環境をDockerで作る

Posted at

Visual Studio Codeでプレビューを見ながらPlantUMLを書ける環境をDockerで作る

はじめに

PlantUMLを使える環境を構築しようとするとJavaやGraphviz softwareのインストールが必要でちょっと手間です。
Docker HubでPlantUML Serverの公式イメージを使うとPlantUMLを描画する環境をわりと楽に構築できたので紹介します。また、Visual Studio Codeとその拡張機能を組み合わせるとplantUMLを書きやすい環境ができたので合わせて紹介します。

構築後のイメージ

plantuml_preview_sample.gif

試した環境

mac OS 10.14.3
Visual Studio Code 1.33.1
Docker 18.09.2

インストールするもの

それぞれのインストール手順は省略します。

構築手順

PlantUML Server を起動する

docker run -d -p 8080:8080 plantuml/plantuml-server:jetty

ここはこれだけです。
ブラウザで http:localhost:8080 を開いてください。この画面がでれば期待通り動いていることになります。

plantumlserver.png

Visual Studio CodeのPlantUMLの設定

PlantUMLのレンダリングはPlantUML Serverでやるように設定します。

設定画面を開いて以下の設定をします。(windowsなら"ctrl + ,", macなら"⌘ + ,"で開きます)
plantumlと検索キーワードを入れると設定項目が表示されます。

plantuml_setting.png

以上で構築は完了です。

使い方

試しにtest.pumlというファイルを作成してください。
ファイルには以下の内容を入力してください。

@startuml test
@enduml

ファイルを開いた状態で、Visual Studio Codeのコマンドパレット(windowsなら"ctrl + shift + p", macなら"⌘ + shift + p")を開き、
PlantUMLと打ってみてください。
"PlantUML: カーソル位置のダイアグラムをプレビュー"というのが一覧にでるので選択してください。
プレビュー画面がでます。

plantuml_preview.png

テキストを更新するとそれに合わせて、プレビューの内容も更新されます。

plantuml_preview_sample.gif

PlantUMLの文法かなにかあやまりがあったりエラーがあったときは、
赤いマークが出ます。カーソルをマークに合わせると何でエラーになっているのかがわかります。

plantuml_error.png

以上です。
dockerのおかげでツールのインストールが楽でいいなと思いました。(小並感)

10
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?