tft每日頭條

 > 生活

 > visio 繪圖心得

visio 繪圖心得

生活 更新时间:2024-07-17 12:31:16

程序員在工作中,經常會有繪制時序圖、流程圖的需求,尤其是在寫文檔的時候。平時我們會選擇ProcessOn這類工具來繪制,但有時候用代碼來畫圖可能會更高效一點,畢竟沒有比程序員更熟悉代碼的了。今天給大家推薦一款畫圖工具PlantUML,可以配合IDEA使用,畫圖更高效!

PlantUML簡介

PlantUML是一款開源的UML圖繪制工具,支持通過文本來生成圖形,使用起來非常高效。可以支持時序圖、類圖、對象圖、活動圖、思維導圖等圖形的繪制。

下面使用PlantUML來繪制一張流程圖,可以實時預覽,速度也很快!

visio 繪圖心得(橫空出世IDEA畫圖神器來了)1

安裝

通過在IDEA中安裝插件來使用PlantUML無疑是最方便的,接下來我們來安裝下IDEA的PlantUML插件。

  • 首先在IDEA的插件市場中搜索PlantUML,安裝這個排名第一的插件;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)2

  • 有時候網絡不好的話可能下載不下來,可以點擊Plguin homepage按鈕訪問插件主頁,然後選擇合适的版本下載壓縮包;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)3

  • 下載成功後,選擇從本地安裝即可。

visio 繪圖心得(橫空出世IDEA畫圖神器來了)4

使用

接下來我們使用PlantUML插件分别繪制時序圖、用例圖、類圖、活動圖、思維導圖,來體驗下PlantUML是不是真的好用!

時序圖

時序圖(Sequence Diagram),是一種UML交互圖。它通過描述對象之間發送消息的時間順序顯示多個對象之間的動态協作。我們在學習Oauth2的時候,第一步就是要搞懂Oauth2的流程,這時候有個時序圖幫助可就大了。下面我們使用PlantUML來繪制Oauth2中使用授權碼模式頒發令牌的時序圖。

  • 首先我們需要新建一個PlantUML文件,選擇時序圖;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)5

  • 我們可以通過PlantUML提供的語法來生成Oauth2的時序圖,語法還是非常簡單的,具體内容如下;

@startuml title Oauth2令牌頒發之授權碼模式 actor User as user participant "User Agent" as userAgent participant "Client" as client participant "Auth Login" as login participant "Auth Server" as server autonumber user->userAgent:訪問客戶端 activate userAgent userAgent->login:重定向到授權頁面 clientId redirectUrl activate login login->server:用戶名 密碼 clientId redirectUrl activate server server-->login:返回授權碼 login-->userAgent:重定向到redirectUrl 授權碼code deactivate login userAgent->client:使用授權碼code換取令牌 activate client client->server:授權碼code clientId clientSecret server-->client:頒發訪問令牌accessToken refreshToken deactivate server client-->userAgent:返回訪問和刷新令牌 deactivate client userAgent--> user:令牌頒發完成 deactivate userAgent @enduml

  • 該代碼将生成如下時序圖,用寫代碼的方式來畫時序圖,是不是夠炫酷;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)6

  • 本時序圖關鍵說明如下:
    • title可以用于指定UML圖的标題;
    • 通過actor可以聲明人形的參與者;
    • 通過participant可以聲明普通類型的參與者;
    • 通過as可以給參與者取别名;
    • 通過->可以繪制參與者之間的關系,虛線箭頭可以使用-->;
    • 在每個參與者關系後面,可以使用:給關系添加說明;
    • 通過autonumber我們可以給參與者關系自動添加序号;
    • 通過activate和deactivate可以指定參與者的生命線。
  • 這裡還有個比較神奇的功能,當我們右鍵時序圖時,可以生成一個在線訪問的鍊接;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)7

  • 直接訪問這個鍊接,可以在線訪問UML時序圖,并進行編輯,是不是很酷!

visio 繪圖心得(橫空出世IDEA畫圖神器來了)8

用例圖

用例圖(Usecase Diagram)是用戶與系統交互的最簡表示形式,展現了用戶和與他相關的用例之間的關系。通過用例圖,我們可以很方便地表示出系統中各個角色與用例之間的關系,下面我們用PlantUML來畫個用例圖。

  • 首先我們需要新建一個PlantUML文件,選擇用例圖,該用例圖用于表示顧客、主廚、美食家與餐館中各個用例之間的關系,具體内容如下;

@startuml left to right direction actor Guest as g package Professional { actor Chief as c actor "Food Critic" as fc } package Restaurant { usecase "Eat Food" as uc1 usecase "Pay For Food" as uc2 usecase "Drink" as uc3 usecase "Review" as uc4 } g--> uc1 g--> uc2 g--> uc3 fc--> uc4 @enduml

  • 該代碼将生成如下用例圖;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)9

  • 本用例圖關鍵說明如下:
    • left to right direction表示按從左到右的順序繪制用例圖,默認是從上到下;
    • 通過package可以對角色和用例進行分組;
    • 通過actor可以定義用戶;
    • 通過usecase可以定義用例;
    • 角色和用例之間的關系可以使用-->來表示。
