Skip to content
Snippets Groups Projects
Verified Commit d15655c7 authored by Huste, Tobias's avatar Huste, Tobias :rabbit:
Browse files

Add PlantUML examples

parent 2dfde952
No related branches found
No related tags found
1 merge request!1Create PlantUML examples
Hide whitespace changes
Inline Side-by-side
README.md
+ 3
− 76
View file @ d15655c7
# Create Diagrams from Textual Descriptions
In this GitLab instance you can create diagrams from textual descriptions.
In this GitLab instance you can easily create diagrams from textual descriptions.
Therefore, a tool called [Kroki](https://kroki.io) is provided.
This document provides you with a set of examples that can be used to create
diagrams.
## PlantUML
Besides various UML diagrams, PlantUML has support for various other
software development related formats.
The [official documentation](https://plantuml.com/) provides you with an
extensive description of the syntax and supported format.
More examples can be found in the [PlantUML](examples/plantuml.md) file.
## Table of Contents
### Gantt Diagram
```plantuml
@startgantt
printscale weekly
Project starts the 1st of July 2021
[Literature Review] lasts 4 weeks
[Literature Review] is 100% completed
then [Run Experiments] lasts 12 weeks
[Run Experiments] is 70% completed
-- Phase Two --
then [Data Analysis] lasts 8 weeks
[Data Analysis] is 0% completed
then [Write Publication] lasts 6 weeks
[Write Publication] is 0% completed
@endgantt
```
### Sequence Diagram
```plantuml
@startuml
participant User
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml
```
### Display JSON Data
```plantuml
@startjson
{
"firstName": "John",
"lastName": "Smith",
"age": 28,
"address": {
"streetAddress": "Bautzner Landstr. 400",
"city": "Dresden",
"state": "Saxony",
"postalCode": "01328"
},
"offices": [
{
"building": 512,
"room": 1234
},
{
"building": 312,
"room": 3
}
],
"departments": []
}
@endjson
```
\ No newline at end of file
* [PlantUML](examples/plantuml.md)
examples/plantuml.md
+ 328
− 66
View file @ d15655c7
# PlantUML
[PlantUML](https://plantuml.com/) is a tool that allows to quickly write
diagrams in the Unified Modeling Language (UML).
It also supports various non-UML diagrams, such as Gantt, visualising JSON/YAML
data or mind maps.
## Gantt Diagram
A Gantt diagram is a type of a bar chart illustrating a project schedule.
It can also show the dependency relationships between activities.
A complete reference for creating Gantt diagrams is available in the [documentation](https://plantuml.com/gantt-diagram).
<details>
<summary>Show code</summary>
<div>
```plantuml
@startgantt
printscale weekly
Project starts the 1st of July 2021
[Literature Review] lasts 4 weeks
[Literature Review] is 100% completed
then [Run Experiments] lasts 12 weeks
[Run Experiments] is 70% completed
-- Phase Two --
then [Data Analysis] lasts 8 weeks
[Data Analysis] is 0% completed
then [Write Publication] lasts 6 weeks
[Write Publication] is 0% completed
@endgantt
```
</div>
</details>
```plantuml
@startgantt
printscale weekly
Project starts the 1st of July 2021
[Literature Review] lasts 4 weeks
[Literature Review] is 100% completed
then [Run Experiments] lasts 12 weeks
[Run Experiments] is 70% completed
-- Phase Two --
then [Data Analysis] lasts 8 weeks
[Data Analysis] is 0% completed
then [Write Publication] lasts 6 weeks
[Write Publication] is 0% completed
@endgantt
```
## Display JSON Data
Using PlantUML it is easy to visualize JSON data.
Please refer to the [documentation](https://plantuml.com/json) for a syntax
reference.
<details>
<summary>Show code</summary>
<div>
```plantuml
@startjson
{
"firstName": "John",
"lastName": "Smith",
"age": 28,
"address": {
"streetAddress": "Bautzner Landstr. 400",
"city": "Dresden",
"state": "Saxony",
"postalCode": "01328"
},
"offices": [
{
"building": 512,
"room": 1234
},
{
"building": 312,
"room": 3
}
],
"departments": []
}
@endjson
```
</div>
</details>
```plantuml
@startjson
{
"firstName": "John",
"lastName": "Smith",
"age": 28,
"address": {
"streetAddress": "Bautzner Landstr. 400",
"city": "Dresden",
"state": "Saxony",
"postalCode": "01328"
},
"offices": [
{
"building": 512,
"room": 1234
},
{
"building": 312,
"room": 3
}
],
"departments": []
}
@endjson
```
## MindMap
Drawing MindMaps can be useful to visually organize information.
The hierarchical structure shows relationships among pieces of the whole.
A detailed introduction to MindMaps with PlantUML is available in the
[documentation](https://plantuml.com/mindmap-diagram).
<details>
<summary>Show code</summary>
<div>
```plantuml
@startmindmap
* Helmholtz Incubator Platforms
** KIT
***_ HIFIS
***_ HMC
***_ Helmholtz AI
** FZJ
***_ HIFIS
***_ Helmholtz AI
** HZDR
***_ HIFIS
***_ Helmholtz AI
** DESY
***_ HIFIS
***_ HIP
** ...
@endmindmap
```
</div>
</details>
```plantuml
@startmindmap
* Helmholtz Incubator Platforms
** KIT
***_ HIFIS
***_ HMC
***_ Helmholtz AI
** FZJ
***_ HIFIS
***_ Helmholtz AI
** HZDR
***_ HIFIS
***_ Helmholtz AI
** DESY
***_ HIFIS
***_ HIP
** ...
@endmindmap
```
## UML Diagrams
The Unified Modeling Language (UML) is a general-purpose modeling language in
the field of software engineering.
It aims to provide a standard way to visualize the design of a system.
### Sequence Diagram
A sequence diagram shows object interactions arranged in time sequence.
It depicts objects involved in the scenario and the sequence of messages
exchanged between the objects.
Sometimes they are also called _event diagrams_ or _event scenarios_.
PlantUML syntax for sequence diagram is desribed in detail in their
[documentation](https://plantuml.com/sequence-diagram).
<details>
<summary>Show code</summary>
<div>
......@@ -52,82 +231,165 @@ deactivate A
@enduml
```
### Sequence Diagram
```plantuml
@startuml
participant User
### State Diagram
A state diagram is typically used in computer science to describe the behavior
of systems.
A state diagram requires that the system is composed of a finite number of
states.
PlantUML can be used to create state diagrams.
All details are available in the [documentation](https://plantuml.com/state-diagram).
<details>
<summary>Show code</summary>
<div>
User -> A: DoWork
activate A
```plantuml
@startuml
hide empty description
[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string
A -> B: << createRequest >>
activate B
State1 -> State2
State2 --> [*]
@enduml
```
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
</div>
</details>
B --> A: RequestCreated
deactivate B
```plantuml
@startuml
hide empty description
[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string
A -> User: Done
deactivate A
State1 -> State2
State2 --> [*]
@enduml
```
### Display JSON Data
```plantuml
@startjson
{
"firstName": "John",
"lastName": "Smith",
"age": 28,
"address": {
"streetAddress": "Bautzner Landstr. 400",
"city": "Dresden",
"state": "Saxony",
"postalCode": "01328"
},
"offices": [
{
"building": 512,
"room": 1234
},
{
"building": 312,
"room": 3
## Visualising Software Architecture With the C4 Model
The C$ model is a graphical notation technique for modelling the architecture
of software systems.
It decomposes a system into containers and components.
Thereby it relies on existing modlling techniques such as UML
or Entity Relation Diagram (ERD) for a more detailed decomposition of the building blocks.
All details can be found in the corresponding
[project](https://github.com/plantuml-stdlib/C4-PlantUML).
<details>
<summary>Show code</summary>
<div>
```plantuml
@startuml "messagebus"
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
skinparam wrapWidth 200
skinparam maxMessageSize 200
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person(customer, Customer, "A customer")
System_Boundary(c1, "Customer Information") {
Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile")
Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information")
Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events")
Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes")
Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities")
ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information")
ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes")
Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened")
}
],
"departments": []
}
@endjson
```
### Display JSON Data
Rel(customer, app, "Uses", "HTTPS")
Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS")
Rel_L(customer_service, app, "Sends events to", "WebSocket")
Rel_R(customer_service, message_bus, "Sends customer update events to")
Rel(customer_service, customer_db, "Stores data in", "JDBC")
Rel(message_bus, reporting_service, "Sends customer update events to")
Rel(message_bus, audit_service, "Sends customer update events to")
Rel(reporting_service, reporting_db, "Stores data in")
Rel(audit_service, audit_store, "Stores events in")
Lay_R(reporting_service, audit_service)
@enduml
```
</div>
</details>
```plantuml
@startjson
{
"firstName": "John",
"lastName": "Smith",
"age": 28,
"address": {
"streetAddress": "Bautzner Landstr. 400",
"city": "Dresden",
"state": "Saxony",
"postalCode": "01328"
},
"offices": [
{
"building": 512,
"room": 1234
},
{
"building": 312,
"room": 3
}
],
"departments": []
@startuml "messagebus"
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
' uncomment the following line and comment the first to use locally
' !include C4_Container.puml
skinparam wrapWidth 200
skinparam maxMessageSize 200
LAYOUT_TOP_DOWN()
'LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
Person(customer, Customer, "A customer")
System_Boundary(c1, "Customer Information") {
Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile")
Container(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information")
Container(message_bus, "Message Bus", "RabbitMQ", "Transport for business events")
Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes")
Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities")
ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information")
ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes")
Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened")
}
@endjson
Rel(customer, app, "Uses", "HTTPS")
Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS")
Rel_L(customer_service, app, "Sends events to", "WebSocket")
Rel_R(customer_service, message_bus, "Sends customer update events to")
Rel(customer_service, customer_db, "Stores data in", "JDBC")
Rel(message_bus, reporting_service, "Sends customer update events to")
Rel(message_bus, audit_service, "Sends customer update events to")
Rel(reporting_service, reporting_db, "Stores data in")
Rel(audit_service, audit_store, "Stores events in")
Lay_R(reporting_service, audit_service)
@enduml
```
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog