There are a variety of drawing tools on the market, both desktop and online. With so many choices, it is difficult to unify the tools used by team members, such as VSD, EDX, ODG… Graph files with various suffixes, which are also not friendly to version management tools.

Looking for a free, easy version management, rich form of drawing tools. We searched high and low, and found PlantUML (plantuml.com/zh/).

Best of all, there is a plantuml plugin in vscode, and markdown support for plantuml is great. See below



To draw with Plantuml is to write code, which is not quite the same as a programming language. Is a Domain Specific Language (DSL), can use a small amount of declarative code, complex graphics rendering. The code is graphed in a way that is easy to do across terminals and is very version-friendly.

Environment to prepare

1. Install the plantuml plugin on vscode

2. In vscode, modify plantuml configuration

Plantuml. Render, select PlantUMLServer
Plantuml server, set to https://www.plantuml.com/plantuml

3. Create markDown file and open MarkDown preview

Other functions of plantuml can be seen in shift + command + P by typing the plantuml keyword



Recommend an online Plantuml mapping project for a quick taste: plantuml-editor.kkeisuke.com/


Architecture diagram

icon

Image entity github.com/Roemer/plan…

(In markdown, place it inside plantuml)




“`plantuml
@startuml
rectangle “<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Users/user.png>\r User” as user
rectangle “<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Services/lync_web_app_client.png>\r Client” as client


rectangle ”

\r Server1″ as s1
rectangle ”

\r Server1\n Logging middleware “as M1
rectangle “<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Servers/database_server.png>\r DB” as db2


rectangle ”

\ r controller” as c
db2 <-> s1
s1 <–> client
client <.left.> user
@enduml
` ` `


layout

Direction: top to bottom direction (default), left to right direction
You can change the direction of the arrow by adding keywords like left, right, up, or Down.




@startuml
‘Two dash arrows –> or two dot arrows… > means that the arrow is vertical, pointing up and down. If you use a single line arrow -> or a single point arrow.> the arrow is horizontal.
[Middle] –> [bottom]
[Middle] -> [right]
[left] <. [middle]
[above] <.. [center]
‘Add the left, right, up, and down keywords
[middle] -right-> [right]
[middle] -> [bottom]
[center].left.>
[middle].up.> [top]
@enduml

Note left of, note right of, note top of, note bottom of

For more information: plantuml.com/zh/archimat…


The class diagram



The following code

@startuml


The abstract car
Class ID card {
-private
#protected
~package private
+public
-private()
#protected()
~package private()
+public()
}


Car. Up. | > car
Bicycle. Up. | > car
Small car *-left- engine
Car *– tires
SUV – | > cars
Students.. > bike
Student — Class O
Student – ID card
@enduml


  • The car class diagram is marked A, indicating that the car is an abstract class.
  • It has two inheritance classes: cars and bicycles; The relationship between them is an implementation relationship (realize, represented by inheriting an abstract class), represented by a dashed line with a hollow arrow. Small steam.. | > car (in the middle of the up is used to control the arrow direction)
  • The relationship between car and SUV is generalization (inheritance of non-abstract class), and is represented by a solid line with a hollow arrow. SUV – | > cars
  • The relationship between the car and the engine is composition, represented by solid lines with solid arrows. Car *- engine
  • The student and the class are aggregation. Unlike combinatorial relations, the whole and the parts are not strongly dependent, even if the whole does not exist, the parts still exist, has-A), represented by solid lines with hollow arrows. Student — Class O
  • Association between students and ID cards, which describes the structural relationship between objects of different classes; It is a static relationship, usually independent of the running state, generally determined by common sense and other factors; It is generally used to define static, natural structures between objects; So, correlation is a “strong correlation”;) , represented by a solid line. Student – ID card
  • Students need bicycles to go to school. A dependency on bicycles is a temporary relationship, usually generated during runtime and changing with runtime. Dependencies can also change;) , represented by dotted lines with arrows. Students.. > bike
mark
Visibility type
+
Public
# Protected
– Private
~
Package private

More information can be found at plantuml.com/zh/class-di…


Sequence diagram

The keyword participant is used to change the order of the participants. You can also use another keyword to declare the actor: actor Boundary Control Entity database



@startuml
‘Participant declaration, controlling the sequence of participants. Keywords such as actor control shapes
participant par
actor act
boundary bou
control con
entity ent
database dat





Par -> act++: solid quiver, synchronized
Par < -act –: solid quiver, synchronous return
Par ->> ACT: solid line arrows, asynchronous
Par <<– act: dotted arrow, asynchronous return
Bou -> bou: Reflexive message
‘Various arrows
con –> dat
con ->x dat
con -\ dat
con -\\ dat
con /– dat
con //– dat
con ->o dat
con <-> dat
con <–>o dat
con o<–>x dat


@enduml


Object creation and destruction

  • ++Activate the target
  • --The source target is inactivated
  • **Creating a target instance
  • !!!!!Destroy target instance

For more information: plantuml.com/zh/sequence…


reference

[1] understand UML class diagram and sequence diagram design – patterns. Readthedocs. IO/zh_CN/lates…

[2] the UML sequence diagram 2 sparxsystems. Cn/resources/u…

[3] Use case diagram plantuml.com/zh/use-case…
[4] Tamping PlantUML (3, sequence diagram) blog.csdn.net/zh_weir/art…
[5] Tamping PlantUML (2, component diagram) blog.csdn.net/zh_weir/art…
[6] Using PlantUML to draw class diagrams juejin.cn/post/684490…