はじめに

楽に、スクリプトのフロー図（アクティビティ図）をかける方法がないかなと思い、PlantUMLを試してみました。
ExcelとかVisioなどのOffice系ソフトや、Drow.ioやCacooなどのオンラインアプリも試しましたが、結局体裁を自分で整えなければ行けないのでしっくりこず。
PlantUMLなら、テキストでフローを書けば、自動で図に変換してくれるので体裁を整えるという動作が不要になり、今のところ一番しっくり来ています。

インストール

JAVA

PlantUMLを使うには、JAVAが必要です。以下からダウンロードし、インストールしておきましょう。

https://java.com/ja/download/

Graphviz(dot)

PlantUMLだけでは、シーケンス図しかかけないそうです。以下のリンクから、Graphviz(dot)をダウンロードし、インストールしておきましょう。

http://www.graphviz.org/

Atomパッケージ

以下、2つのパッケージをインストールします。

plantuml-viewer
language-plantuml

Atomで[Ctrl+,]を押下、[Install]から検索Boxに上記パッケージ名を入れてインストールしましょう。

apmで入れる場合は、以下の通り。（※インストール後、Atom再起動が必要でした。）

apm install plantuml-viewer
apm install language-plantuml

インストール後、plantuml-viewerの設定画面で、CharsetにUTF-8を入力します。
また、Graphviz Dot Executableに、dot.exeのフルパスを入力します。（例：C:\Program Files (x86)\Graphviz2.38\bin\dot.exe）

フロー図作成

@startumlと@endumlで囲った中に、情報を記載していきます。

チートシートは、こちらが参考になります。

http://qiita.com/ogomr/items/0b5c4de7f38fd1482a48

実際に書いてみるとこんな感じ。

@startuml

(*) -down-> "Status Check"
if "Status?" then
  ->[NG] "exit"
else
  -down->[OK] "echo 'Status OK!'"
endif
"echo 'Status OK!'" -down-> (*)

@enduml

f:id:naoto408:20161211172424p:plain

ちなみに、Viewウィンドウの中はドラッグしたり、マウスホイールでぐりぐりしてやると動かせます。

まとめ

これで、体裁を考えなくて良くなりました。日々の業務って、意外とこういう体裁を整えるところに時間取られてしまいますよね。

参考

http://qiita.com/nakahashi/items/3d88655f055ca6a2617c http://qiita.com/ogomr/items/0b5c4de7f38fd1482a48 http://plantuml.com/activity-diagram-legacy

おれさまラボ

実際に手を動かして理解を深めるブログ。

PlantUMLでフロー図を書いてみる