SublimeText3からPlantUMLを使う

はじめに

SublimeText3でもPlantUMLをプレビューできるぞ！をお知らせいたします

但し書き

• SublimeText3で生成済イメージのLivePreviewをする方法がわかりません

想定環境

• OS
  • OSX 10.11.6
• brew
  • 0.9.9
• java
  • 1.8.0_25
• SublimeText3
  • Sublime Text Build 3114

install

brew

• graphvizはplantumlが依存している
• plantuml自体は後述のpluginが同梱している
  • （2016-08-04現在）Sublime Text 3/Packages/sublime_diagram_plugin/diagram/plantuml-8024.jar

$ brew install graphviz --with-librsvg --with-freetype

SublimeText3

package install

1. コマンドパレットからAdd Repositoryで下記を追加
   • https://github.com/hardillb/sublime_diagram_plugin
2. コマンドパレットからInstall Packageで下記をinstall
   • sublime_diagram_plugin

package settings

Diagram.sublime-settings

{
    "viewer" : "Sublime3Viewer",
    "check_on_startup": true,
    "charset": "UTF-8"
}

動作確認

1. 何か書いてhoge.wsdで保存すると、syntaxがDiagramに変化
2. ⌘m
3. plantumlがイメージを生成し、SublimeText3のタブの中でイメージが表示される

hoge.wsdとして保存しても、hoge-d0p19_.pngなどの様に毎回ランダムのsuffixが付くので、live previewは出来ない模様。

tips

• SublimeText3で、Origamiなどでright paneを作っておき、カーソルなどでアクティブにしておけば、そちらのpaneへ生成された画像はタブとして現れる。
• 複数のcode blockを書くと、個別の画像として生成される。SublimeText3のタブは個別タブとなる。

sample uml code

プラグインが紹介されているページに出ているようなイメージを吐き出す構文を出すには下記を選択する。

1. SublimeText3のPreferences
2. Package Settings
3. Diagram
4. EXAMPLE

see also

• sublime-text-uml-tool