Use Sublime + PLANTUML to draw efficiently

What is PLANTUML

PLANTUML is a drawing scripting language that allows you to quickly draw:

• Timing Diagram
• Flow chart
• Use case diagram
• State diagram
• Component diagram

To put it simply, we need a graph to draw when we use Visio, but using PLANTUML only needs to express the contents of the graph in words, and then we can create the picture directly. Look at one of the simplest examples:

and you?

Demo Software Installation

These software are all open source or shareware, there is no copyright issue, you can rest assured that use.

• Installing Sublime
  Sublime is a powerful and extensible text editor. Go to the official website to download the corresponding operating system version installed.
• Installing Graphviz
  Graphviz is an open-source image rendering library. This library is installed to convert the Plantuml script to a picture under Windows.
• Installing the PLANTUML for Sublime plugin
  With this plugin, we can write the plantuml script in Sublime and then generate the image directly from a shortcut key. The installation steps are as follows
  • Download the plugin and unzip
  • By Preferences -> Browse Packages ... opening the sublime Packages directory, the extracted plugin is placed in the Packages directory
  • Restart Sublime

For ease of use, you can configure a shortcut key in the Sublime. Open Preferences -> Key Binding - User , add a shortcut key:

{ "keys": ["alt+d"], "command": "display_diagrams"}

The above code is configured to press Alt + d and hold to generate the PLANTUML picture, you can change it to your own favorite button.

Effect test

Finally check that the work is installed correctly. Open Sublime Input:

and you?

Select the text content, press ALT + D to generate the image file in the current working directory, and automatically pop up the window to display the picture.

Precautions

• Sublime Text 3 Installation failure issue
  When installing the PLANTUML plugin, the Unable to load diagram Plugin,check console for details appears. Glue the example to the Alt+d show nothing to process. Just found the solution: The reason is that the downloaded plug-in cannot load the file: Diagram.sublime-settings, where the third line encoding "CharSet": null changed to "CharSet": "UTF-8", turn off sublime Text 3 reboot. Thank @niminote for the solutions provided.
• Press ALT + D before you need to make the plantuml script to generate the picture selected, otherwise you will be prompted No diagrams overlap selections. There was more than one student in the message who made the mistake.

Plantulm Quick Start Timing diagram

@startumltitle 时序图== 鉴权阶段 ==Alice -> Bob: 请求Bob -> Alice: 应答== 数据上传 ==Alice -> Bob: 上传数据note left: 这是显示在左边的备注Bob --> Canny: 转交数据... 不超过 5 秒钟 ...Canny --> Bob: 状态返回note right: 这是显示在右边的备注Bob -> Alice: 状态返回== 状态显示 ==Alice -> Alice: 给自己发消息@enduml

Sequence diagram

TIPS:

• Use title to specify a caption
• ', ' and '--' to indicate the form of the line
• Add a colon to a comment after each time series :
• Use note to display notes, notes can be specified to appear on the left or right
• Use == xxx == to separate time series diagrams
• Use ... to represent a delay ellipsis
• A node can send itself a message by using the same principal as the sender and receiver

Use case diagram

@startumlleft to right directionactor 消费者actor 销售员rectangle 买单 {消费者 -- (买单)(买单) .> (付款) : include(帮助) .> (买单) : extends(买单) -- 销售员}@enduml

Use case

TIPS:

• Use case diagram
  • Use-case diagrams are static views of the actors (actors), use cases, and their relationships that describe system functions
  • Baidu Encyclopedia has easy entry information, where the relationship between use cases (include, extends) is the key
• Use actor to define participants
• Use parentheses (xxx) to represent use cases, use cases with oval expressions
• Use different lines to express different relationships. Includes the relationship between the actor and the use case, the use case and the use case

Flow chart

