還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

在團隊協作過程中最常見的就是開會、開會最常用的就是圖,而圖中最常見的就是流程圖,時序圖,類圖等下面介紹一款畫圖神器:PlantUML

PlantUML是一個開源專案,支援快速繪製:

時序圖

用例圖

類圖

活動圖

元件圖

狀態圖

物件圖

部署圖

定時圖

附上地址: http://plantuml。com

線上畫圖

假如您和我一樣也是個急性子 :-)

嘗試 PlantUML 最簡單快捷的方法就是使用線上編輯服務。

http://www。plantuml。com/plantuml/uml

1。開啟線上編輯服務

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

線上編輯服務

2。輸入程式碼:

@startumlBob -> Alice : hello@enduml

3。點選submit即可

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

第一個UML圖

本地畫圖

安裝PlantUML

軟體要求: Java : 是執行PlantUML的必需條件 (如果想繪製 除 時序圖和活動圖以外的圖, 就需要安裝 Graphviz)

1。下載plantuml。jar

jar下載地址:http://sourceforge。net/projects/plantuml/files/plantuml。jar/download

2。雙擊 plantuml。jar 檔案(或者: java -jar plantuml。jar ), 啟動 plantUML介面。 可以點選“Change Directory”按鈕 來重新

指定工作

目錄。 保持介面處於開啟狀態,不要關閉。

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

uml介面

3。構建第一個本地UML圖

在工作目錄中建立一個demo。txt內容如下:

@startumlAlice -> Bob: test@enduml

4。開啟檔案所在目錄就可以看到生成的圖片:demo。png

注: 圖片的生成是實時的,可以邊改邊看哦!

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

看到這裡,你是不是覺得愛上畫圖了?

我想你是愛我的我猜你也捨不得但是怎麼說 總覺得我們之間留了太多空白格……

還沒有愛上?怎麼又是要開啟網址,又是下載jar, 這麼麻煩?

沒關係, 下面我們再來介紹一個IDEA外掛。

IntelliJ IDEA PLUGIN

1。開啟IDEA :

Settings -> Plugins -> Browse repositories -> 輸入:Plantuml integration -> Install

(注:重啟生效)

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

安裝plugin

2。右鍵-> New-> PlantUML FIle-> 輸入Name -> ok

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

建立uml1

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

建立uml2

3。開啟demo。puml

@startumlAlice -> Bob: Authentication RequestBob ——> Alice: Authentication ResponseAlice -> Bob: Another authentication RequestAlice <—— Bob: another authentication Response@enduml

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

這時候我們就可以看到,左邊為程式碼, 右邊為UML圖。

怎麼畫圖

看完上面的安裝使用,大家可能發現了,畫圖的方式是不是變了?

平時畫圖都是透過滑鼠,拖出各種圖

現在而是透過程式碼的形式在生成

對於同為程式設計師的我來說,寫程式碼跟畫圖來比,我還是更熱衷於透過程式碼來實現

時序圖的語法於功能

修改箭頭樣式

方式有以下幾種:

表示一條丟失的訊息:末尾加 x

讓箭頭只有上半部分或者下半部分:將<和>替換成\或者 /

細箭頭:將箭頭標記寫兩次 (如 >> 或 //)

虛線箭頭:用 —— 替代 -

箭頭末尾加圈:->o

雙向箭頭:<->

@startumlBob ->x AliceBob -> AliceBob ->> AliceBob -\ AliceBob \\- AliceBob //—— AliceBob ->o AliceBob o\\—— AliceBob <-> AliceBob <->o Alice@enduml

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

修改箭頭顏色

@startumlBob -[#red]> Alice : helloAlice -[#0000FF]->Bob : ok@enduml

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

宣告參與者

actor

boundary

control

entity

database

@startumlactor Foo1boundary Foo2control Foo3entity Foo4database Foo5collections Foo6Foo1 -> Foo2 : To boundaryFoo1 -> Foo3 : To controlFoo1 -> Foo4 : To entityFoo1 -> Foo5 : To databaseFoo1 -> Foo6 : To collections@enduml

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

分割示意圖

@startumlAlice -> Bob : message 1Alice -> Bob : message 2newpageAlice -> Bob : message 3Alice -> Bob : message 4newpage A title for the\nlast pageAlice -> Bob : message 5Alice -> Bob : message 6@enduml

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

組合訊息

@startumlAlice -> Bob: Authentication Requestalt successful case Bob -> Alice: Authentication Accepted else some kind of failure Bob -> Alice: Authentication Failure group My own label Alice -> Log : Log attack start loop 1000 times Alice -> Bob: DNS Attack end Alice -> Log : Log attack end end else Another type of failure Bob -> Alice: Please repeat end@enduml

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

給訊息添加註釋

@startumlAlice->Bob : hellonote left: this is a first noteBob->Alice : oknote right: this is another noteBob->Bob : I am thinkingnote left a note can also be defined on several linesend note@enduml

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!

更多的語法請參考官方……

透過程式碼來實現流程圖,有沒有覺得很爽呢?

更重要的,支援的平臺非常多

http://plantuml。com/zh/running

還在為畫流程圖煩惱,焦躁?介紹一款畫圖神器,讓你愛上畫圖!