腳本繪圖工具總結

我們總是要寫各種文檔，演示各種PPT，寫各種博客，其中都少不了需要作出一些圖形，用於形象的展示出想要表達的信息。Windows自帶的畫圖、Paint.Net，Visio、Rose等各種工具，只要有足夠的耐心，並且對這些工具足夠熟悉，都可以做出各種強大、各種類型的圖形。

但是我作為程序員，非常不擅長這種用鼠標操作的作圖工具，迫切需要一款用鍵盤敲出來的腳本繪圖工具，就像寫文檔時，不喜歡用Word而是用Markdown一樣。

經過了解，總算是找到了一些這樣的工具，下面分別介紹一下。

graphviz

Graphviz 是一個可以創建圖表的靈活應用程序，可以輕松實現腳本化。Graphviz主要使用Dot腳本語言來控制輸出的圖形，如下：

digraph G {
subgraph cluster0 {
node [style=filled,color=white];
style=filled;
color=lightgrey;
a0 -> a1 -> a2 -> a3;
label = "process #1";
}
subgraph cluster1 {
node [style=filled];
b0 -> b1 -> b2 -> b3;
label = "process #2";
color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
start [shape=Mdiamond];
end [shape=Msquare];
}

使用Graphviz執行此腳本，即可生成相應的圖片：

相關資料

官方網站；http://www.graphviz.org/

使用 Graphviz 生成自動化系統圖

PlantUML

PlantUML是一個開源項目，並支持快速繪制：

• 時序圖
• 用例圖
• 類圖
• 活動圖
• 組件圖
• 狀態圖
• Deployment diagram,
• 對象圖
• wireframe graphical interface

以簡單並帶指引性語言定義各種視圖。 ( see PlantUML Language Reference Guide ).

官方示例如下：

@startuml

(*) --> if "Some Test" then

  -->[true] "activity 1"
  
  if "" then
    -> "activity 3" as a3
  else
    if "Other test" then
      -left-> "activity 5"
    else
      --> "activity 6"
    endif
  endif
  
else

  ->[false] "activity 2"
  
endif

a3 --> if "last test" then
  --> "activity 7"
else
  -> "activity 8"
endif

@enduml

生成的圖片：

相關資料

官方網站：http://zh.plantuml.com/

UMLGraph

UMLGraph與PlantUML功能類似，支持類圖、時序圖、流程圖等，功能上兩個工具各有千秋，各位可自行發掘。

下面是官方示例：

# UML Distilled: Figure 5-2 p. 70

.PS

copy "sequence.pic";

boxwid = 1.3;

# Define the objects
pobject(X);
pobject(T);
pobject(C);
pobject(A1);
pobject(A2);

# Message sequences
cmessage(X,T,"a: Transaction");
active(T);
async();
cmessage(T,C,"a: TransCoord");
inactive(T);
active(C);
cmessage(C,A1,"a1: TransCheck");
active(A1);
cmessage(C,A2,"a2: TransCheck");
active(A2);
message(A1,C,"ok");
        sync();
        step();
        active(C);
        message(C,C,"all done?");
        inactive(C);
        async();
        step();
delete(A1);
inactive(C);
step();
message(A2,C,"ok");
active(C);
        sync();
        step();
        active(C);
        message(C,C,"all done?");
        inactive(C);
        async();
        step();
delete(A2);
message(C,T,"beValid");
inactive(C);
active(T);
step();

complete(T);
complete(C);

.PE

生成的圖片：

相關資料

官方網站：http://www.umlgraph.org/

Mscgen

Mscgen工具主要用於處理和生成時序圖，它實際是基於Graphviz的，將自己的腳本翻譯成Graphviz的Dot腳本，然后使用Graphviz處理腳本，生成圖片。雖然直接用Graphviz也可以寫出同樣的時序圖腳本，但是相對於Mscgen來說，Graphviz要復雜的多。

下面是官方的示例：

# MSC for some fictional process
msc {
  hscale = "2";

  a,b,c;

  a->b [ label = "ab()" ] ;
  b->c [ label = "bc(TRUE)"];
  c=>c [ label = "process(1)" ];
  c=>c [ label = "process(2)" ];
  ...;
  c=>c [ label = "process(n)" ];
  c=>c [ label = "process(END)" ];
  a<<=c [ label = "callback()"];
  ---  [ label = "If more to run", ID="*" ];
  a->a [ label = "next()"];
  a->c [ label = "ac1()\nac2()"];
  b<-c [ label = "cb(TRUE)"];
  b->b [ label = "stalled(...)"];
  a<-b [ label = "ab() = FALSE"];
}

生成后的圖片：

Mscgen工具要有另外一個功能，可以將腳本嵌入到Doxygen的注釋里面，用Doxygen生成后的文檔里面就會包含相應的時序圖。

注釋如下：

/** Sender class. Can be used to send a command to the server.
 *  The receiver will acknowledge the command by calling Ack().
 *  \msc
 *    Sender,Receiver;
 *    Sender->Receiver [label="Command()", URL="\ref Receiver::Command()"];
 *    Sender<-Receiver [label="Ack()", URL="\ref Ack()", ID="1"];
 *  \endmsc
 */
class Sender
{
  public:
    /** Acknowledgment from server */
    void Ack(bool ok);
};
/** Receiver class. Can be used to receive and execute commands.
 *  After execution of a command, the receiver will send an acknowledgment
 *  \msc
 *    Receiver,Sender;
 *    Receiver<-Sender [label="Command()", URL="\ref Command()"];
 *    Receiver->Sender [label="Ack()", URL="\ref Sender::Ack()", ID="1"];
 *  \endmsc
 */
class Receiver
{
  public:
    /** Executable a command on the server */
    void Command(int commandId);
};

相關資料

官方網站：http://www.mcternan.me.uk/mscgen/

Doxygen——msc

Msc-generator

Msc-generator是與Mscgen比較類似的工具，主要用於繪制時序圖。Msc-generator從4.0版本開始，也支持Doxygen的調用了。

官方示例：

相關資料

官方網站：https://sites.google.com/site/mscgen2393/home

下載：http://sourceforge.net/projects/msc-generator/

Changing Message Sequence Chart (MSC) Tool for Doxygen

yUML

yUML是一款Web上的UML工具，同樣，也是輸入一些腳本，然后自動生成相應圖形。

官方示例：

// Cool Class Diagram
[Customer|-forname:string;surname:string|doShiz()]<>-orders*>[Order]
[Order]++-0..*>[LineItem]
[Order]-[note:Aggregate root{bg:wheat}]

生成的圖片：

yUML還支持外鏈的方式，下面是外鏈方式的示例：

<img src="http://yuml.me/diagram/scruffy/class/[note: You can stick notes on diagrams too!{bg:cornsilk}],[Customer]<>1-orders 0..*>[Order], [Order]++*-*>[LineItem], [Order]-1>[DeliveryMethod], [Order]*-*>[Product], [Category]<->[Product], [DeliveryMethod]^[National], [DeliveryMethod]^[International]" >

 

相關資料

官方網站：http://yuml.me/

官方示例：http://yuml.me/diagram/scruffy/class/samples

flowchart.js

Web發展的這么迅速，js的圖形、圖表庫數不勝數，那么也一定會有腳本轉換圖形的庫。flowchart.js就是其中一個還不錯的js庫，它直接生成SVG圖形。

官方示例：

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

生成的SVG截圖：

相關資料

官方網站：http://adrai.github.io/flowchart.js/

源碼：https://github.com/adrai/flowchart.js

其他工具

類似的工具還有很多，就不詳細的一一展示了，只做一下簡單介紹：

• Sequence Chart Studio：本地工具，主要用於繪制時序圖
• Quick Sequence Diagram Editor：本地工具，主要用於繪制時序圖
• ckwnc：Web工具，主要用於繪制時序圖
• JUMLY：JS庫，主要用於繪制時序圖，輸出格式為SVG
• js-sequence-diagrams：JS庫，主要用於繪制時序圖，輸出格式為SVG
• mermaid：JS庫，可用於繪制時序圖、流程圖、甘特圖等，功能比較強大，輸出格式為SVG
• PlantUML網站總結的相關工具

總結

現在真是一個百花齊放，百家爭鳴的時代，各種工具層出不窮，用腳本生成時序圖、流程圖的工具都有這么多。

雖然文中列舉了這么的工具，但是我也只用過其中的一兩個，大部分只是看了官網的介紹以及實例，並沒有實際操作，如果有不對的地方，還望指正。

各位，放下鼠標，讓你們的雙手在鍵盤上舞動起來吧！