Merge pull request #390 from kirchsth/feature/376_386_Layout

#376 (and #386):  Lay_...() has correct orientation in combination with LAYOUT_LANDSCAPE() (and theme documentation is updated)
pull/393/head
kirchsth 11 months ago committed by GitHub
commit 3643f58401
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -9,6 +9,16 @@
' !ENABLE_ALL_PLANT_ELEMENTS = 1 ' !ENABLE_ALL_PLANT_ELEMENTS = 1
' or with additional command line argument -DENABLE_ALL_PLANT_ELEMENTS=1 ' or with additional command line argument -DENABLE_ALL_PLANT_ELEMENTS=1
' C4-PlantUML v2.12 fixed a missing rotation bug in Lay_* calls in combination with LAYOUT_LANDSCAPE() call
' (details see https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
' If older diagrams should remain unchanged the bugfix can be deactivated with following statement
' !NO_LAY_ROTATE = 1
' or with follwing additional command line argument
' -DNO_LAY_ROTATE=1
' like
' java -jar plantuml.jar -DNO_LAY_ROTATE=1 ...
!global NO_LAY_ROTATE ?= 0
'Version 'Version
' ################################## ' ##################################
!function C4Version() !function C4Version()
@ -1749,32 +1759,64 @@ $getRel($right("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags,
!return '-[hidden]' + %substr('------------', 0, %intval($distance) + 1) !return '-[hidden]' + %substr('------------', 0, %intval($distance) + 1)
!endfunction !endfunction
!function $l_down($start,$end)
!if (NO_LAY_ROTATE == 0)
!return $down($start,$end)
!else
!return $start+"DOWN"+$end
!endif
!endfunction
!function $l_up($start,$end)
!if (NO_LAY_ROTATE == 0)
!return $up($start,$end)
!else
!return $start+"UP"+$end
!endif
!endfunction
!function $l_left($start,$end)
!if (NO_LAY_ROTATE == 0)
!return $left($start,$end)
!else
!return $start+"LEFT"+$end
!endif
!endfunction
!function $l_right($start,$end)
!if (NO_LAY_ROTATE == 0)
!return $right($start,$end)
!else
!return $start+"RIGHT"+$end
!endif
!endfunction
!unquoted procedure Lay_D($from, $to) !unquoted procedure Lay_D($from, $to)
$from -[hidden]D- $to $from $l_down("-[hidden]","-") $to
!endprocedure !endprocedure
!unquoted procedure Lay_Down($from, $to) !unquoted procedure Lay_Down($from, $to)
$from -[hidden]D- $to $from $l_down("-[hidden]","-") $to
!endprocedure !endprocedure
!unquoted procedure Lay_U($from, $to) !unquoted procedure Lay_U($from, $to)
$from -[hidden]U- $to $from $l_up("-[hidden]","-") $to
!endprocedure !endprocedure
!unquoted procedure Lay_Up($from, $to) !unquoted procedure Lay_Up($from, $to)
$from -[hidden]U- $to $from $l_up("-[hidden]","-") $to
!endprocedure !endprocedure
!unquoted procedure Lay_R($from, $to) !unquoted procedure Lay_R($from, $to)
$from -[hidden]R- $to $from $l_right("-[hidden]","-") $to
!endprocedure !endprocedure
!unquoted procedure Lay_Right($from, $to) !unquoted procedure Lay_Right($from, $to)
$from -[hidden]R- $to $from $l_right("-[hidden]","-") $to
!endprocedure !endprocedure
!unquoted procedure Lay_L($from, $to) !unquoted procedure Lay_L($from, $to)
$from -[hidden]L- $to $from $l_left("-[hidden]","-") $to
!endprocedure !endprocedure
!unquoted procedure Lay_Left($from, $to) !unquoted procedure Lay_Left($from, $to)
$from -[hidden]L- $to $from $l_left("-[hidden]","-") $to
!endprocedure !endprocedure
' PlantUML bug: lines which does "not match" with the orientation/direction of the diagram ' PlantUML bug: lines which does "not match" with the orientation/direction of the diagram

@ -30,7 +30,7 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
- [Including the C4-PlantUML library](#including-the-c4-plantuml-library) - [Including the C4-PlantUML library](#including-the-c4-plantuml-library)
- [Now let's create a C4 Container diagram](#now-lets-create-a-c4-container-diagram) - [Now let's create a C4 Container diagram](#now-lets-create-a-c4-container-diagram)
- [Supported Diagram Types](#supported-diagram-types) - [Supported Diagram Types](#supported-diagram-types)
- [System Context & System Landscape diagrams](#system-context--system-landscape-diagrams) - [System Context \& System Landscape diagrams](#system-context--system-landscape-diagrams)
- [Container diagram](#container-diagram) - [Container diagram](#container-diagram)
- [Component diagram](#component-diagram) - [Component diagram](#component-diagram)
- [Dynamic diagram](#dynamic-diagram) - [Dynamic diagram](#dynamic-diagram)
@ -39,11 +39,13 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
- [Samples](#samples) - [Samples](#samples)
- [Relationship Types](#relationship-types) - [Relationship Types](#relationship-types)
- [Layout (arrange) elements (without relationships)](#layout-arrange-elements-without-relationships) - [Layout (arrange) elements (without relationships)](#layout-arrange-elements-without-relationships)
- [Compatibility mode `NO_LAY_ROTATE=1`](#compatibility-mode-no_lay_rotate1)
- [Global Layout Options](#global-layout-options) - [Global Layout Options](#global-layout-options)
- [Sprites and other images](#sprites-and-other-images) - [Sprites and other images](#sprites-and-other-images)
- [Custom tags/stereotypes support and skinparam updates](#custom-tagsstereotypes-support-and-skinparam-updates) - [Custom tags/stereotypes support and skinparam updates](#custom-tagsstereotypes-support-and-skinparam-updates)
- [Element specific tag definitions](#element-specific-tag-definitions) - [Element specific tag definitions](#element-specific-tag-definitions)
- [Boundary specific tag definitions](#boundary-specific-tag-definitions) - [Boundary specific tag definitions](#boundary-specific-tag-definitions)
- [Define a new legend title](#define-a-new-legend-title)
- [Comments](#comments) - [Comments](#comments)
- [Sample with different tag combinations](#sample-with-different-tag-combinations) - [Sample with different tag combinations](#sample-with-different-tag-combinations)
- [Sample with tag dependent sprites and custom legend text](#sample-with-tag-dependent-sprites-and-custom-legend-text) - [Sample with tag dependent sprites and custom legend text](#sample-with-tag-dependent-sprites-and-custom-legend-text)
@ -59,6 +61,7 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
- [Advanced Samples](#advanced-samples) - [Advanced Samples](#advanced-samples)
- [techtribes.js](#techtribesjs) - [techtribes.js](#techtribesjs)
- [Message Bus and Microservices](#message-bus-and-microservices) - [Message Bus and Microservices](#message-bus-and-microservices)
- [(C4 styled) Sequence diagram sample](#c4-styled-sequence-diagram-sample)
- [Background](#background) - [Background](#background)
- [License](#license) - [License](#license)
- [📄 Layout Options](LayoutOptions.md#layout-options) - [📄 Layout Options](LayoutOptions.md#layout-options)
@ -66,6 +69,12 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
- samples - samples
- [📄 C4 Model Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams) - [📄 C4 Model Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams)
> [!IMPORTANT]
> **PlantUML v2.12.0:** Layout could be changed based on bugfix.
If `LAYOUT_LANDSCAPE()` is combined with `Lay_*()` calls then the elements are correct positioned based on the new implementation.
The old implementation swapped up<->left and down<->right (details see [issue 376](https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)).
The old behavior can be re-activated with `!NO_LAY_ROTATE=1`. Details see [Compatibility mode `NO_LAY_ROTATE=1`](#compatibility-mode-no_lay_rotate1).
## Getting Started ## Getting Started
### Including the C4-PlantUML library ### Including the C4-PlantUML library
@ -464,6 +473,66 @@ Lay_Distance(LEGEND(), db, 1)
![db below legend, 1 unit distance](https://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCIIxKQjAFVGKvptFUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VMJEuq7-LNZoRVfQBdO_8CHLoNeyE7Dq0ZRFyYDFfN1C5BZf_4SENfrULmkjiFTPBESJ_whqHM32v8liF-fQUqjLGhkM5ceG_z9VuSp_8qhw8VD2CCPVnjlfqdZswdkT2L7xxeHkbUTKKNi2mmTEQ_GbnOLdu2LGzIg35vNEPEGxswPldIkKfrUyhggBfKWmvlLC6hKKU9nUq9Lo1Lb76CuG5vBi-1vRNlZG3pKHLfk6pLARIieZGWFLzEe7sk9tsTmsY8fi5R9bkGYaRB-QFAsNBpTrXhlktelqsDWs0DXL9gRF7Zo1rQRhxEhjBUQcXhkbGyQWn8xUVRPcnpbU_2X03RUjSrQMn7FP8ssxllMrGiX2HxXAn1ZjT5iVKjwVU0QGLEwYyAHJZRFortsE5iEjzF5KpQRF4qMusulcS7FR6o8mUNORT2RnFjUye1Eo_P_0G00 "db below legend, 1 unit distance") ![db below legend, 1 unit distance](https://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCIIxKQjAFVGKvptFUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VMJEuq7-LNZoRVfQBdO_8CHLoNeyE7Dq0ZRFyYDFfN1C5BZf_4SENfrULmkjiFTPBESJ_whqHM32v8liF-fQUqjLGhkM5ceG_z9VuSp_8qhw8VD2CCPVnjlfqdZswdkT2L7xxeHkbUTKKNi2mmTEQ_GbnOLdu2LGzIg35vNEPEGxswPldIkKfrUyhggBfKWmvlLC6hKKU9nUq9Lo1Lb76CuG5vBi-1vRNlZG3pKHLfk6pLARIieZGWFLzEe7sk9tsTmsY8fi5R9bkGYaRB-QFAsNBpTrXhlktelqsDWs0DXL9gRF7Zo1rQRhxEhjBUQcXhkbGyQWn8xUVRPcnpbU_2X03RUjSrQMn7FP8ssxllMrGiX2HxXAn1ZjT5iVKjwVU0QGLEwYyAHJZRFortsE5iEjzF5KpQRF4qMusulcS7FR6o8mUNORT2RnFjUye1Eo_P_0G00 "db below legend, 1 unit distance")
### Compatibility mode `NO_LAY_ROTATE=1`
Based on the bugfix of [issue 376](https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
the layout of old diagrams could be changed if they contain a combination of
`LAYOUT_LANDSCAPE()` and `Lay_*()` commands like below.
```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
LAYOUT_LANDSCAPE()
Person(a, "A")
System(sUp, "B up\nbefore bugfix left")
System(sRight, "C right\nbefore bugfix down")
System(sDown, "D down\nbefore bugfix right")
System(sLeft, "E left\nbefore bugfix up")
Lay_U(a, sUp)
Lay_R(a, sRight)
Lay_D(a, sDown)
Lay_L(a, sLeft)
HIDE_STEREOTYPE()
@enduml
```
![bugfix changes old layout](https://www.plantuml.com/plantuml/png/NP3FQeGm6CJlFaMw9uMkNdhgQQqABQHTySzXeI1HemPY3CaNjllsJR8NyPOPVZFVa8i6ei2iF7XXOk1cf6W1aFezIHIvnpE3nVH6KpLi0gY0UDZMH78YNEQiOUIiJxAtS-cizXidAz50bRMwp2O84rJ5qlNZz7PjcmwdFtcTfMKHHa5GKgKt4P9NT4fFKL0_R7ODTIkjyO6C_1KzdJP5KM_cYVqXJYVOSHMR5x1eXfHx7UbnkuiTdLjfuTpxHzONx61C9zTS-9D7s4XB1fWykjPjjtiZhogl_AgdaJl37tvgxBJljldFhxpewgQeYcjpy_zneM8qA_y7 "bugfix changes old layout")
The new repositioning of the elements could damage old diagrams.
Therefore a compatibility mode NO_LAY_ROTATE is introduced.
This mode can be directly activated in the old diagrams with `!NO_LAY_ROTATE=1`
or with the additional command line argument `-DNO_LAY_ROTATE=1` (like `java -jar plantuml.jar -DNO_LAY_ROTATE=1 ...`)
If this value is set then non of the Lay_*() calls itself has to be updated like below.
```plantuml
@startuml
' the bugfix is deactivated with following statement
!NO_LAY_ROTATE = 1
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
LAYOUT_LANDSCAPE()
Person(a, "A")
System(sUp, "B up\nbefore bugfix left")
System(sRight, "C right\nbefore bugfix down")
System(sDown, "D down\nbefore bugfix right")
System(sLeft, "E left\nbefore bugfix up")
Lay_U(a, sUp)
Lay_R(a, sRight)
Lay_D(a, sDown)
Lay_L(a, sLeft)
HIDE_STEREOTYPE()
@enduml
```
![deactivated bugfix reproduces old layout](https://www.plantuml.com/plantuml/png/NP1HQxim5CNVyobk-_9luT_AO4-3GPqA6xXQh3uK1X8rQa2Z93Tp_VQxfZ1Att8EltFFpJqOv1hjqBD_0DW9A6tRo1-G1ch1AvJV74KDiyGEch7lnrcg5WoIEmY5R7LCYjY_56cI-La4h_34s4ggghUrW0vnCY-Uf_cyRsc2BQqHkXeLKdHVZOCtzLmjxJk3TIzBBtZUdHOh_uozWHiKcgmYe0INIkZzH2oZlYJFgFOOdWF_56ssZ9s4DgFQyF-mzjTRThvITjYOV2BZ3UpqfKhHZFhlVxrey8vBPTiXeG7evVL8r-EixkYG9C6XynzPD-0EZgc9uCXLFi9s8fB5_5hao-wqxzQfr2ctrSq8dR4KttIyQ3URykyVOLISioYDakpYxd4GggPJ_G80 "deactivated bugfix reproduces old layout")
## Global Layout Options ## Global Layout Options
C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams: C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams:
@ -1006,7 +1075,7 @@ Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20
![messagebus](https://www.plantuml.com/plantuml/png/ZLLDR-Cs4BtxLqpT0dK09yOMFHK8iFumkhjm4gzbOoy5Z94qbeYbI8Aad7MB_lSE9LjX4WLD3Z4vd7dlpGUfZywZzNKb1py9bSaw9oYzD-wFoSJYuqqXV5cdjIERQUL9-PjCLnCZKOMOQ-TpATB9_FVhTJ3jxbQJ2fqdowRzd2DGAB8t9k3_2hNYu8f1m9S41osbVXIg0CbEW2g7PyV2EbvfO7AGEaCfJupHgNnDC9Zc-L9IGDXYCHfM8hCw8NiK6Gt7y8ihqT3jKXIbJqHEUHBseoi-IOkvbjhU3kVQgWEh8ZkJTHDqO8xpuMCfV6EJL93Aj_J3txOau5gMlnG5T701VdZrKf3psc8HQTdeMh7dJF_eqI8ReTzFRobX_47owU7RVhtS90_t-uVTTlNvVZbYyvgiqsgKrSnOaHt3l5iDft0nDm0dxbQrdmKXQ4-Zx0ExNBpXipfeMw4NMWslu9y1y5zNz14Q4pjFZP4YQvtP_WMFw38hZ1_3L1MrH1lCqz1qrsbmeSCLAYmeT5rOC5OVXEJiNh1T8lRdMiVKNPDRsZ4aneR1ccdjWt5R4XWjb0Tz0CmoSWuuiqu5Y2XHBhN7mi4jn1FqMb35A2nxdzQEAUxQ7Sng5nWtcAR2ttrjs2qgPxJr3IUx2nK4q96KTwzWBGLNLXybkhdOuamtTNeAltDBwCc12Xb8uIY773qsPBOBDBKrsf5xTtfOvy976gPX7_FFVvxSt2-tORcs-YXorg1jWKguff3NZso21YO8E60c92_VBs6HFZKzJ-D-Bz1ZYgwHyM0namGVVil2Bl7QallVnhOtiOSnAZzJnfMFEUzEoTTLH8UNulzDEHp9EgPhHatAhjzFJS4SIftrzAPNONzR-3HgIjW5EKiUgMxRgOjg09Zgsfz73to97aey4lypXXJb_Gh-7Gms9FUBw45fx_wk5JtyjDsk4tOykpM7FVTrPxW6RtG7GfcA08RkfB8nVE4tRV8CUDVp1hGw4bAvwxBI0UKRfOdElfFdwBU2enlSWNJQwaPi1DhWzA34CzhLl6csQ1_2nMn-Jk7vcz5tqzyd8ePfRzZx8IvIUjWxKsygBVKBjdWSkuYMguqPhF2qt_ImFTTz-PQjbdykxnVy3Vl8MTIL_0y0 "messagebus") ![messagebus](https://www.plantuml.com/plantuml/png/ZLLDR-Cs4BtxLqpT0dK09yOMFHK8iFumkhjm4gzbOoy5Z94qbeYbI8Aad7MB_lSE9LjX4WLD3Z4vd7dlpGUfZywZzNKb1py9bSaw9oYzD-wFoSJYuqqXV5cdjIERQUL9-PjCLnCZKOMOQ-TpATB9_FVhTJ3jxbQJ2fqdowRzd2DGAB8t9k3_2hNYu8f1m9S41osbVXIg0CbEW2g7PyV2EbvfO7AGEaCfJupHgNnDC9Zc-L9IGDXYCHfM8hCw8NiK6Gt7y8ihqT3jKXIbJqHEUHBseoi-IOkvbjhU3kVQgWEh8ZkJTHDqO8xpuMCfV6EJL93Aj_J3txOau5gMlnG5T701VdZrKf3psc8HQTdeMh7dJF_eqI8ReTzFRobX_47owU7RVhtS90_t-uVTTlNvVZbYyvgiqsgKrSnOaHt3l5iDft0nDm0dxbQrdmKXQ4-Zx0ExNBpXipfeMw4NMWslu9y1y5zNz14Q4pjFZP4YQvtP_WMFw38hZ1_3L1MrH1lCqz1qrsbmeSCLAYmeT5rOC5OVXEJiNh1T8lRdMiVKNPDRsZ4aneR1ccdjWt5R4XWjb0Tz0CmoSWuuiqu5Y2XHBhN7mi4jn1FqMb35A2nxdzQEAUxQ7Sng5nWtcAR2ttrjs2qgPxJr3IUx2nK4q96KTwzWBGLNLXybkhdOuamtTNeAltDBwCc12Xb8uIY773qsPBOBDBKrsf5xTtfOvy976gPX7_FFVvxSt2-tORcs-YXorg1jWKguff3NZso21YO8E60c92_VBs6HFZKzJ-D-Bz1ZYgwHyM0namGVVil2Bl7QallVnhOtiOSnAZzJnfMFEUzEoTTLH8UNulzDEHp9EgPhHatAhjzFJS4SIftrzAPNONzR-3HgIjW5EKiUgMxRgOjg09Zgsfz73to97aey4lypXXJb_Gh-7Gms9FUBw45fx_wk5JtyjDsk4tOykpM7FVTrPxW6RtG7GfcA08RkfB8nVE4tRV8CUDVp1hGw4bAvwxBI0UKRfOdElfFdwBU2enlSWNJQwaPi1DhWzA34CzhLl6csQ1_2nMn-Jk7vcz5tqzyd8ePfRzZx8IvIUjWxKsygBVKBjdWSkuYMguqPhF2qt_ImFTTz-PQjbdykxnVy3Vl8MTIL_0y0 "messagebus")
### (C4 styled) Sequence diagram ### (C4 styled) Sequence diagram sample
TODO: better sample is missing ... TODO: better sample is missing ...

@ -46,6 +46,9 @@ Therefore we started with the convention that all C4-PlantUML compatible themes
bases on the [`united`](https://raw.githubusercontent.com/plantuml/plantuml/master/themes/puml-theme-united.puml) theme bases on the [`united`](https://raw.githubusercontent.com/plantuml/plantuml/master/themes/puml-theme-united.puml) theme
and contains all additional required C4-PlantUML settings that it can be directly used in all C4-PlantUML diagrams). and contains all additional required C4-PlantUML settings that it can be directly used in all C4-PlantUML diagrams).
> [!WARNING]
> The !theme statement has to be BEFORE the !include statements.
E.g. in order to invoke theme `C4_united` from a remote repository, you have to use the following directive: E.g. in order to invoke theme `C4_united` from a remote repository, you have to use the following directive:
```plantuml ```plantuml

@ -0,0 +1,47 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
!else
' !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
!endif
LAYOUT_LANDSCAPE()
' C4-PlantUML v2.12 fixed a missing rotation bug in Lay_* calls in combination with LAYOUT_LANDSCAPE call
' (details see https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
' If older diagrams should remain unchanged the bugfix can be deactivated with following statement
' !NO_LAY_ROTATE = 1
' Or if the conversion is started via command line with following argument
' -NO_LAY_ROTATE=1
' like
' java -jar plantuml.jar -NO_LAY_ROTATE=1 ...
'!NO_LAY_ROTATE = 1
Person(x, "X")
System(sUp, "S up")
System(sRight, "S right")
System(sDown, "S down")
System(sLeft, "S left")
Rel_U(x, sUp, "uses")
Rel_R(x, sRight, "uses")
Rel_D(x, sDown, "uses")
Rel_L(x, sLeft, "uses")
Person(a, "A")
Person(bUp, "B up")
Person(cRight, "C right")
Person(dDown, "D down")
Person(eLeft, "E left")
Lay_U(a, bUp)
Lay_R(a, cRight)
Lay_D(a, dDown)
Lay_L(a, eLeft)
HIDE_STEREOTYPE()
@enduml

@ -0,0 +1,47 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="./.." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include %get_variable_value("RELATIVE_INCLUDE")/C4_Container.puml
!else
' !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml
!endif
LAYOUT_LANDSCAPE()
' C4-PlantUML v2.12 fixed a missing rotation bug in Lay_* calls in combination with LAYOUT_LANDSCAPE call
' (details see https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
' If older diagrams should remain unchanged the bugfix can be deactivated with following statement
' !NO_LAY_ROTATE = 1
' Or if the conversion is started via command line with following argument
' -NO_LAY_ROTATE=1
' like
' java -jar plantuml.jar -NO_LAY_ROTATE=1 ...
!NO_LAY_ROTATE = 1
Person(x, "X")
System(sUp, "S up")
System(sRight, "S right")
System(sDown, "S down")
System(sLeft, "S left")
Rel_U(x, sUp, "uses")
Rel_R(x, sRight, "uses")
Rel_D(x, sDown, "uses")
Rel_L(x, sLeft, "uses")
Person(a, "A")
Person(bUp, "B up")
Person(cRight, "C right")
Person(dDown, "D down")
Person(eLeft, "E left")
Lay_U(a, bUp)
Lay_R(a, cRight)
Lay_D(a, dDown)
Lay_L(a, eLeft)
HIDE_STEREOTYPE()
@enduml

@ -18,6 +18,7 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia
- [Deployment Diagram](#deployment-diagram) - [Deployment Diagram](#deployment-diagram)
- [Styles](#styles) - [Styles](#styles)
- [Icons](#icons) - [Icons](#icons)
- [Themes](#themes)
## Core Diagrams ## Core Diagrams
@ -82,3 +83,9 @@ Source: [C4_Container Diagram Sample - bigbankplc-styles.puml](C4_Container%20Di
Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml) Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml)
![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLLDS-D44BtxLpJXWBVAZei2BfpMiGt94d-mSZRBITMIslQmenanFRBNHV7VwL5aoN8s5IYuUNgwNp-zVZr-onwTBtFT-qgPL9SPmSxxWdySZHmUhhVAxygaP7AfDPwClqvjFYeqcb0pP9zfbOmctmzN8VGmln_bo9wSXEA9LA0ovAwB2Z-ZZPnWEljmDraked_GnvS5Pkwxjf-Is-56CePSEEM9J-qoseSxRhhyj5oinu-pQ3cV_Q-DgXWUY6rEmnzwtq1f120N8F0xWetLsXwKsO8EBD1aqBbMZkMN1I40sgQezL4m6kcVgrPVjRADq6nBZIzUPzORyY_T_evxVEakvpzqpEJs5xqxOevUJI2p9sqBUagHhxiV_xPyMCVhvIgUBXyN_JTjR1p5qI-pzUHMWdNeyMvz6z_FVfujfXBiUUKrGICAP0gt3dCHsi6TyUGCURX1yobe7XtPKzxhhSYnDVsqP6zpSWEODB-knd0AWzrKGqcaUW07CGOKLI7gAWQOfhOqdg-4nnDqV2E13DsndtuhM9S4hjx0dpq0QFds3vJ4M1II_4W9Z8j2gnIzikPAGkza6WE82XV8ppzCGcnAMed0N55ZBxafr5ODTgh2JT_azE6hSQWDqnMoNGPSe5n5agPfkC8j1HQdxb7gLE47C7uoLGYldDshZ1XGwoztsuZdlGewANy4Rnj56VOAGuro81yEYRC7fWgrTkqpThbDbAPQedauDFmcNm_W8-OewdHvWLQvyfG1bmcJbpd-1vvF1A1wG2ZqULgWIwBJf9-XnmIPmf3gdo4_-lKUEcTl7N7OS0UEjegzgmOEoeXfy-ht07R8Eye0It5TwYWZunLg7WJJ4JDekvK3-VGwOER7PZUVIvXW-ebC9XgguE_LtPTjDhMIvjgwZgQlQ1Va4k1Gqf3ugrcAsMVVfnoLCAm2aZKRpkLSBsGeMyk0LDK4DSnLwYpRZOVPvtGdrY3W9lFqVaYBC_oQLzj1yCt6OKuNsz-E81Zuv8rK0istdGq2CB6bRuqnQ9P-0DwXOQnKE8r27eBtfCyUbdQz7vWuzBvThrUH97RpkC1NSpgh45BhTl62r7QNsFOngU3Qfw96ge8TCpGDaOyc7S2xQBaOdJTlM_xBolX6ibjYxMfqKTuJPWmRP_FgxJfKVwNWRK2kWQSt4u5iCC_qkB1K9B0CD0pH2gCbqdLVXyDbNSdYWBPzD5-l1AYZSgUywxjMcAf-LAlpSNxVYFDMIijS_mq0 "Container diagram for Internet Banking System") ![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLLDS-D44BtxLpJXWBVAZei2BfpMiGt94d-mSZRBITMIslQmenanFRBNHV7VwL5aoN8s5IYuUNgwNp-zVZr-onwTBtFT-qgPL9SPmSxxWdySZHmUhhVAxygaP7AfDPwClqvjFYeqcb0pP9zfbOmctmzN8VGmln_bo9wSXEA9LA0ovAwB2Z-ZZPnWEljmDraked_GnvS5Pkwxjf-Is-56CePSEEM9J-qoseSxRhhyj5oinu-pQ3cV_Q-DgXWUY6rEmnzwtq1f120N8F0xWetLsXwKsO8EBD1aqBbMZkMN1I40sgQezL4m6kcVgrPVjRADq6nBZIzUPzORyY_T_evxVEakvpzqpEJs5xqxOevUJI2p9sqBUagHhxiV_xPyMCVhvIgUBXyN_JTjR1p5qI-pzUHMWdNeyMvz6z_FVfujfXBiUUKrGICAP0gt3dCHsi6TyUGCURX1yobe7XtPKzxhhSYnDVsqP6zpSWEODB-knd0AWzrKGqcaUW07CGOKLI7gAWQOfhOqdg-4nnDqV2E13DsndtuhM9S4hjx0dpq0QFds3vJ4M1II_4W9Z8j2gnIzikPAGkza6WE82XV8ppzCGcnAMed0N55ZBxafr5ODTgh2JT_azE6hSQWDqnMoNGPSe5n5agPfkC8j1HQdxb7gLE47C7uoLGYldDshZ1XGwoztsuZdlGewANy4Rnj56VOAGuro81yEYRC7fWgrTkqpThbDbAPQedauDFmcNm_W8-OewdHvWLQvyfG1bmcJbpd-1vvF1A1wG2ZqULgWIwBJf9-XnmIPmf3gdo4_-lKUEcTl7N7OS0UEjegzgmOEoeXfy-ht07R8Eye0It5TwYWZunLg7WJJ4JDekvK3-VGwOER7PZUVIvXW-ebC9XgguE_LtPTjDhMIvjgwZgQlQ1Va4k1Gqf3ugrcAsMVVfnoLCAm2aZKRpkLSBsGeMyk0LDK4DSnLwYpRZOVPvtGdrY3W9lFqVaYBC_oQLzj1yCt6OKuNsz-E81Zuv8rK0istdGq2CB6bRuqnQ9P-0DwXOQnKE8r27eBtfCyUbdQz7vWuzBvThrUH97RpkC1NSpgh45BhTl62r7QNsFOngU3Qfw96ge8TCpGDaOyc7S2xQBaOdJTlM_xBolX6ibjYxMfqKTuJPWmRP_FgxJfKVwNWRK2kWQSt4u5iCC_qkB1K9B0CD0pH2gCbqdLVXyDbNSdYWBPzD5-l1AYZSgUywxjMcAf-LAlpSNxVYFDMIijS_mq0 "Container diagram for Internet Banking System")
## Themes
Source: [C4_Container Diagram Sample - bigbankplc-themes.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-themes.puml)
![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/fLHDZzis4BthLqotXte1sKQ1d8gYoFgZJO9rrbrjcjoC4JMsYL2aG8xiB8h-zmvfhsGv0OAY9vjFCsyU7n_vEZ1wRckJ_GIyfvfWwrqDyrVZWYkZInWzxGb-E7sIMfPVox370EoW99WjVtzuN0B7AcsLQQkBkZ2vpKwzmhXfhMQgJWD-dR-QfW_Xjoph6lVCJVXbElLudEmqxzko3UILiona4-NgQMFGHhdZaEHDHUWwGXzMzzCQ0vCNQ3EN3jIM_AI9MyjOio7eKAWqxZpMi7KUtWgvjyGmG_jPsnqKpq7KPzcQV71sfDh0hYQVmxpxTtC7Bp2uRTfyATqv74KqDAaHJS80bNAjvN1pcsKdwirCW0hzyqZzB5pN0cvkuUyC07gzeoEL6smQAVv89TmrZT4AMJjx8z0xF60EHUEZ-DLVyuWjoEY3o4ZI0akjWhEDWBPAS3UtVDdu-av43YU71eMkaC-6nclSKPp-ChLGNZUSmvtTjGPzXDVU7NH50T2ORq_PjbP5wMWqFmExpia01usnHtkG3KFftJ6G_qfIxKfjwEp7AYuwKVCVS_Y4DOeLGp5WT9t25zeo4CkX_Gzn9m5GqK4hkfQtA4SLCfOOA9x3-MzKK_nv3uCrEqy1OiB1qqu7zkbCGLl9PPt-v_6cxKKtjhm7vQaYonfDo6EkA0GmRYSBOZNvogWIrMUobJYbOsJNRx-Td8MJCj_t3PpxZaFH526MqVzqwLv-uH7LgCqc943ebkELhE5K4FdZew8JDHfOQULTS5k6vHUrHxiZE7KAxGNdMK7FAfnswx6cgwlRcvjIU3vh9K2tYmkB0KlNSd_GUNTZSs2FDc3QRszozaZcubNex-Q7G27EVlFqj2waS5WN6lnkpI3QiVGyRlEUz6vVklubI7JzFJyp9N1mxDr03CzMvV2kU7W_lHpUZ_oFdPkPLFV2-j0FMHu9gv3U_FJm7Brc2i0kCf-95xEvK7QS5tvSnQWGsW0qZcZYw8KC4dUjOTZN1ab0FxvOFQs5QE3oe7sOkzwOr3yzk_DfTT-PanLl7ZvkxfT_BDylHhVPQs5gQ_Cl "Container diagram for Internet Banking System")

@ -0,0 +1,36 @@
@startuml
' theme from C4-Stdlib (The !theme statement has to be BEFORE the !include statements.)
!theme C4_united from <C4/themes>
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
title Container diagram for Internet Banking System
Person(customer, Customer, "A customer of the bank, with personal bank accounts")
System_Boundary(c1, "Internet Banking") {
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, web_app, "Uses", "HTTPS")
Rel(customer, spa, "Uses", "HTTPS")
Rel(customer, mobile_app, "Uses")
Rel_Neighbor(web_app, spa, "Delivers")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC")
Rel_Back(customer, email_system, "Sends e-mails to")
Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP")
Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
SHOW_LEGEND()
@enduml
Loading…
Cancel
Save