PlantUMLを使ってみる。

ちょっとプログラムを確認するのに、ちゃんと状態遷移図でフラグが適切かどうかをもう一度見直したい、と思ったので状態遷移図(state transition diagramあるいはstate diagram)を書くのにいいツールはないかな、と思ったのがきっかけで。

以前に Java を使ってた頃は Eclipse に UML プラグインがいくつかあったのでそれを使ったり、JUDE というツールがフリーで使えてたりしたのですが、最近は Java を使っていないから Eclipse もインストールしていないし、JUDE は aster*UML というツールになって有償だし、と思っていたら PlantUML というのがあるのを見つけました。

PlantUML は、独自の言語で図を記述して描画させる、という使い方なので GUI ベースではありません。ある意味 TeX や Gnu plot 的なものと考えればいいかと思います。で、これをごきげんな感じで使う方法は、というと、Visual Studio Code + PlantUML というページがいくつも見つかりました。ほむほむ。

じゃあちょっとやってみましょうか、GraphViz もすでにインストールしてあるし、ということでインストールしてみます。
いきなりですが、VS Code を起動して拡張機能を検索したら、ズバリのものが出てきました。星も5つだし、さっそくポチります。

で、こちらにインストールに関する注意事項やらインストール方法などが記載されています。もちろん VS Code のプラグインのところにもありますが、こちらのほうが参照しやすいので。

今回は VS Code をすでに開いているので、インストールボタンでインストールします。

次に設定を開きます。
ある程度の雛形がすでに設定されているので、一旦はこのまま先に進みます。一応、出力形式はあとで利用しやすいようにSVGあたりで指定しておくとよいかもしれません。

PlantUML の描画速度ですが、こんな事が書いてあります。
Get 15X times faster export by utilizing PlantUML Server as render. How to?
どうやら PlantUML サーバを使うと15倍も速くなるのだそうです。PlantUML-serverは、Java の WEB サーバを立ててそこで動かしちゃおうということのようですが、本格的にバンバン使うならともかく、ちょっと使うだけなら Local render という方法を使うのがよさそうです。
必要なのは Java と GraphViz。これらはどちらもインストールしてあります。また、どちらも PATH が通っていることが必要です。
ちなみにうちの環境では、PATH の設定がわかりやすいように、以下のようにしています。
こうしておくと、わりと一目瞭然にわかるので楽ちんです。ここでは GraphViz は GVPATH に C:\Program Files (x86)\Graphviz2.38\bin が設定されています。

コマンドプロンプトを立ち上げて、java と dot が起動できることを確認してから先に進みます。
PlantUML のインストールは不要なのかというと、不要です。
Plugin has integrated a copy of "plantuml.jar", you are good to go now. But if you want to use your own jar (maybe a newer version, or with many dependent jars), specify the jar location with setting plantuml.jar.
とあって、プラグイン自体に組み込まれているそうです。

では、ということで早速デモと同じコードを入れてみます。ファイル名は "test.wsd" とします。拡張子は、.wsd、.pu、.puml、.plantuml、.iuml などがあるようですが、例題には .wsd があるのでたぶんそれがデフォルトなのでしょう。ファイル名を指定して保存すると、すぐさま PlantUML プラグインがロードされます。
@startuml test
scale 2
left to right direction
skinparam PackageStyle rect
actor customer
actor "another customer" as au
actor clerk
rectangle checkout {
    customer -- (checkout)
    au -- (checkout)
    (checkout).> (payment): include
    (help).> (checkout): extend
    (checkout)-- clerk
}
@enduml
入力が終わったら ALT+D を押すと、プレビューウィンドウが開きます。
なんとまあ簡単にできてしまいました。

状態遷移図も以下のようにできました。

1つのファイル中に複数のダイアグラムをまとめることもできます。その場合には、プレビューウィンドウには「現在カーソルがある部分のダイアグラム」が表示されます。これはちょっとおもしろいです。
また、デモにもあるように記述を変更するとすぐさまプレビューに反映されます。
その他、補完機能やスニペットなども豊富なので、結構簡単に使えそうです。

0 件のコメント:

コメントを投稿

Windowsでシンボリックリンクを試してみる。

きっかけは、1つのファイルを別の名前で起動したら違う動きになるようなスクリプトを書く、でした。  busybox なんかでは、同じ実行形式ファイルの名前を、lsにすればlsと同じ、cpとすればcpと同じ動作をするようにしてますが、Pythonスクリプトでそれと同じように argv...