https://plantuml.com/openiconic
https://plantuml.com/skinparam
https://plantuml.com/ascii-math
left to right direction
allowmixing
page 2x2
skinparam pageMargin 10
skinparam pageExternalColor gray
skinparam pageBorderColor black
@startuml
left to right direction
foo -left-> dummyLeft
foo -right-> dummyRight
foo -up-> dummyUp
foo -down-> dummyDown
@enduml
@startuml
class Car
Driver - Car : drives >
Car *- Wheel : have 4 >
Car -- Person : < owns
@enduml
https://plantuml.com/class-diagram
actor "Users" as myUsers
@startuml
:Here is the result
|= date |= table |= header |
| a | table | row |
|<#FF8080> red |<#80FF80> green |<#8080FF> blue |
<#yellow>| b | table | row |;
@enduml
You can use either @startsalt keyword, or @startuml followed by a line with salt keyword.
! display verticle lines
/- display all horizontal lines
/+ display external lines
/# To display all vertical and horizontal lines
Output Files:
(png, jpg, svg, and pdf) are allowed.
graphviz
graph_attr, node_attr and edge_attr are supported.
Here is a reference link.
Data Flow:
>>: Connect nodes in left to right direction.<<: Connect nodes in right to left direction.-: Connect nodes in no direction. Undirected.Be careful when using the - and any shift operators together, which could cause unexpected results due to operator precedence.
ORDER:
The order of rendered diagrams is the reverse of the declaration order.
Direction
You can change the data flow direction with direction parameter. Default is LR.
(TB, BT, LR and RL) are allowed.
You can't connect two lists directly because shift/arithmetic operations between lists are not allowed in Python.
@startuml
left to right direction
skinparam {
BackgroundColor #0c0c0c
DefaultFontColor #f2f2f2
ArrowColor #d8d8d8
ArrowThickness 1.5
RoundCorner 10
}
skinparam rectangle {
BackgroundColor #161616
BorderColor #f2f2f2
FontSize 16
Padding 14
}
skinparam rectangle<<auto>> {
BackgroundColor #5a2447
BorderColor #f2f2f2
FontColor #f9f1f9
}
skinparam note {
BackgroundColor #111
BorderColor #444
FontColor #f2f2f2
}
rectangle "Develop" as Dev
rectangle "Test\nmanually" as TestLocal
rectangle "Commit and\npush" as Commit
rectangle "Build\nautomatically" <<auto>> as Build
rectangle "Test\nautomatically" <<auto>> as TestCi
rectangle "Deliver" as Deliver
Dev --> TestLocal : ready to check?
TestLocal --> Dev : fix issues
TestLocal --> Commit : good enough
Commit --> Build : push triggers CI
Build --> TestCi : artifacts built
TestCi --> Deliver : all checks green
Build --> Dev : build fails
TestCi --> Dev : tests fail
Deliver --> Dev : next iteration
note top of Dev
1. Developers iterate locally,
coding and quick testing.
end note
note top of Commit
2. When behavior looks good,
commit and push.
end note
note top of Build
3. Push kicks off CI to build.
end note
note bottom of TestCi
4. CI runs automated tests and
reports status to developers.
end note
note bottom of Dev
5. If build or tests fail, cycle
restarts with more changes.
end note
note top of Deliver
6. After tests pass, release or
deploy a new version.
end note
@enduml
@startuml
left to right direction
skinparam backgroundColor #000000
skinparam activity {
BackgroundColor #111111
BorderColor #ffffff
FontColor white
ArrowColor white
}
skinparam note {
BackgroundColor #222222
BorderColor #888888
FontColor white
}
start
:Develop;
note left
1. Developers iterate locally (code + quick tests).
end note
:Test manually;
note left
5. If tests fail or changes are needed, loop back and iterate.
end note
:Commit and push;
note right
2. When code behaves as desired, commit and push.
end note
:Build automatically; #7a254b
note right
3. Push triggers CI to build the system.
end note
:Test automatically; #7a254b
note right
4. CI runs automated tests and reports status.
end note
:Deliver;
note right
6. After tests pass, release/deploy (can be automated).
end note
stop
' retry loops
:Test manually; --> :Develop; :rework;
:Build automatically; --> :Develop; :fix build issues;
:Test automatically; --> :Develop; :fix failing tests;
@enduml