diff --git a/C4.puml b/C4.puml index 0ef8f30..15aee73 100644 --- a/C4.puml +++ b/C4.puml @@ -9,6 +9,16 @@ ' !ENABLE_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 ' ################################## !function C4Version() @@ -1749,32 +1759,64 @@ $getRel($right("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, !return '-[hidden]' + %substr('------------', 0, %intval($distance) + 1) !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) -$from -[hidden]D- $to +$from $l_down("-[hidden]","-") $to !endprocedure !unquoted procedure Lay_Down($from, $to) -$from -[hidden]D- $to +$from $l_down("-[hidden]","-") $to !endprocedure !unquoted procedure Lay_U($from, $to) -$from -[hidden]U- $to +$from $l_up("-[hidden]","-") $to !endprocedure !unquoted procedure Lay_Up($from, $to) -$from -[hidden]U- $to +$from $l_up("-[hidden]","-") $to !endprocedure !unquoted procedure Lay_R($from, $to) -$from -[hidden]R- $to +$from $l_right("-[hidden]","-") $to !endprocedure !unquoted procedure Lay_Right($from, $to) -$from -[hidden]R- $to +$from $l_right("-[hidden]","-") $to !endprocedure !unquoted procedure Lay_L($from, $to) -$from -[hidden]L- $to +$from $l_left("-[hidden]","-") $to !endprocedure !unquoted procedure Lay_Left($from, $to) -$from -[hidden]L- $to +$from $l_left("-[hidden]","-") $to !endprocedure ' PlantUML bug: lines which does "not match" with the orientation/direction of the diagram diff --git a/README.md b/README.md index 0128e36..1e3eeeb 100644 --- a/README.md +++ b/README.md @@ -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) - [Now let's create a C4 Container diagram](#now-lets-create-a-c4-container-diagram) - [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) - [Component diagram](#component-diagram) - [Dynamic diagram](#dynamic-diagram) @@ -39,11 +39,13 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet - [Samples](#samples) - [Relationship Types](#relationship-types) - [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) - [Sprites and other images](#sprites-and-other-images) - [Custom tags/stereotypes support and skinparam updates](#custom-tagsstereotypes-support-and-skinparam-updates) - [Element specific tag definitions](#element-specific-tag-definitions) - [Boundary specific tag definitions](#boundary-specific-tag-definitions) + - [Define a new legend title](#define-a-new-legend-title) - [Comments](#comments) - [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) @@ -59,6 +61,7 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet - [Advanced Samples](#advanced-samples) - [techtribes.js](#techtribesjs) - [Message Bus and Microservices](#message-bus-and-microservices) + - [(C4 styled) Sequence diagram sample](#c4-styled-sequence-diagram-sample) - [Background](#background) - [License](#license) - [📄 Layout Options](LayoutOptions.md#layout-options) @@ -66,6 +69,12 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet - samples - [📄 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 ### 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") +### 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 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") -### (C4 styled) Sequence diagram +### (C4 styled) Sequence diagram sample TODO: better sample is missing ... diff --git a/Themes.md b/Themes.md index d7ed20b..efa72bd 100644 --- a/Themes.md +++ b/Themes.md @@ -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 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: ```plantuml diff --git a/percy/TestLayoutLandscapeWithLay.puml b/percy/TestLayoutLandscapeWithLay.puml new file mode 100644 index 0000000..da6e52f --- /dev/null +++ b/percy/TestLayoutLandscapeWithLay.puml @@ -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 diff --git a/percy/TestLayoutLandscapeWithLayNoRotate.puml b/percy/TestLayoutLandscapeWithLayNoRotate.puml new file mode 100644 index 0000000..0fb0eff --- /dev/null +++ b/percy/TestLayoutLandscapeWithLayNoRotate.puml @@ -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 diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index ed98e4e..b1c74a5 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -18,6 +18,7 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia - [Deployment Diagram](#deployment-diagram) - [Styles](#styles) - [Icons](#icons) + - [Themes](#themes) ## 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) ![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") diff --git a/samples/C4_Container Diagram Sample - bigbankplc-themes.puml b/samples/C4_Container Diagram Sample - bigbankplc-themes.puml new file mode 100644 index 0000000..2b8ab83 --- /dev/null +++ b/samples/C4_Container Diagram Sample - bigbankplc-themes.puml @@ -0,0 +1,36 @@ +@startuml +' theme from C4-Stdlib (The !theme statement has to be BEFORE the !include statements.) +!theme C4_united from + +!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 \ No newline at end of file