@startumltitle Flowchart (*)--"Step 1 Process"-"Step 2 Process"If"Condition 1 judgment"Then->[True"Conditions 10% Act immediately"If"Branch Condition 2 judgment"Then->[No"Condition 2 does not act immediately"-= = = = Summary point of the intermediate process1 = = =else-->[Yes] = = = Intermediate Process Summary point1 = = = EndIfif "branch condition 3 determines" then -->[Yes] "branch condition 30% immediately executes the action"- "Page.onrender ()" as render--= = = REDIR Ect_check = = = Else-->[No] "branch condition 3 is not set when the action"--render endifelse-->[false] = = = Redirect_ CHECK ===endifIf "condition 4 determines" then->[Yes] "condition 40% immediately executes the action"-- "Process last node"elseendif-- > "Process last Node"--(*)@enduml            

Activity diagram

The above flowchart is quite intuitive when it is written, but the picture rendered is not good, the display of logic is not clear. For this reason PLANTUML implements a different version of the flowchart script.

The following is a new version of PLANTUML support flowchart script, from the perspective of use, more intuitive, the picture is more beautiful, recommended to use.

@startumlstart:"Step 1 Process";:"Step 2 Processing";if ("Condition 1 judgment")Then (true): Condition1 actions performed at the time of establishment;if ("Branch condition 2 judgment")Then (NO):"Condition 2 does not act immediately";Elseif (then (yes):  "condition 30% immediate action"; else (no):  "condition 3 when the action is not established"; EndIf endif: Span class= "hljs-string" > "sequential Step 3", Endifif ( "condition 4 judgment") then (yes):  "condition 4 actions established"; else if (" condition 5 judging ")  Then (yes):  "condition 50% immediate action"; else (no):  "condition 5 when the action is not established"; Endifendifstop @enduml         

Active Diagram 2

TIPS:

• Use to start indicate process start, use stop to indicate process end
• Sequential processes use colons and semicolons :xxx; to represent
• Conditional statements are used if ("condition 1") then (true/yes/false/no) to represent
• Conditional statements can be nested

Component diagram

We often use component diagrams to draw deployment views, or to draw a topology diagram of a system.

@startumlpackage"Component 1" {["Component 1.1"]-["Component 1.2"] [ "Components 1.2"], "" Components 2.1 "]}node " component 2 " {[ "Component 2.1"]-[ "component 2.2"] [ "component 2.2"]-- > [Load Balancer server]}cloud {Load balancer server], logical server 1] [load balancer Server], logical server 2] [load balancer Server]," logical server 3]}database  "MYSQL" { Folder  "This is my folder" {[Folder 3]} frame " Foo "{[Frame 4]}}[logical Server 1]--[Folder 3][logical Server 2"--[Frame 4][logical server 3"--[Frame 4] @enduml        

Component diagram

TIPS:

• Use square brackets [xxx] to represent components
• Several components can be combined into a single package that can be used with the keyword package, node, folder, frame, cloud, database . Different keyword graphics are not the same.
• You can use different arrows inside the package to express the relationship between the components of the same package
• The interaction of components within a package that can be expressed directly inside another package
• The interaction between packages or the components of a package can be expressed directly outside the flowchart

State diagram

We generally use state diagrams to draw state machines.

@startumlscale 640 width[*] --> NotShootingstate NotShooting {    [*] --> Idle    Idle --> Processing: SignalEvent    Processing --> Idle: Finish    Idle --> Configuring : EvConfig    Configuring --> Idle : EvConfig}state Configuring {    [*] --> NewValueSelection    NewValueSelection --> NewValuePreview : EvNewValue    NewValuePreview --> NewValueSelection : EvNewValueRejected    NewValuePreview --> NewValueSelection : EvNewValueSaved    state NewValuePreview { State1 -> State2 }}@enduml

State Diagram

TIPS:

• Use [*] to represent the starting point of a state
• Use state to define a sub-status diagram
• State diagrams can be nested
• Use scale commands to specify the dimensions of the resulting picture

Summarize

You don't need to remember these tags, use them when you need them, and use them constantly to familiarize yourself with the syntax of different graphs. You can download the PLANUML official documentation as a reference and turn it over when you encounter problems, so you can quickly learn to use PLANTUML to draw efficiently.

Original: http://www.jianshu.com/p/e92a52770832

Use Sublime + PLANTUML to draw efficiently