類圖

類圖(Class Diagram)可以表示類的靜态結構,比如類中包含的屬性和方法,還有類的繼承結構。下面我們用PlantUML來畫個類圖。

  • 首先我們需要新建一個PlantUML文件,選擇類圖,該圖用于表示Person、Student、Teacher類的結構,具體内容如下;

@startuml class Person { # String name # Integer age void move() void say() } class Student { - String studentNo void study() } class Teacher { - String teacherNo void teach() } Person <|-- Student Person <|-- Teacher @enduml

  • 該代碼将生成如下類圖,看下代碼和類圖,是不是發現和我們用代碼定義類還挺像的;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)10

  • 本類圖關鍵說明如下:
    • 通過class可以定義類;
    • 通過在屬性和方法左邊加符号可以定義可見性,-表示private,#表示protected, 表示public;
    • 通過<|--表示類之間的繼承關系。
活動圖

活動圖(Activity Diagram)是我們用的比較多的UML圖,經常用于表示業務流程,比如電商中的下單流程就可以用它來表示。下面我們用PlantUML來畫個活動圖。

  • 首先我們需要新建一個PlantUML文件,選擇活動圖,這裡使用了mall項目中購物車中生成确認單的流程,具體内容如下;

@startuml title 生成确認單流程 start :獲取購物車信息并計算好優惠; :從ums_member_receive_address表中\n獲取會員收貨地址列表; :獲取該會員所有優惠券信息; switch(根據use_type判斷每個優惠券是否可用) case(0) :全場通用; if (判斷所有商品總金額是否\n滿足使用起點金額) then (否) :得到用戶不可用優惠券列表; stop endif case(-1) :指定分類; if (判斷指定分類商品總金額\n是否滿足使用起點金額) then (否) :得到用戶不可用優惠券列表; stop endif case(-2) :判斷指定商品總金額是否滿足使用起點金額; if (判斷指定分類商品總金額\n是否滿足使用起點金額) then (否) :得到用戶不可用優惠券列表; stop endif endswitch :得到用戶可用優惠券列表; :獲取用戶積分; :獲取積分使用規則; :計算總金額,活動優惠,應付金額; stop @enduml

  • 該代碼将生成如下活動圖,在活動圖中我們既可以用if else,又可以使用switch,甚至還可以使用while循環,功能還是挺強大的;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)11

  • 本活動圖關鍵說明如下:
    • 通過start和stop可以表示流程的開始和結束;
    • 通過:和;中間添加文字來定義活動流程節點;
    • 通過if then endif定義條件判斷;
    • 通過switch case endswitch定義switch判斷。
思維導圖

思維導圖(Mind Map),是表達發散性思維的有效圖形工具,它簡單卻又很有效,是一種實用性的思維工具。之前在我的mall學習教程中就有很多地方用到了,下面我們用PlantUML來畫個思維導圖。

  • 首先我們需要新建一個PlantUML文件,選擇思維導圖,這裡使用了mall學習路線中的大綱視圖,具體内容如下;

@startmindmap [#17ADF1] mall學習路線 [#lightgreen] 推薦資料 [#lightblue] 後端技術棧 _ 項目框架 _ 數據存儲 _ 運維部署 _ 其他 [#orange] 搭建項目骨架 [#1DBAAF] 項目部署 _ Windows下的部署 _ Linux下使用Docker部署 _ Linux下使用Docker Compose部署 _ Linux下使用Jenkins自動化部署 --[#1DBAAF] 電商業務 ---_ 權限管理模塊 ---_ 商品模塊 ---_ 訂單模塊 ---_ 營銷模塊 --[#orange] 技術要點 --[#lightblue] 前端技術棧 --[#lightgreen] 進階微服務 ---_ Spring Cloud技術棧 ---_ 項目部署 ---_ 技術要點 --[#yellow] 開發工具 --[#lightgrey] 擴展學習 @endmindmap

  • 該代碼将生成如下思維導圖,其實使用PlantUML我們可以自己定義圖形的樣式,這裡我自定義了下顔色;

visio 繪圖心得(橫空出世IDEA畫圖神器來了)12

  • 本思維導圖關鍵說明如下:
    • 通過 和-可以表示思維導圖中的節點,具有方向性;
    • 通過[#顔色]可以定義節點的邊框顔色;
    • 通過_可以去除節點的邊框;
總結

雖然目前可以繪制UML圖的圖形化工具很多,但是對于程序員來說,使用代碼來繪圖可能更直接,效率更高,尤其是配合IDEA使用。如果你想使用代碼來繪圖,不妨嘗試下PlantUML吧。

來源:公衆号

作者:夢想de星空

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved