
- comments and directives
- class diagram
Comments and Directives
- type: //{type:class}
- direction: // {direction:leftToRight}
- generate: // {generate:true}
Class diagram
cheetsheet for class diagram
Class [Customer]
Directional [Customer]->[Order]
Bidirectional [Customer]<->[Order]
Aggregation [Customer]+-[Order] or [Customer]<>-[Order]
Composition [Customer]++-[Order]
Inheritance [Customer]^[Cool Customer], [Customer]^[Uncool Customer]
Dependencies [Customer]uses-.->[PaymentStrategy]
Cardinality [Customer]<1-1..2>[Address]
Labels [Person]customer-billingAddress[Address]
Notes [Address]-[note: Value Object]
Full Class [Customer|Forename;Surname;Email|Save()]
Color splash [Customer{bg:orange}]<>1->*[Order{bg:green}]
Association classes
[Invoice]<*-*>[Products][Invoice Item]
Use-cases diagram
Use Case (Login)
Actor [Customer]
<> (Login)<(Forgot Password)
<> (Register)>(Confirm Email)
Actor Inheritance [Admin]^[User]
Note [Admin]-(note: Most privilidged user)
Activity diagram
Start (start)
End (end)
Activity (Find Products)
Flow (start)->(Find Products)
Multiple Assoc. (start)->(Find Products)->(end)
Decisions (start)->
Decisions w/Label (start)->logged in->(Show Dashboard) and not logged in->(Show Login Page)
Parallel (Action 1)->|a| and (Action 2)->|a|
State diagram
Start (start)
End (end)
Activity (Find Products)
Flow (start)->(Find Products)
Multiple Assoc. (start)->(Find Products)->(end)
Complex case (Simulator running)[Pause]->(Simulator paused|do/wait)[Unpause]->(Simulator running)
Note (state)-(note: a note here)
Deployment diagram
Node [node1]
Association [node1]-[node2]
Labeled Assoc. [node1]label-[node2]
Note [node1]-[note: a note here]
Sequence diagram
Object [Patron]
Message [Patron]order food>[Waiter]
Response [Waiter]serve wine.>[Patron]
Note [Actor]-[note: a note message]
Asynchronous [Patron]order food>>[Waiter]
Package diagram
Package [package1]
Association [package1]->[package2]
Labeled assoc [package1]label->[package2]
Note [package1]-[note: a note here]
Others
- Color codes: form #RRGGBB, X11 color coding
- checkout yuml.me
Tools
npm install yuml-diagram




近期评论