大家畫時(shí)序圖都在使用什么工具？ 上圖中的這個(gè)圖片，有沒(méi)有感覺(jué)很復(fù)雜？如果讓您用Visio畫圖需要畫多長(zhǎng)時(shí)間？ 本文共享一個(gè)VScode中可以產(chǎn)生各種圖片的小插件“PlantUML”。 01

先說(shuō) VScode

相信做軟件設(shè)計(jì)的同學(xué)，對(duì)VScode并不陌生，VScode的全稱是：VisualStudioCode，是微軟推出的跨平臺(tái)編輯器。它采用經(jīng)典的VS的UI布局，功能強(qiáng)大，擴(kuò)展性很強(qiáng)。支持安裝各種功能性的插件。

軟件支持語(yǔ)法高亮、代碼自動(dòng)補(bǔ)全（又稱IntelliSense）、代碼重構(gòu)功能，并且內(nèi)置了命令行工具和Git版本控制系統(tǒng)。

VScode的下載路徑如下：https://code.visualstudio.com/Downloa。

安裝后的界面圖如下：

02

介紹plantuml

PlantUML 是一個(gè)開(kāi)源工具，能讓你通過(guò)純文本的方式來(lái)生成 UML 圖（Unified Model Language 統(tǒng)一建模語(yǔ)言）。這與大家較為熟悉的 Markdown 非常類似。

通過(guò) PlantUML，你可以通過(guò)同一套 Scheme 但是不同的語(yǔ)法來(lái)描述和生成不同類型的圖。除了UML圖外，PlantUML也支持思維導(dǎo)圖、甘特圖等。我們本篇文章介紹使用PlantUML產(chǎn)生時(shí)序圖。

03

使用VScode+PlantUML產(chǎn)生簡(jiǎn)單的時(shí)序圖

在Vscode中安裝PlantUML插件如下圖：

新建txt文件后，輸入如下內(nèi)容：

@startuml
Title玩轉(zhuǎn)單片機(jī)與嵌入式
clock   "CLK"   as C0 with period 1


binary  "INTPUT"  as B
binary"RESET"asC
@0
B is high
Cishigh
@1
Cislow
@2.5
Cishigh
@4
Bislow
@6
Bishigh
@8
Bislow
@8
Bishigh
@8
Bislow
@8
C is low


@enduml

使用vscode打開(kāi)新建的txt文件，選擇【ctrl+shift+P】快捷鍵，選擇【預(yù)覽光標(biāo)位置圖表】

就可以預(yù)覽到上面代碼產(chǎn)生的時(shí)序圖。

右側(cè)的圖片也可以進(jìn)行保存，或者直接使用vscode的快捷鍵導(dǎo)出圖表。

是不是很神奇？

下面是主圖頁(yè)面中時(shí)序圖的腳本文件：

@startuml


Title 教你在VScode中用腳本語(yǔ)言畫時(shí)序圖。
concise "Client" as Client
concise "Server" as Server
concise "Response freshness" as Cache


Server is idle
Client is idle


@Client
0 is send
Client -> Server@+25 : GET
+25 is await
+75 is recv
+25 is idle
+25 is send
Client -> Server@+25 : GET
If-Modified-Since: 150
+25 is await
+50 is recv
+25 is idle
@100 <-> @275 : no need to re-request from server


@Server
25 is recv
+25 is work
+25 is send
Server -> Client@+25 : 200 OK
Expires: 275
+25 is idle
+75 is recv
+25 is send
Server -> Client@+25 : 304 Not Modified
+25 is idle


@Cache
75 is fresh
+200 is stale
@enduml

圖片如下

PlantUML使畫圖變得如此簡(jiǎn)單。

審核編輯：劉清