石頭智能洗地機(jī)A10 Plus體驗(yàn)：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請(qǐng)假懶人而生的石頭科技在近日又帶來(lái)了自己的全新旗艦新品，石頭智能洗地機(jī)A10 Plus。從這個(gè)產(chǎn)品名上就不難看出，這次石頭推出的并不是常見(jiàn)的掃地機(jī)器
大家好，我是老三，最近在做系統(tǒng)設(shè)計(jì)的時(shí)候，發(fā)現(xiàn)要畫(huà)不少時(shí)序圖，以前我用的最順手的工具是draw.io，后來(lái)也嘗試了語(yǔ)雀自帶的畫(huà)圖工具，感覺(jué)畫(huà)畫(huà)簡(jiǎn)單的圖還行，但是復(fù)雜一點(diǎn)的，就比較吃力了。
圖片
哎，這條線怎么又歪了？布局怎么又亂了？這個(gè)條怎么又對(duì)不齊了？……手忙腳亂才畫(huà)好一張圖，這時(shí)候我就想，有沒(méi)有其它更專業(yè)的畫(huà)圖工具呢？大部分同事都在用Visio，輝哥給我推薦了PlantUML，說(shuō)非常好用！這時(shí)候旁邊來(lái)了一句—— “他就是裝比！”
還有這樣的事？那我不能讓他一個(gè)人都裝了。
最開(kāi)始看下官方文檔，發(fā)現(xiàn)PlantUML類似MarkDown，似乎需要一點(diǎn)學(xué)習(xí)成本，簡(jiǎn)單用了一下，曲線還是挺平緩的，上手相當(dāng)快！推薦大家也用一下試試。
PlantUML是一個(gè)多功能組件，可快速、直接地創(chuàng)建圖表。用戶可以使用簡(jiǎn)單直觀的語(yǔ)言起草各種圖表。
PlantUML是一個(gè)開(kāi)源工具，它允許我們用簡(jiǎn)單的文本描述來(lái)創(chuàng)建UML圖，包括序列圖、用例圖、類圖、對(duì)象圖、活動(dòng)圖、組件圖、部署圖、狀態(tài)圖，以及我們今天要講的時(shí)序圖。
圖片
除了UML圖之外，PlantUML 還支持一系列其他圖表，例如JSON數(shù)據(jù)、YAML數(shù)據(jù)、EBNF圖表、架構(gòu)圖等等。PlantUML的一大優(yōu)勢(shì)，是圖表完全用文本代碼描述，這就意味著它可以作為文檔嵌入到源代碼中，也非常方便版本控制和多人協(xié)作，不管是迭代設(shè)計(jì)、文檔編寫(xiě)、系統(tǒng)建模，PlantUML都能勝任。
為了便捷地使用PlantUML，許多流行的IDE和代碼編輯器提供了集成PlantUML的插件，如Visual Studio Code、IntelliJ IDEA、Eclipse等。插件提供了實(shí)時(shí)預(yù)覽、語(yǔ)法高亮和圖表導(dǎo)出等功能，能幫助我們更快捷，更高效地畫(huà)圖，整體上IDEA的插件用起來(lái)體驗(yàn)最好，但是IDEA大家懂的，太占內(nèi)存了，VS Code相對(duì)而言，用起來(lái)就會(huì)輕量很多。
圖片
插件使用效果
圖片
插件市場(chǎng)：
圖片
圖片
我們先來(lái)看個(gè)最簡(jiǎn)單的例子，通過(guò)-> 、-->和 :就可以在參與者之間傳遞消息，不用明確聲明參與者。
@startuml老張 -> 老王 : 老王，你好啊老王--> 老張: 老張，你好啊老張 -> 老王: 最近有空一起喝茶老張 <-- 老王: OK@enduml
圖片
接下來(lái)，我們看看PlantUML時(shí)序圖的一些具體語(yǔ)法。
我們使用關(guān)鍵字participant 來(lái)聲明參與者，就可以對(duì)該參與者進(jìn)行更多的控制。聲明的順序就是默認(rèn)的顯示順序。我們也可以用這些關(guān)鍵字來(lái)聲明參與者，給參與者設(shè)置不同的形狀。
我們還可以通過(guò) as關(guān)鍵字重命名參與者。
@startumlparticipant Participant as Fooactor Actor as Foo1boundary Boundary as Foo2control Control as Foo3entity Entity as Foo4database Database as Foo5collections Collections as Foo6queue Queue as Foo7@enduml
參與者
默認(rèn)的顏色比較單調(diào)，也可以通過(guò)#來(lái)設(shè)置參與者的顏色：
@startumlactor Bob #blue' The only difference between actor'and participant is the drawingparticipant Alice #SkyBlueparticipant "I have a really/nlong name" as L #00ff00Alice->Bob: Authentication RequestBob->Alice: Authentication ResponseBob->L: Log transaction@enduml
上顏色的參與者
在不同參與者之間，通過(guò)箭頭+:來(lái)表示消息傳遞。
A -> B: 同步消息文本
同步消息
A ->> B: 異步消息文本
異步消息
A <-- B: 返回消息文本
返回消息
A ->A: 自調(diào)用在時(shí)序圖中，生命線表示對(duì)象在一段時(shí)間內(nèi)的活動(dòng)狀態(tài)，也就是從參與者往下延伸的那條虛線。激活條用來(lái)表示參與者或?qū)ο笤谔幚砟硞€(gè)任務(wù)期間的活動(dòng)狀態(tài)，是生命線的一部分，矩形條形式出現(xiàn)。
activate: 顯示參與者的活動(dòng)狀態(tài)開(kāi)始
deactivate: 指示參與者的活動(dòng)狀態(tài)結(jié)束。
destroy: 用于表示參與者的生命線終結(jié)，通常表示對(duì)象生命周期的結(jié)束。
@startumlparticipant UserUser -> A: DoWorkactivate AA -> B: << createRequest >>activate BB -> C: DoWorkactivate CC --> B: WorkDonedestroy CB --> A: RequestCreateddeactivate BA -> User: Donedeactivate A@enduml
生命線的激活與撤銷
@startumlparticipant UserUser -> A: DoWorkactivate A #FFBBBBA -> A: Internal callactivate A #DarkSalmonA -> B: << createRequest >>activate BB --> A: RequestCreateddeactivate Bdeactivate AA -> User: Donedeactivate A@enduml
生命線的嵌套與顏色
A->B++: 激活B并發(fā)送消息
自動(dòng)激活
A->B++: 激活B并發(fā)送消息A <--B--: B去激活并回應(yīng)消息
自動(dòng)去激活
group 分組名A -> B: 消息...end group
分組
alt 條件1A -> B: 滿足條件1的消息else 條件2A -> B: 滿足條件2的消息end
替代
注釋用于添加說(shuō)明性文本。
@startumlparticipant Aliceparticipant Bobnote left of Alice #aquaThis is displayedleft of Alice.end notenote right of Alice: This is displayed right of Alice.note over Alice: This is displayed over Alice.note over Alice, Bob #FFAAAA: This is displayed/n over Bob and Alice.note over Bob, AliceThis is yet anotherexample ofa long note.end note@enduml
注釋
Choosing colors在 PlantUML 中，我們可以對(duì)時(shí)序圖的各個(gè)元素自定義顏色，比如參與者（actors）、對(duì)象（objects）、激活條（activation bars)等，來(lái)讓我們的時(shí)序圖更加美觀。在聲明元素時(shí)，可以直接指定顏色，格式為#顏色代碼。顏色代碼可以是不同的形式：
@startumlactor 用戶 #Greenparticipant 參與者 #B4A7E5用戶-[#red]>參與者:消息activate 參與者 #Blue@enduml
直接指定顏色
@startumlskinparam ActorBorderColor #DarkOrangeskinparam ParticipantBackgroundColor #SkyBlueactor 用戶participant 參與者@enduml
使用 skinparam 設(shè)置顏色
當(dāng)使用 skinparam 時(shí)，我們可以設(shè)置許多不同屬性的顏色，如邊框顏色（BorderColor）、背景顏色（BackgroundColor）、字體顏色（FontColor）和激活條顏色（SequenceGroupBodyBackgroundColor）。更多語(yǔ)法可以直接查看官方文檔：順序圖的語(yǔ)法和功能，目前這些內(nèi)容，已經(jīng)足夠我們常見(jiàn)的時(shí)序圖需求了。
我們接下來(lái)看一個(gè)稍微完整一點(diǎn)的例子，在這個(gè)例子中，我們的需求，是要在原本的登錄的基礎(chǔ)上，引入Google登錄。
@startumlskinparam ParticipantBackgroundColor #DeepSkyBlueactor 用戶 as c #DeepSkyBlueparticipant "客戶端" as clientparticipant "服務(wù)網(wǎng)關(guān)" as gaparticipant "用戶服務(wù)" as userdatabase "數(shù)據(jù)庫(kù)" as DB #DeepSkyBlueparticipant "Google服務(wù)" as google #LightCoralactivate c #DeepSkyBlueactivate client #DeepSkyBluec->client:用戶登錄group#LightCoral #LightCoral Google登錄客戶端流程 client -> google : 請(qǐng)求Google OAuth登錄 activate google #DeepSkyBlue google-->client:登錄url client->google:跳轉(zhuǎn)登錄頁(yè) google -> google : 用戶登錄 google --> client : Google登錄Token deactivate googleend|||client -> ga : 登錄請(qǐng)求note right#LightCoral:新增登錄方式，三方登錄請(qǐng)求實(shí)體activate ga #DeepSkyBluega ->user:請(qǐng)求轉(zhuǎn)發(fā)activate user #DeepSkyBluealt#DeepSkyBlue 常規(guī)登錄 user -> DB : 查詢用戶信息 activate DB #DeepSkyBlue DB -> user : 用戶信息 deactivate DB user->user:登錄密碼校驗(yàn)|||else Google登錄 group#LightCoral #LightCoral Google登錄服務(wù)端流程 user->google:驗(yàn)證token activate google #DeepSkyBlue google-->user:用戶信息 deactivate google user->user:存儲(chǔ)或更新用戶信息 end groupenduser-->ga:登錄結(jié)果deactivate userga -> client : 響應(yīng)deactivate gaalt#DeepSkyBlue 成功 client -> c : 登錄成功else 失敗 client -> c : 登錄失敗enddeactivate client|||@enduml
登錄時(shí)序圖
PlantUML使用起來(lái)整體上還是非常舒服的，對(duì)我而言，這幾個(gè)特點(diǎn)讓我愛(ài)不釋手：
本文鏈接：http://m.www897cc.com/showinfo-26-88327-0.htmlPlantUML畫(huà)時(shí)序圖，真香！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 我用 Flutter、React Native 和 Ionic 構(gòu)建了相同的應(yīng)用程序
下一篇： 這一次，徹底搞懵 CRDT
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)