atomでplantUMLを使ってみる

シーケンス図やフローチャートは、ビジュアル的に言いたい事を表現できるので便利ですよね。 普段はvisioを使っていますが、きれいな図を描こうと思ったら体裁を整えるのにある程度時間をとられます。 これが退屈。なのにツッコミが入りやすいのが見栄え。 なので、ツール様にやってもらおうという作戦です。

材料

  • atom
    • plantuml-viewer
  • Graphviz
  • JavaJREのほうでいい。portableでパスを通すのでもいけそう)
  • 先達の知恵

plantuml-viewerの導入

だいたい分かるな? SettingsのCharsetは"utf-8"

Graphviz(の中のdot.exe)

  1. Graphviz Download

windows | Graphviz - Graph Visualization Software

  1. 環境に合ったzipを落としてきて解凍する これを書いたときは graphviz-2.38
    .../graphviz-2.38\release\bin\dot.exe

  2. plantuml-viewerの GraphvizDot Executableに上記パスを入力する。

以上で準備完了

動作確認

ここが役に立ちそう PlantUML Cheat Sheet - Qiita

plantuml-viewer ショートカット:Ctrl+Alt+p

atomは一度落とさないとだめかも


なんとなく動作確認的なことをしてみたものの、、、微妙

digraph G {
size ="4,4";
subgraph cluster0{
  start [shape=box]; /* this is a comment */
  start -> step1;
  edge [color=red]; // so is this


  node [shape=box,style=filled,color=".7 .3 1.0"];
  step1 -> step2;
}

  node [shape=default,style=outline,color=black];
  step2 -> step3 [style=bold,label="comment"];

subgraph cluster1{
  step3 [shape=diamond];
  step3 -> step4 [style=dotted];
  step4 [shape=ellipse];
  step4 -> end [style=dotted];
  end -> end[label="hoge"];
}

step1 -> make_string;
make_string [label="branch"];

}