From e050eb38387df970683d9151e1472cb8f44868e6 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Thu, 8 Apr 2021 17:42:50 +0200 Subject: [PATCH 01/14] #126: C4 relationships support description, sprite/openIconic and tags (7 - update sample with scaled sprites) #49, #139: Persons can be displayed as portraits - SHOW_PERSON_PORTRAIT() --- C4.puml | 14 ++++++++--- C4_Context.puml | 16 +++++++++++++ LayoutOptions.md | 29 +++++++++++++++++++++-- README.md | 44 +++++++++++++++++++++++------------ percy/TestPersonPortrait.puml | 32 +++++++++++++++++++++++++ 5 files changed, 115 insertions(+), 20 deletions(-) create mode 100644 percy/TestPersonPortrait.puml diff --git a/C4.puml b/C4.puml index 45106c07..5509fab5 100644 --- a/C4.puml +++ b/C4.puml @@ -50,12 +50,18 @@ skinparam queue { shadowing false } -skinparam Arrow { +skinparam arrow { Color $ARROW_COLOR FontColor $ARROW_COLOR FontSize 12 } +skinparam actor { + StereotypeFontSize 12 + shadowing false + style awesome +} + ' Some boundary skinparam have to be set a package skinparams too (PlantUML uses internal packages) skinparam package { StereotypeFontSize 0 @@ -147,6 +153,8 @@ skinparam rectangle<> { !$tagSkin = $elementTagSkinparams("rectangle", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !$tagSkin = $tagSkin + $elementTagSkinparams("database", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + ' actor has style awesome, therefore $fontColor is ignored and text uses $bgColor too + !$tagSkin = $tagSkin + $elementTagSkinparams("actor", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing) $tagSkin !endprocedure @@ -159,7 +167,7 @@ $tagSkin !endfunction !unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor) - !$elementSkin = "skinparam Arrow<<" + $tagStereo + ">> {" + %newline() + !$elementSkin = "skinparam arrow<<" + $tagStereo + ">> {" + %newline() !$elementSkin = $elementSkin + " Color " !if ($lineColor!="") !$elementSkin = $elementSkin + ColorNoHash($lineColor) @@ -306,7 +314,7 @@ $defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing) ' update the style of default relation, it has to set both properties (combined statement not working) !unquoted procedure UpdateRelStyle($textColor, $lineColor) - !$elementSkin = "skinparam Arrow {" + %newline() + !$elementSkin = "skinparam arrow {" + %newline() !$elementSkin = $elementSkin + " Color " + $lineColor + %newline() !$elementSkin = $elementSkin + " FontColor " + $textColor + %newline() !$elementSkin = $elementSkin + "}" + %newline() diff --git a/C4_Context.puml b/C4_Context.puml index 850f470a..820d961b 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -153,9 +153,11 @@ endlegend !endprocedure !global $defaultPersonSprite = "person" +!global $portraitPerson = "false" !procedure HIDE_PERSON_SPRITE() !$defaultPersonSprite = "" + !$portraitPerson = "false" !endprocedure !unquoted procedure SHOW_PERSON_SPRITE($sprite="") @@ -164,6 +166,12 @@ endlegend !else !$defaultPersonSprite = $sprite !endif + !$portraitPerson = "false" +!endprocedure + +!unquoted procedure SHOW_PERSON_PORTRAIT() + !$defaultPersonSprite = "" + !$portraitPerson = "true" !endprocedure ' Elements @@ -203,11 +211,19 @@ endlegend !endfunction !unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="", $link="") +!if ($portraitPerson == "true") && ($sprite == "") +actor "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) +!else rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) +!endif !endprocedure !unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="") +!if ($portraitPerson == "true") && ($sprite == "") +actor "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) +!else rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) +!endif !endprocedure !unquoted procedure System($alias, $label, $descr="", $sprite="", $tags="", $link="") diff --git a/LayoutOptions.md b/LayoutOptions.md index 71445ef2..a4724558 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -166,13 +166,14 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![HIDE_STEREOTYPE Sample](https://www.plantuml.com/plantuml/png/NL1DIyD05BplhrZheIdKX8edJuqrMC5gQ5B5KzWcJxkmN-o-DHJnl_j2gnNtCl1ctfkPdGSK7gDMV7b_MpHLNQoBf_grB7Wbj5F0pgHfLUo0xn1TkCuoB_hqNU8kRcC0trg3O31jhSv4vwKm7ogwc2skBaeb36vM3vaI205fr2n8BQG1dpgoPEoVPp9Xh0GVh4b4fwMPyb4-e0pe1Le_ch1g7n1qSsEZwOJV9-rioiU7gEC9_sIStgzBqiEs4SxHdHVOyjmv9Lk1qfeHZHRdKvvNPVfOrBJYWL-cCxvwNWnShfJj0nyQ1ewMKpqdIAAZGabUlEub8dYEKeCYhq3Plexf4ZoGTESe8vAjGVsqEiNQ1DeaNDPrMP5g4FsofpDtW1IZXm7UlDL_L-PWElhCRm00 "HIDE_STEREOTYPE Sample") -## HIDE_PERSON_SPRITE() or SHOW_PERSON_SPRITE(?sprite) +## HIDE_PERSON_SPRITE(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT() -With the macros `HIDE_PERSON_SPRITE()` and `SHOW_PERSON_SPRITE()` it is possible to change the person related default sprite. `SHOW_PERSON_SPRITE()` is the default. +With the macros `HIDE_PERSON_SPRITE()`, `SHOW_PERSON_SPRITE()` and `SHOW_PERSON_PORTRAIT()` it is possible to change the person related default sprite or person layout itself. `SHOW_PERSON_SPRITE()` is the default. - **HIDE_PERSON_SPRITE()**: deactivates the default sprite - **SHOW_PERSON_SPRITE()**: activates the default sprite "person" - **SHOW_PERSON_SPRITE($sprite)**: activates a specific sprite as default sprite +- **SHOW_PERSON_PORTRAIT()**: activates portrait outline instead of a rectangle "person" and "person2" are predefined sprites which can be used as default sprite too. @@ -255,3 +256,27 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![SHOW_PERSON_SPRITE(sprite) Sample](https://www.plantuml.com/plantuml/png/ZL1DQzj04BthLspTGnIm9H9wwYckC4sXIOGbDqUnbYRnmduiCxCOK_hVEzieTkcfkYmpx-EzqHsnHaxE5X-C7ssQG1sO8tskQzJ7wjNm8UqJ0Ox1CtYknk3gQBNFcXNnPCs-RZwjshpQFNoldIO6bDNGY48R3rZ5F_uJlCYa0kbMvl-8QL3J0IPd_5I_-wz214ym9ZHyqZWU3CF82U5sPKHBS_xbcZckRe9pmSzL_WLtabnhQz_Wehj_UXxQpRPxUXowTlkjtvGBeGwvuF2A07uuHo-kYw85fE1BdQikrMATNqECcWCAtfs8mGrVGlAJnbCvtYpLLQTTj71rhNuMIhxppogFi1zqZEBp37krZj6QKRC9VY6hvkDIhRksUjpq8a5GjzMDUlZHP6njRJYIoYL9SL1ZS54BnINBHh9KVpJCW8gD0ojP9Dr-pUrAVWF5PwRbmxPWtw-wrDeHKCwxx_ks4rOcdT6BpLTWaX7oyuB1_Isv0pybPty3 "SHOW_PERSON_SPRITE(sprite)") +**Using SHOW_PERSON_PORTRAIT()** + +```csharp +@startuml SHOW_PERSON_PORTRAIT() Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SHOW_PERSON_PORTRAIT() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +' if a person is combined with a sprite then the rectangle layout is used again +Person(person, "Person with sprite", $sprite="person2") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![SHOW_PERSON_PORTRAIT() Sample](https://www.plantuml.com/plantuml/png/RL1BQzj04BxhLqpTGcHm919wAXIYcj0KcbXOIdCKAsbYB-nZsPd5cDB_tbcKHm_LGRixyptccnjY5JbP0ztTxcbeR_VTxc5eT_j-t_peopLqoWQ3nGVj9fDcX2Dpe2zr7TMfEcW-fZ4HniaxHiVLv6qTZ79PyP9uDdgijvylsrnwlFzPMqMCKKh3LXXAEunL46nH_D--A5gCv5sfPglT1bPDFZLnLEpZQbrqPsAqmpUVtApYkPokDd2np7onXjy5oFTcLPvm75G8elE48pGX63qfrjwjfBJzk86cQwk7srue4U6wkeBxNzlSQupn9u8SbO0zICwW16AJOIrUq9yqCqPWRT685ybiVrwcAtbfYiuBJ9h51UXdK10mvmDDMNCKvWo2EKg7GjICm4Tq-GSH9rRk86P6dNtYp4aaU7MGTA-BMlJ4QdalOekK1FcqtBwk5jXr7cIFvdMzx_jv9AGS_AxlsqvG6VJMVS_p7PdaYVbuZjx-Ixb1DoTh_W80 "SHOW_PERSON_PORTRAIT()") + diff --git a/README.md b/README.md index a3cb959d..d4e90634 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ Rel_R(api, db, "Reads/Writes") @enduml ``` -![Sprites/Icons](http://www.plantuml.com/plantuml/png/hP9BZzem4CVl-HHUr0ChBPj3sqkbIek0Tf5uK1v5FQ59F05NZfrw9l3rEmvXD-f3wg4dE_EV-VyyCtaYXi1rQPCxut9RQrGdvee-f6c0o-FHyAdEQiAGUyVe-37tPLfPSB5cGAojoTBHky4gXdRpMLe2CGO97KPI0SPXUAoYVtAdiP1FDPvydOwMYyq_WBYkG8Uthq0Zwg2GZ05LmJ3IZQVn73LweNnQBhR3_MIpd4_-AwY9mGN9bpXu_pgrMrSfk6DjeMtwT_axdE5lMaa_x84mdF7NyautQNmxjJET3RyjTzl3VhfzFimcdoUBSVy-ILQIu5q_9ZwetgWczYM6djnNw2kBYa_0oY5gLGMlwvn9n3VNJZ_s6a3lFdbPO9ygaEBDQXWzsWRZTNj2LKgACeun592trYpnlCLUDH26kiZikw2RKnS5bH7ZuMeQ_UEmulaCJbia1TOgsPqa4YdhZoRlsiNihjSuw-jCgiV0a05XT9gRF7Zo1QlDbrbZxQscsnWUb0yQWnASFFliJOvo5ZwKmCQxBgopAs4cQxJjlA-psX5Ij6z-FKc8UgD8Vt-M3-jhxysJrmYQqdr4HVa9dPPz_mG0 "Sprites/Icons") +![Sprites/Icons](https://www.plantuml.com/plantuml/png/hP9BZzem4CVl-HHUr0ChBPj3sqkbIek0Tf5uK1v5FQ59F05NZfrw9l3rEmvXD-f3wg4dE_EV-VyyCtaYXi1rQPCxut9RQrGdvee-f6c0o-FHyAdEQiAGUyVe-37tPLfPSB5cGAojoTBHky4gXdRpMLe2CGO97KPI0SPXUAoYVtAdiP1FDPvydOwMYyq_WBYkG8Uthq0Zwg2GZ05LmJ3IZQVn73LweNnQBhR3_MIpd4_-AwY9mGN9bpXu_pgrMrSfk6DjeMtwT_axdE5lMaa_x84mdF7NyautQNmxjJET3RyjTzl3VhfzFimcdoUBSVy-ILQIu5q_9ZwetgWczYM6djnNw2kBYa_0oY5gLGMlwvn9n3VNJZ_s6a3lFdbPO9ygaEBDQXWzsWRZTNj2LKgACeun592trYpnlCLUDH26kiZikw2RKnS5bH7ZuMeQ_UEmulaCJbia1TOgsPqa4YdhZoRlsiNihjSuw-jCgiV0a05XT9gRF7Zo1QlDbrbZxQscsnWUb0yQWnASFFliJOvo5ZwKmCQxBgopAs4cQxJjlA-psX5Ij6z-FKc8UgD8Vt-M3-jhxysJrmYQqdr4HVa9dPPz_mG0 "Sprites/Icons") Similar to icons/sprites is it possible to add links to all elements and relationships: @@ -120,7 +120,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/l > Github does not support `svg` links in README.md. > If you click on the image a new window is opened and there you can use the links. -![Click on the image that the links are working](http://www.plantuml.com/plantuml/svg/jP9FYzH04CNl-HHjhuTPc4dOnPCmiECWUjZLOB9w39rqQHhxJrDL8GpYTxTxizb5F8W3vf0chrBl_NZ93R52dfmjNXW_s4c369aZlQugL7FvpV0uzHC13i4pU2w7uAfebSyxEs9jJLyTN-tgBDtVtLPE4GCcgJkc3MKyO1cpVr43Kl0RfPtnMo4F-JJ4g3YWt8gN5D4mx6LyUEywIzRuxtkv0YqmVoNeRUXNZ5jr2XD_Z6o2fzBfYz5ew9Q4RWdS1TpH6ERVrUKkBulcb8nSzoPCNYiyROQhnDue5os8PNOkgBmKFmgHhgUYDZFqdOen9No1NXnYj6PGcLqcwNYn5OUcBZ-yRTCAWhWkhyJTvsFErq03xkN1sZ2JoD-B10UH2A9246woR39nEnjcGC76GM86-Yyjfzf-FXQtuIKnyJzcdrzNKNm2k_u_prNT4r3kvttRrisVxglbWtyU9QFiysJmJFWEcD8ZvECh1lUFhZVWTP9-0G00 "Click on the image that the links are working") +![Click on the image that the links are working](https://www.plantuml.com/plantuml/svg/jP9FYzH04CNl-HHjhuTPc4dOnPCmiECWUjZLOB9w39rqQHhxJrDL8GpYTxTxizb5F8W3vf0chrBl_NZ93R52dfmjNXW_s4c369aZlQugL7FvpV0uzHC13i4pU2w7uAfebSyxEs9jJLyTN-tgBDtVtLPE4GCcgJkc3MKyO1cpVr43Kl0RfPtnMo4F-JJ4g3YWt8gN5D4mx6LyUEywIzRuxtkv0YqmVoNeRUXNZ5jr2XD_Z6o2fzBfYz5ew9Q4RWdS1TpH6ERVrUKkBulcb8nSzoPCNYiyROQhnDue5os8PNOkgBmKFmgHhgUYDZFqdOen9No1NXnYj6PGcLqcwNYn5OUcBZ-yRTCAWhWkhyJTvsFErq03xkN1sZ2JoD-B10UH2A9246woR39nEnjcGC76GM86-Yyjfzf-FXQtuIKnyJzcdrzNKNm2k_u_prNT4r3kvttRrisVxglbWtyU9QFiysJmJFWEcD8ZvECh1lUFhZVWTP9-0G00 "Click on the image that the links are working") Elements and relations can be decorated with tags and explained via a calculated legend, for example: @@ -227,24 +227,34 @@ You can force the direction of a relationship by using: * `Rel_L`, `Rel_Left` * `Rel_R`, `Rel_Right` -Relationship specific sprites are not down scaled, they requires typically smaller icons. -Therefore if sprite argument starts with `&` an OpenIconic name can be used too (details see https://useiconic.com/open) +Relationship specific sprites are typically smaller and therefore following options are possible: +* use smaller icons (like the $triangle in the following sample) +* use an additional scale factor (direct as part of the argument, or via a variable) +* if sprite argument starts with `&` an OpenIconic name can be used too (details see https://useiconic.com/open) ```csharp @startuml -!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml -Person(user, "User1") -Person(user2, "User2") -System(system, "System") +Person(user, "User") +Person(user1, "User 1") +Person(user2, "User 2") +Person(user3, "User 3") -' if sprite starts with &, sprite defines a OpenIconic, details see https://useiconic.com/open/ -Rel_D(user, system, "requests", "async message", "if sprite starts with &, it defines a OpenIconic like &envelope-closed", $sprite = "&envelope-closed") +System(system, "System") ' normal sprites are too big -Rel_R(user, user2, "informs", "courier", "normal sprites are too big", "person2") +Rel_L(user, user2, "informs", "courier", "normal sprites are too big", $sprite="person2") + +' scaled sprites are ok +Rel_R(user, user3, "informs", "courier", "scaled sprites are OK", $sprite="person2,scale=0.5") -' special smaller sprites have to be used +' combine sprite and scale to a new sprite +!$combinedSprite="person2,scale=0.5" +Rel_R(user, user3, "informs", "courier", "combined sprites are OK", $sprite=$combinedSprite) + + +' special smaller sprites can be used sprite $triangle { 00000000000 00000F00000 @@ -259,11 +269,14 @@ sprite $triangle { 0FFFFFFFFF0 00000000000 } -Rel(user, system, "orders", "http", "only small sprites looks ok, like the small triangle", "triangle") +Rel_R(user1, system, "orders", "http", "small sprites, like the small triangle", $sprite="triangle") + +' if sprite starts with &, sprite defines a OpenIconic, details see https://useiconic.com/open/ +Rel_D(user, user1, "requests", "async message", "if sprite starts with &, it defines a OpenIconic like &envelope-closed", $sprite = "&envelope-closed") @enduml ``` -![Relation with sprite or OpenIconic](https://www.plantuml.com/plantuml/png/VL9XYnCn4Fs-ls8inta7RLUh21M4Gu-0e7YStESZpKxReTbapMJlAE9_Tv9DMoskyoLvRp9lNYQvuQX3x5jRlI1dRDyWR6Fi-7rT1_qytr3SzgkUCHZl8heuDxwjEwjTgfbnR2ojwazlPtU9UlZwfMurHmn2FTxkdMx9pBkaNjrXOE-kajGK9W-ol9vS_yak2hqG-ljUHDehpelm0vP4zH9e3Tm5YWZPEiEpU8JBwO5jS4qE6JHywz1z5jzafi96JPQ1yNH1wKevdI_bvNHTtQDzl2qkZ-q3_kYH8qzahtdl3BJ8h3UOY54_5F_f1Ipj42xHFQ6LdZDZFMCZIXT5vWDCphF3pPqFhRQbcuW6XEWzh6W3sVTzyNsO9hcrL6JNnlU1CAJjk4hATlb15aD3xj1GEYi55iEnPgkVf4XgCFLggcBy8WRIRcCHVbOWyUeK9wp-nkgZ-XzMo-LIZMFrBeKQm-hD46eCbn1yxlTNckZvF_2XmP3dcRvGMhsp-poUqq2jzpi6lviE3nstM0uSffFgZllhwWPTqxVsDm00 "Relation with sprite or OpenIconic") +![Relation with sprite or OpenIconic](https://www.plantuml.com/plantuml/png/bLJVQnin37w_lq8DeMiXoQN9DiWWKDPnCDRHqjBdujXAOkgpRvPlMHdxt-SVSPEikK7rujCdIzyd8TybEMPTMwlYH6gkMe6mTgwXJsLfsMQqacxTBbf2oursgDs8cxfi5DCXPqXEABaehzuFRmFqyFswh1avj1vwl0ePlzoe2TMBMxHaz5aeDO3UWpzwv_lWnHQ5YqDyal798JxD-DJZnVspPwtFA1u-almGUGVQs9efeCPAXmJC8ZXZO25NKDoXUhpUYifiKYzz1lNy9pUjbMZ3PtSL7-qdUDvhei198YRE58g35FCKAU_sAAUTb4VoRxuTOHl4Y_Fnw4FYvQPUI8tRH61Q92bUC33GkDb6YfF-zgguxwpu1hsvMBVYV_YysZ2c1haCe_NpLMXViZdJiC30AOg4GTzPoVHA8VmkmDjuPpk_ElIhpzN__6escrNTVlKnMDNbLzDaLPUVRVnAxvyysRJyBwjhh40RHniUOZZZOF9O1g3a4u9R8oGyZsH_CJAMza4kyoh4nqwmaMuDfuEC2bnAZGGCRXhKNxdHaWyywfXK18IxNuBNAcCu_WQClrt6BhxizYC-P8i_MYGNks3qh3dKICHM681EET8TbP8QFaNz4vMd779b2CMkNPX3xrNqlBX4BTfQ_GK0 "Relation with sprite or OpenIconic") In rare cases, you can force the layout of objects which have no relationships by using: @@ -314,10 +327,11 @@ C4-PlantUML also comes with some layout options to make it easy and reusable to * [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) -C4-PlantUML also comes with some default person sprite options: +C4-PlantUML also comes with some person sprite/portrait options: * [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite) * [SHOW_PERSON_SPRITE(?sprite)](LayoutOptions.md#show_person_sprite) +* [SHOW_PERSON_PORTRAIT()](LayoutOptions.md#show_person_portrait) ## Custom tags/stereotypes support and skinparam updates diff --git a/percy/TestPersonPortrait.puml b/percy/TestPersonPortrait.puml new file mode 100644 index 00000000..5c0a911a --- /dev/null +++ b/percy/TestPersonPortrait.puml @@ -0,0 +1,32 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + + +!$COLOR_A_5 = "#7f3b08" +!$COLOR_A_1 = "#fee0b6" +!$COLOR_NEUTRAL = "#f7f7f7" +UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") + +SHOW_PERSON_PORTRAIT() + +' default header Property, Value +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person(personAlias, "Label", "Optional Description (with default property header)") +Person(personAlias1, "Simple") +Person(personAlias2, "Simple with sprite", $sprite="person2") +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person_Ext(personAliasExt, "Label Ext", "Optional Description (with default property header)") +Person_Ext(personAliasExt1, "Simple Ext") +Person_Ext(personAliasExt2, "Simple Ext with sprite", $sprite="person2") + +SHOW_LEGEND() +@enduml \ No newline at end of file From 9774e06e86a58929abd5ef7aca7dce38bc13b514 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Tue, 13 Apr 2021 00:06:44 +0200 Subject: [PATCH 02/14] #134: Legend fill whitespace with SHOW_LEGEND_UP(), ..._DOWN(), ..._LEFT(), ..._RIGHT() --- C4.puml | 55 +++++++++++++++++++++++++++++---- LayoutOptions.md | 58 +++++++++++++++++++++++++++++++++++ README.md | 3 +- percy/TestRelativeLegend.puml | 24 +++++++++++++++ 4 files changed, 133 insertions(+), 7 deletions(-) create mode 100644 percy/TestRelativeLegend.puml diff --git a/C4.puml b/C4.puml index 27c7b7ab..050db8bc 100644 --- a/C4.puml +++ b/C4.puml @@ -36,6 +36,13 @@ skinparam LegendBorderColor transparent skinparam LegendBackgroundColor transparent skinparam LegendFontColor $LEGEND_FONT_COLOR +skinparam shadowing<> false +' #00000000 is transparent +skinparam rectangle<> { + backgroundcolor #00000000 + bordercolor #00000000 +} + skinparam rectangle { StereotypeFontSize 12 shadowing false @@ -497,6 +504,25 @@ SetPropertyHeader("Property","Value") ' Layout ' ################################## +!procedure $getHideStereotype($hideStereotype) +!if ($hideStereotype=="true") +hide stereotype +!endif +!endprocedure + +!procedure $getLegendTable() +<#00000000,#00000000>|**Legend** | +$showActiveLegendEntries($tagDefaultLegend) +$showActiveLegendEntries($tagCustomLegend) +!endprocedure + +!procedure $getLegendArea($hideStereotype) +$getHideStereotype($hideStereotype) +rectangle legendArea<> [ +$getLegendTable() +] +!endprocedure + !procedure HIDE_STEREOTYPE() hide stereotype !endprocedure @@ -518,13 +544,9 @@ left to right direction ' has to be last call in diagram !unquoted procedure SHOW_LEGEND($hideStereotype="true") -!if ($hideStereotype=="true") -hide stereotype -!endif +$getHideStereotype($hideStereotype) legend right -|**Legend** | -$showActiveLegendEntries($tagDefaultLegend) -$showActiveLegendEntries($tagCustomLegend) +$getLegendTable() endlegend !endprocedure @@ -533,6 +555,27 @@ endlegend SHOW_LEGEND($hideStereotype) !endprocedure +' enables that legend can be located in diagram, has to be last call in diagram +!unquoted procedure SHOW_LEGEND_LEFT($alias, $hideStereotype="true") +$getLegendArea($hideStereotype) +Lay_L($alias, legendArea) +!endprocedure + +!unquoted procedure SHOW_LEGEND_RIGHT($alias, $hideStereotype="true") +$getLegendArea($hideStereotype) +Lay_R($alias, legendArea) +!endprocedure + +!unquoted procedure SHOW_LEGEND_UP($alias, $hideStereotype="true") +$getLegendArea($hideStereotype) +Lay_U($alias, legendArea) +!endprocedure + +!unquoted procedure SHOW_LEGEND_DOWN($alias, $hideStereotype="true") +$getLegendArea($hideStereotype) +Lay_D($alias, legendArea) +!endprocedure + ' Boundaries ' ################################## diff --git a/LayoutOptions.md b/LayoutOptions.md index a4724558..3bc384f3 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -107,6 +107,64 @@ SHOW_LEGEND() ![SHOW_LEGEND Sample](https://www.plantuml.com/plantuml/png/JL5Dgzf05DtFhxYr2oDeWgMhhfgceWkreObr6IR9RHsOZs7cXY3b_VTtWpurcqlEn-4Svdia6MWm6ghThtEptsmtnvzGIUCrYa_ATdhe4Iv4FdxBiY37z9-Yoz0E4KFdBA6bj7CcyrhQAMOLgTUgpOglgtA2JeTzPcGa30mr1JkaiXXIpreXIWpHsKJsHjabpFBfgaX1aWkpXQYkR3JD3pVONePhqgsNCBzrco_Wlm3-7f79Y6qZlUUSCxQGUwzL9qavEsEe-Bo4l2hJuwPcIq3uagxXyAUOk5nhDqQO9aKW1xp7IvQOGPFo6g4U5H4686LGAukHkxtTsoLq8pddBcDI_4RziUfPwnJPoNTNrsN5gadqO9ynMwJ8lpYTly6PLujuUQLa8Tu1 "SHOW_LEGEND Sample") +## SHOW_LEGEND_UP(alias, ?hideStereotype), SHOW_LEGEND_DOWN(...), SHOW_LEGEND_LEFT(...) or SHOW_LEGEND_RIGHT(...) + +`LAYOUT_WITH_LEGEND()` and SHOW_LEGEND(?hideStereotype)` adds the legend at the bottom right of the picture like below and additional whitespace is created. + +```csharp +@startuml Layout With Whitespace Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Container_Ext(A, "Ext. Container A", "techn") +Person(B, "Person B") +System(C, "System C") +Container(D, "Container D", "techn") +Container(E, "Container E", "techn") + +Rel_R(A,B,"uses") +Rel_R(A,C,"uses") +Rel_D(B,C,"uses") +Rel_R(C,D,"uses") +Rel_D(B,D,"uses") +Rel_D(C,E,"uses") + +SHOW_LEGEND() +@enduml +``` + +![Layout With Whitespace Sample](https://www.plantuml.com/plantuml/png/NSwnReCm40RWtK_XCZbI0akdJWbWjGDj8r35Y1mu5IJR8FkiDc_VYw9QWOcxZz-_xkXHEGn6yqfTvu2ydN3axJWX-4Nrm1jb5WtiQRAz3WFm4N7nBrdcr4_wJTbm2HvSFri4Ysa_cspHojuQ3nu7FLsoulbmlj7NUvKPvH4SKLVG2pLPSEb2MSRYtibV5ASzJ-YRyiZyb90XzADDTkmCpizMv4JtaUUapPNQZIX8xoClI6E5AEb7t7WP2rSXkGh9nn2hGNSr7PVla-314_rBiP9Iv1kfwQfoczaAPMGKrhnzjbqbN-L7ANRi27O8Hly1 "Layout With Whitespace Sample") + +Therefore calculated legends can be defined relative to an element too that existing whitespace can be reused like below. + +- **SHOW_LEGEND_UP(alias, ?hideStereotype)**: shows the legend above the alias element +- **SHOW_LEGEND_DOWN(alias, ?hideStereotype)**: shows the legend below the alias element +- **SHOW_LEGEND_LEFT(alias, ?hideStereotype)**: shows the legend left of the alias element +- **SHOW_LEGEND_RIGHT(alias, ?hideStereotype)**: shows the legend right of the alias element + +```csharp +@startuml Compact Legend Layout Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +Container_Ext(A, "Ext. Container A", "techn") +Person(B, "Person B") +System(C, "System C") +Container(D, "Container D", "techn") +Container(E, "Container E", "techn") + +Rel_R(A,B,"uses") +Rel_R(A,C,"uses") +Rel_D(B,C,"uses") +Rel_R(C,D,"uses") +Rel_D(B,D,"uses") +Rel_D(C,E,"uses") + +' legend fills whitespace to the right of container E +SHOW_LEGEND_RIGHT(E) +@enduml +``` + +![Compact Legend Layout Sample](https://www.plantuml.com/plantuml/png/NT51Ru8m50VmUp_56vTXed3PQIS56bt2DeDRTYGLdzAajAHznFdjzumPcvneV_pvvz4k0obFGsSWTrsl6e8IJsWFKAgB6mXsgkiDYWTj6pCS45gYFZodgLVdvAIf7VP3GDyuIsWfQLoNzaRPQ-4YqC7eVPe_BRPN-dmjqqu5GizKv_o5qXPzqdDMY75Vos-ALtE8-9d0oB2As0YRraOpiKKVd8qpfjiICjRTXTkxE6UzBI5d7IlYWb-CEoZ6mhkGl0l9_o5HeQah7YwRH_pNWUbNyZifucmY5KzLJ3DJuOmSHJo2kTt4KHiJuDngmi0tX40Eg4Nm-jGIk2CqV-EAtURzgoxbMhuLTVMotdp4SYQMNCEd_0C0 "Compact Legend Layout Sample") + ## LAYOUT_AS_SKETCH() C4-PlantUML can be especially helpful during up-front design sessions. diff --git a/README.md b/README.md index d4e90634..0fdd6049 100644 --- a/README.md +++ b/README.md @@ -323,7 +323,8 @@ Rel_L(x, s4, "uses") C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams: * [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right) -* [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-SHOW_LEGEND) +* [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-show_legend) +* [SHOW_LEGEND_UP(alias, ?hideStereotype), SHOW_LEGEND_DOWN(...), SHOW_LEGEND_LEFT(...), SHOW_LEGEND_RIGHT(...)](LayoutOptions.md#show_legend_up-show_legend_down-show_legend_left-show_legend_right) * [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) diff --git a/percy/TestRelativeLegend.puml b/percy/TestRelativeLegend.puml new file mode 100644 index 00000000..3b32f825 --- /dev/null +++ b/percy/TestRelativeLegend.puml @@ -0,0 +1,24 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +Container_Ext(A, "Ext. Container A", "techn") +Person(B, "Person B") +System(C, "System C") +Container(D, "Container D", "techn") +Container(E, "Container E", "techn") + +Rel_R(A,B,"uses") +Rel_R(A,C,"uses") +Rel_D(B,C,"uses") +Rel_R(C,D,"uses") +Rel_D(B,D,"uses") +Rel_D(C,E,"uses") + +' legend fills whitespace to the right of container E +SHOW_LEGEND_RIGHT(E) +@enduml From 70e2622d10aa0c1099bfd992ac7277c1851d614c Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Wed, 21 Apr 2021 00:04:35 +0200 Subject: [PATCH 03/14] #134: Legend fill whitespace with SHOW_FLOATING_LEGEND() and Lay_Distance() (instead of SHOW_LEGEND_UP(), ..._DOWN(), ..._LEFT(), ..._RIGHT()) --- C4.puml | 39 ++++++++++------------ LayoutOptions.md | 61 ++++++++++++++++------------------- README.md | 43 +++++++++++++++++++++--- percy/TestFloatingLegend.puml | 22 +++++++++++++ percy/TestRelativeLegend.puml | 24 -------------- 5 files changed, 105 insertions(+), 84 deletions(-) create mode 100644 percy/TestFloatingLegend.puml delete mode 100644 percy/TestRelativeLegend.puml diff --git a/C4.puml b/C4.puml index 050db8bc..74a3c2d3 100644 --- a/C4.puml +++ b/C4.puml @@ -70,7 +70,7 @@ skinparam actor { style awesome } -' Some boundary skinparam have to be set a package skinparams too (PlantUML uses internal packages) +' Some boundary skinparams have to be set as package skinparams too (PlantUML uses internal packages) skinparam package { StereotypeFontSize 6 StereotypeFontColor $BOUNDARY_BG_COLOR @@ -516,9 +516,9 @@ $showActiveLegendEntries($tagDefaultLegend) $showActiveLegendEntries($tagCustomLegend) !endprocedure -!procedure $getLegendArea($hideStereotype) +!procedure $getLegendArea($areaAlias, $hideStereotype) $getHideStereotype($hideStereotype) -rectangle legendArea<> [ +rectangle $areaAlias<> [ $getLegendTable() ] !endprocedure @@ -555,25 +555,9 @@ endlegend SHOW_LEGEND($hideStereotype) !endprocedure -' enables that legend can be located in diagram, has to be last call in diagram -!unquoted procedure SHOW_LEGEND_LEFT($alias, $hideStereotype="true") -$getLegendArea($hideStereotype) -Lay_L($alias, legendArea) -!endprocedure - -!unquoted procedure SHOW_LEGEND_RIGHT($alias, $hideStereotype="true") -$getLegendArea($hideStereotype) -Lay_R($alias, legendArea) -!endprocedure - -!unquoted procedure SHOW_LEGEND_UP($alias, $hideStereotype="true") -$getLegendArea($hideStereotype) -Lay_U($alias, legendArea) -!endprocedure - -!unquoted procedure SHOW_LEGEND_DOWN($alias, $hideStereotype="true") -$getLegendArea($hideStereotype) -Lay_D($alias, legendArea) +' enables that legend can be located in drawing area of the diagram. It has to be last call in diagram followed by Lay_Distance() +!unquoted procedure SHOW_FLOATING_LEGEND($alias="legend", $hideStereotype="true") +$getLegendArea($alias, $hideStereotype) !endprocedure ' Boundaries @@ -711,6 +695,10 @@ $getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link ' Layout Helpers ' ################################## +!function $getHiddenLine($distance) + !return '-[hidden]' + %substr('------------', 0, %intval($distance) + 1) +!endfunction + !unquoted procedure Lay_D($from, $to) $from -[hidden]D- $to !endprocedure @@ -723,3 +711,10 @@ $from -[hidden]R- $to !unquoted procedure Lay_L($from, $to) $from -[hidden]L- $to !endprocedure + +' PlantUML bug: lines which does "not match" with the orientation/direction of the diagram +' uses the same length therefore the method offers no direction at all. +' If a direction is required the Lay_...() methods can be used +!unquoted procedure Lay_Distance($from, $to, $distance="0") +$from $getHiddenLine($distance) $to +!endprocedure diff --git a/LayoutOptions.md b/LayoutOptions.md index 3bc384f3..7859a108 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -107,7 +107,7 @@ SHOW_LEGEND() ![SHOW_LEGEND Sample](https://www.plantuml.com/plantuml/png/JL5Dgzf05DtFhxYr2oDeWgMhhfgceWkreObr6IR9RHsOZs7cXY3b_VTtWpurcqlEn-4Svdia6MWm6ghThtEptsmtnvzGIUCrYa_ATdhe4Iv4FdxBiY37z9-Yoz0E4KFdBA6bj7CcyrhQAMOLgTUgpOglgtA2JeTzPcGa30mr1JkaiXXIpreXIWpHsKJsHjabpFBfgaX1aWkpXQYkR3JD3pVONePhqgsNCBzrco_Wlm3-7f79Y6qZlUUSCxQGUwzL9qavEsEe-Bo4l2hJuwPcIq3uagxXyAUOk5nhDqQO9aKW1xp7IvQOGPFo6g4U5H4686LGAukHkxtTsoLq8pddBcDI_4RziUfPwnJPoNTNrsN5gadqO9ynMwJ8lpYTly6PLujuUQLa8Tu1 "SHOW_LEGEND Sample") -## SHOW_LEGEND_UP(alias, ?hideStereotype), SHOW_LEGEND_DOWN(...), SHOW_LEGEND_LEFT(...) or SHOW_LEGEND_RIGHT(...) +## SHOW_FLOATING_LEGEND(?alias, ?hideStereotype) `LAYOUT_WITH_LEGEND()` and SHOW_LEGEND(?hideStereotype)` adds the legend at the bottom right of the picture like below and additional whitespace is created. @@ -115,55 +115,48 @@ SHOW_LEGEND() @startuml Layout With Whitespace Sample !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -Container_Ext(A, "Ext. Container A", "techn") -Person(B, "Person B") -System(C, "System C") -Container(D, "Container D", "techn") -Container(E, "Container E", "techn") +Person(a, "Person A") +Container(b, "Container B", "techn") +System(c, "System C") +Container(d, "Container D", "techn") +Container_Ext(e, "Ext. Container E", "techn") -Rel_R(A,B,"uses") -Rel_R(A,C,"uses") -Rel_D(B,C,"uses") -Rel_R(C,D,"uses") -Rel_D(B,D,"uses") -Rel_D(C,E,"uses") +Rel_R(a, b, "calls") +Rel_D(b, c, "uses") +Rel_D(c, d, "uses") +Rel_R(d, e, "updates") SHOW_LEGEND() @enduml ``` -![Layout With Whitespace Sample](https://www.plantuml.com/plantuml/png/NSwnReCm40RWtK_XCZbI0akdJWbWjGDj8r35Y1mu5IJR8FkiDc_VYw9QWOcxZz-_xkXHEGn6yqfTvu2ydN3axJWX-4Nrm1jb5WtiQRAz3WFm4N7nBrdcr4_wJTbm2HvSFri4Ysa_cspHojuQ3nu7FLsoulbmlj7NUvKPvH4SKLVG2pLPSEb2MSRYtibV5ASzJ-YRyiZyb90XzADDTkmCpizMv4JtaUUapPNQZIX8xoClI6E5AEb7t7WP2rSXkGh9nn2hGNSr7PVla-314_rBiP9Iv1kfwQfoczaAPMGKrhnzjbqbN-L7ANRi27O8Hly1 "Layout With Whitespace Sample") +![Layout With Whitespace Sample](http://www.plantuml.com/plantuml/png/LSwnReCm40RWtK_XCZbI0qkdJca1jGDjew2A4HdxL91iOzbdjNdx7eb4meJlk_y_SOWe0oPhU2FFSqBUJJZoRfmGefSAU2kjDy0U9gTCqi17H1-VYoB8t_o7icb84OAQ7OB3NCssy4QwvU8-eZRJK9HF--D2tnzDOML424HzIGqvEGYvfonZHmXnTa8-ykpwv2_PZgqfCT1YdVXhHYE26Xs5sZCTjK8HNP-yt5JrfbhTLrVkwpyKG1lwvloMhk_Jx0IcFot_E90gQKmaNR0I98emHRWPWTuObGbWCQybNfYrxrzTtzHlzMSbTkm0JYTh_W40 "Layout With Whitespace Sample") -Therefore calculated legends can be defined relative to an element too that existing whitespace can be reused like below. +Therefore a floating legends can be added via SHOW_FLOATING_LEGEND() and positioned with Lay_Distance() that existing whitespace can be reused like below. -- **SHOW_LEGEND_UP(alias, ?hideStereotype)**: shows the legend above the alias element -- **SHOW_LEGEND_DOWN(alias, ?hideStereotype)**: shows the legend below the alias element -- **SHOW_LEGEND_LEFT(alias, ?hideStereotype)**: shows the legend left of the alias element -- **SHOW_LEGEND_RIGHT(alias, ?hideStereotype)**: shows the legend right of the alias element +- `SHOW_FLOATING_LEGEND(?alias, ?hideStereotype): shows the legend in the drawing area ```csharp @startuml Compact Legend Layout Sample !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -Container_Ext(A, "Ext. Container A", "techn") -Person(B, "Person B") -System(C, "System C") -Container(D, "Container D", "techn") -Container(E, "Container E", "techn") - -Rel_R(A,B,"uses") -Rel_R(A,C,"uses") -Rel_D(B,C,"uses") -Rel_R(C,D,"uses") -Rel_D(B,D,"uses") -Rel_D(C,E,"uses") - -' legend fills whitespace to the right of container E -SHOW_LEGEND_RIGHT(E) +Person(a, "Person A") +Container(b, "Container B", "techn") +System(c, "System C") +Container(d, "Container D", "techn") +Container_Ext(e, "Ext. Container E", "techn") + +Rel_R(a, b, "calls") +Rel_D(b, c, "uses") +Rel_D(c, d, "uses") +Rel_R(d, e, "updates") + +SHOW_FLOATING_LEGEND() +Lay_Distance(legend, e, 1) @enduml ``` -![Compact Legend Layout Sample](https://www.plantuml.com/plantuml/png/NT51Ru8m50VmUp_56vTXed3PQIS56bt2DeDRTYGLdzAajAHznFdjzumPcvneV_pvvz4k0obFGsSWTrsl6e8IJsWFKAgB6mXsgkiDYWTj6pCS45gYFZodgLVdvAIf7VP3GDyuIsWfQLoNzaRPQ-4YqC7eVPe_BRPN-dmjqqu5GizKv_o5qXPzqdDMY75Vos-ALtE8-9d0oB2As0YRraOpiKKVd8qpfjiICjRTXTkxE6UzBI5d7IlYWb-CEoZ6mhkGl0l9_o5HeQah7YwRH_pNWUbNyZifucmY5KzLJ3DJuOmSHJo2kTt4KHiJuDngmi0tX40Eg4Nm-jGIk2CqV-EAtURzgoxbMhuLTVMotdp4SYQMNCEd_0C0 "Compact Legend Layout Sample") +![Compact Legend Layout Sample](http://www.plantuml.com/plantuml/png/LP51Q_im3CNl_XJ-z-J2lmc3dNPgbsJT86jBkx6ZSMtH1cp7s0fRl_ta5TBcPFcdzuHuMYPK4GTdUTMxe3Jo5axW3M_LfH-G7vGB5jY_pcix6E1dn92UoZAgx-BKuNau3WcYxZs2nqBthWnM-JnmaT3OxbXMZujTHf_lRUbKGeY4P4KErNc8HI0jOpk8gVT2_UUpQybNipaRLU98ZV77dsVqHT1dJwB3XOOweGbTIrvDh6PYhU-j8vRD3mgW3hq5lwcRUpNRWvNxl6FUHYjh4z4CQq544wGmReo0cJ0o4u3CWb7uXzdXTVibNzhjwkDjivPjisusjPWpob_M7Lt7Qn0st-HgVPYp9TKKsYy0 "Compact Legend Layout Sample") ## LAYOUT_AS_SKETCH() diff --git a/README.md b/README.md index 0fdd6049..71347069 100644 --- a/README.md +++ b/README.md @@ -280,10 +280,10 @@ Rel_D(user, user1, "requests", "async message", "if sprite starts with &, it def In rare cases, you can force the layout of objects which have no relationships by using: -* `Lay_U` -* `Lay_D` -* `Lay_L` -* `Lay_R` +* `Lay_U(from, to)` +* `Lay_D(from, to)` +* `Lay_L(from, to)` +* `Lay_R(from, to)` In following sample a person uses different systems, and group of persons which have no relations @@ -318,6 +318,41 @@ Rel_L(x, s4, "uses") ![Relation versus Layout](https://www.plantuml.com/plantuml/png/LSt1QeD04CRnkq-HvgJGA55FFQLLeGLBHIEq9rbrQ8HrbTrPshnzPmn5Svl_3_RRaq6XqOxIUHXK9sqFkmlYR9w2G8iV_tl0Yssj0TrD2a6XtqrZC4kX-Ct1O2-7DaZYGy5Kl-V1A0o29ceIUY461TgVUV_rBSsQwfoLsSVvgyXSpt4Aq6PIhdZSxP_ttd-sb2zhTfJ9cZrbkYPGPfHEBgvDpLEjjzmbtztjJldkRtVEDwoV_zB09mrKLuCmkkP8NHqt43A46uWOeWt43361Ku9iQfvSPgm1GyfOBXZUOxfWT8_vWl6A9r2z7UKV "Relation versus Layout") +(In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legend)) a greater distance between an element and the +e.g. floating legend could be required that all e.g. corners of the drawing area can be reached. + +* `Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment. (Lay_Distance(from,to,0) equals Lay_D(from, to)) + +In following sample the floating legend should be in the left bottom corner of the drawing are. +(The normal SHOW_LEGEND() call requires no extra Lay_Distance() call and the legend is automatically drawn below the diagram on the right side) + +``` +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons +!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5 +!include DEVICONS/angular.puml +!include DEVICONS/java.puml +!include DEVICONS/msql_server.puml +!include FONTAWESOME/users.puml + +Person(user, "Customer", "People that need products", $sprite="users") +Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular") +Container(api, "API", "java", "Handles all business logic", $sprite="java") +ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server") + +Rel(user, spa, "Uses") +Rel(spa, api, "Uses") +Rel_R(api, db, "Reads/Writes") + +SHOW_FLOATING_LEGEND() +Lay_Distance(legend, db, 1) +@enduml +``` + +![db below legend, 1 unit distance](http://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCGcxKQjAFVHa-ytCUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VcJEuq7UQhnvDjqj5ni_a68gn9q-F0cQAJQFqX7dyfW6Eccf_4SQ_IgyhXSR8UxoMOvd_nNeIi65oHVOF_JBRKtLocuOsMXCVrd-JkSuM-rWdxOZ32SyVVnbfiq_fsQJ5TozQuReNlL6LN4li3GaViAVMbHyGbOEKIjok1rbJD9yLtjwKldIjNf9Q-hwb89ChnP3ID7OoLUjoTKXRGeunZ30VA6cWNF6zcw1gAXBf9oM-Z6r9Q2qWZnS3MD_36MU3w3qnP9WRLAjYIDHChweydRTB6xpJNUT_LUfiV0i0V2o3GtUV3a3wmsNsTNQcyrtMAuLpve34havDjdRtAKy-130MoyQukrjYAQoHfjatUTrGjXZ332Lo3QQgFPkdPw_U0QGLEwYyInd6oUbxliSROSRgUBfsmsUPeinjrUCeEVsTWGWyknQ_68JjS4xtl9Wpnazxy0 "db below legend, 1 unit distance") + ## Layout Options C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams: diff --git a/percy/TestFloatingLegend.puml b/percy/TestFloatingLegend.puml new file mode 100644 index 00000000..24e5f5bc --- /dev/null +++ b/percy/TestFloatingLegend.puml @@ -0,0 +1,22 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +Person(a, "Person A") +Container(b, "Container B", "techn") +System(c, "System C") +Container(d, "Container D", "techn") +Container_Ext(e, "Ext. Container E", "techn") + +Rel_R(a, b, "calls") +Rel_D(b, c, "uses") +Rel_D(c, d, "uses") +Rel_R(d, e, "updates") + +SHOW_FLOATING_LEGEND() +Lay_Distance(legend, e, 1) +@enduml diff --git a/percy/TestRelativeLegend.puml b/percy/TestRelativeLegend.puml deleted file mode 100644 index 3b32f825..00000000 --- a/percy/TestRelativeLegend.puml +++ /dev/null @@ -1,24 +0,0 @@ -@startuml -' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally -!if %variable_exists("RELATIVE_INCLUDE") - !include ./../C4_Container.puml -!else - !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml -!endif - -Container_Ext(A, "Ext. Container A", "techn") -Person(B, "Person B") -System(C, "System C") -Container(D, "Container D", "techn") -Container(E, "Container E", "techn") - -Rel_R(A,B,"uses") -Rel_R(A,C,"uses") -Rel_D(B,C,"uses") -Rel_R(C,D,"uses") -Rel_D(B,D,"uses") -Rel_D(C,E,"uses") - -' legend fills whitespace to the right of container E -SHOW_LEGEND_RIGHT(E) -@enduml From e6e7cd3d75eeb1fca49bcedba22547cd895418d0 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Wed, 21 Apr 2021 00:15:01 +0200 Subject: [PATCH 04/14] #134: Legend fill whitespace with SHOW_FLOATING_LEGEND() and Lay_Distance() (2 - fix https://) --- LayoutOptions.md | 4 ++-- README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/LayoutOptions.md b/LayoutOptions.md index 7859a108..18986561 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -130,7 +130,7 @@ SHOW_LEGEND() @enduml ``` -![Layout With Whitespace Sample](http://www.plantuml.com/plantuml/png/LSwnReCm40RWtK_XCZbI0qkdJca1jGDjew2A4HdxL91iOzbdjNdx7eb4meJlk_y_SOWe0oPhU2FFSqBUJJZoRfmGefSAU2kjDy0U9gTCqi17H1-VYoB8t_o7icb84OAQ7OB3NCssy4QwvU8-eZRJK9HF--D2tnzDOML424HzIGqvEGYvfonZHmXnTa8-ykpwv2_PZgqfCT1YdVXhHYE26Xs5sZCTjK8HNP-yt5JrfbhTLrVkwpyKG1lwvloMhk_Jx0IcFot_E90gQKmaNR0I98emHRWPWTuObGbWCQybNfYrxrzTtzHlzMSbTkm0JYTh_W40 "Layout With Whitespace Sample") +![Layout With Whitespace Sample](https://www.plantuml.com/plantuml/png/LSwnReCm40RWtK_XCZbI0qkdJca1jGDjew2A4HdxL91iOzbdjNdx7eb4meJlk_y_SOWe0oPhU2FFSqBUJJZoRfmGefSAU2kjDy0U9gTCqi17H1-VYoB8t_o7icb84OAQ7OB3NCssy4QwvU8-eZRJK9HF--D2tnzDOML424HzIGqvEGYvfonZHmXnTa8-ykpwv2_PZgqfCT1YdVXhHYE26Xs5sZCTjK8HNP-yt5JrfbhTLrVkwpyKG1lwvloMhk_Jx0IcFot_E90gQKmaNR0I98emHRWPWTuObGbWCQybNfYrxrzTtzHlzMSbTkm0JYTh_W40 "Layout With Whitespace Sample") Therefore a floating legends can be added via SHOW_FLOATING_LEGEND() and positioned with Lay_Distance() that existing whitespace can be reused like below. @@ -156,7 +156,7 @@ Lay_Distance(legend, e, 1) @enduml ``` -![Compact Legend Layout Sample](http://www.plantuml.com/plantuml/png/LP51Q_im3CNl_XJ-z-J2lmc3dNPgbsJT86jBkx6ZSMtH1cp7s0fRl_ta5TBcPFcdzuHuMYPK4GTdUTMxe3Jo5axW3M_LfH-G7vGB5jY_pcix6E1dn92UoZAgx-BKuNau3WcYxZs2nqBthWnM-JnmaT3OxbXMZujTHf_lRUbKGeY4P4KErNc8HI0jOpk8gVT2_UUpQybNipaRLU98ZV77dsVqHT1dJwB3XOOweGbTIrvDh6PYhU-j8vRD3mgW3hq5lwcRUpNRWvNxl6FUHYjh4z4CQq544wGmReo0cJ0o4u3CWb7uXzdXTVibNzhjwkDjivPjisusjPWpob_M7Lt7Qn0st-HgVPYp9TKKsYy0 "Compact Legend Layout Sample") +![Compact Legend Layout Sample](https://www.plantuml.com/plantuml/png/LP51Q_im3CNl_XJ-z-J2lmc3dNPgbsJT86jBkx6ZSMtH1cp7s0fRl_ta5TBcPFcdzuHuMYPK4GTdUTMxe3Jo5axW3M_LfH-G7vGB5jY_pcix6E1dn92UoZAgx-BKuNau3WcYxZs2nqBthWnM-JnmaT3OxbXMZujTHf_lRUbKGeY4P4KErNc8HI0jOpk8gVT2_UUpQybNipaRLU98ZV77dsVqHT1dJwB3XOOweGbTIrvDh6PYhU-j8vRD3mgW3hq5lwcRUpNRWvNxl6FUHYjh4z4CQq544wGmReo0cJ0o4u3CWb7uXzdXTVibNzhjwkDjivPjisusjPWpob_M7Lt7Qn0st-HgVPYp9TKKsYy0 "Compact Legend Layout Sample") ## LAYOUT_AS_SKETCH() diff --git a/README.md b/README.md index 71347069..fe881d0e 100644 --- a/README.md +++ b/README.md @@ -351,7 +351,7 @@ Lay_Distance(legend, db, 1) @enduml ``` -![db below legend, 1 unit distance](http://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCGcxKQjAFVHa-ytCUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VcJEuq7UQhnvDjqj5ni_a68gn9q-F0cQAJQFqX7dyfW6Eccf_4SQ_IgyhXSR8UxoMOvd_nNeIi65oHVOF_JBRKtLocuOsMXCVrd-JkSuM-rWdxOZ32SyVVnbfiq_fsQJ5TozQuReNlL6LN4li3GaViAVMbHyGbOEKIjok1rbJD9yLtjwKldIjNf9Q-hwb89ChnP3ID7OoLUjoTKXRGeunZ30VA6cWNF6zcw1gAXBf9oM-Z6r9Q2qWZnS3MD_36MU3w3qnP9WRLAjYIDHChweydRTB6xpJNUT_LUfiV0i0V2o3GtUV3a3wmsNsTNQcyrtMAuLpve34havDjdRtAKy-130MoyQukrjYAQoHfjatUTrGjXZ332Lo3QQgFPkdPw_U0QGLEwYyInd6oUbxliSROSRgUBfsmsUPeinjrUCeEVsTWGWyknQ_68JjS4xtl9Wpnazxy0 "db below legend, 1 unit distance") +![db below legend, 1 unit distance](https://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCGcxKQjAFVHa-ytCUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VcJEuq7UQhnvDjqj5ni_a68gn9q-F0cQAJQFqX7dyfW6Eccf_4SQ_IgyhXSR8UxoMOvd_nNeIi65oHVOF_JBRKtLocuOsMXCVrd-JkSuM-rWdxOZ32SyVVnbfiq_fsQJ5TozQuReNlL6LN4li3GaViAVMbHyGbOEKIjok1rbJD9yLtjwKldIjNf9Q-hwb89ChnP3ID7OoLUjoTKXRGeunZ30VA6cWNF6zcw1gAXBf9oM-Z6r9Q2qWZnS3MD_36MU3w3qnP9WRLAjYIDHChweydRTB6xpJNUT_LUfiV0i0V2o3GtUV3a3wmsNsTNQcyrtMAuLpve34havDjdRtAKy-130MoyQukrjYAQoHfjatUTrGjXZ332Lo3QQgFPkdPw_U0QGLEwYyInd6oUbxliSROSRgUBfsmsUPeinjrUCeEVsTWGWyknQ_68JjS4xtl9Wpnazxy0 "db below legend, 1 unit distance") ## Layout Options From fb5c125172b9ac94071eb946a63be52555591416 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Wed, 21 Apr 2021 22:50:37 +0200 Subject: [PATCH 05/14] #134: Legend fill whitespace with SHOW_FLOATING_LEGEND() and Lay_Distance() (3 - legend is reserved; LEGEND() is new default alias) --- C4.puml | 9 ++++++++- LayoutOptions.md | 9 +++++---- README.md | 6 +++--- percy/TestFloatingLegend.puml | 2 +- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/C4.puml b/C4.puml index 74a3c2d3..58aab7ed 100644 --- a/C4.puml +++ b/C4.puml @@ -555,8 +555,15 @@ endlegend SHOW_LEGEND($hideStereotype) !endprocedure +' legend is reserved and cannot be uses as alias of SHOW_FLOATING_LEGEND() therefore +' LEGEND() is introduced. It returns the default name of the floating alias "floating_legend_alias" +' and can be used in the Lay_Distance() calls +!function LEGEND() +!return "floating_legend_alias" +!endfunction + ' enables that legend can be located in drawing area of the diagram. It has to be last call in diagram followed by Lay_Distance() -!unquoted procedure SHOW_FLOATING_LEGEND($alias="legend", $hideStereotype="true") +!unquoted procedure SHOW_FLOATING_LEGEND($alias=LEGEND(), $hideStereotype="true") $getLegendArea($alias, $hideStereotype) !endprocedure diff --git a/LayoutOptions.md b/LayoutOptions.md index 18986561..4dbc3b67 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -107,7 +107,7 @@ SHOW_LEGEND() ![SHOW_LEGEND Sample](https://www.plantuml.com/plantuml/png/JL5Dgzf05DtFhxYr2oDeWgMhhfgceWkreObr6IR9RHsOZs7cXY3b_VTtWpurcqlEn-4Svdia6MWm6ghThtEptsmtnvzGIUCrYa_ATdhe4Iv4FdxBiY37z9-Yoz0E4KFdBA6bj7CcyrhQAMOLgTUgpOglgtA2JeTzPcGa30mr1JkaiXXIpreXIWpHsKJsHjabpFBfgaX1aWkpXQYkR3JD3pVONePhqgsNCBzrco_Wlm3-7f79Y6qZlUUSCxQGUwzL9qavEsEe-Bo4l2hJuwPcIq3uagxXyAUOk5nhDqQO9aKW1xp7IvQOGPFo6g4U5H4686LGAukHkxtTsoLq8pddBcDI_4RziUfPwnJPoNTNrsN5gadqO9ynMwJ8lpYTly6PLujuUQLa8Tu1 "SHOW_LEGEND Sample") -## SHOW_FLOATING_LEGEND(?alias, ?hideStereotype) +## SHOW_FLOATING_LEGEND(?alias, ?hideStereotype) and LEGEND() `LAYOUT_WITH_LEGEND()` and SHOW_LEGEND(?hideStereotype)` adds the legend at the bottom right of the picture like below and additional whitespace is created. @@ -132,9 +132,10 @@ SHOW_LEGEND() ![Layout With Whitespace Sample](https://www.plantuml.com/plantuml/png/LSwnReCm40RWtK_XCZbI0qkdJca1jGDjew2A4HdxL91iOzbdjNdx7eb4meJlk_y_SOWe0oPhU2FFSqBUJJZoRfmGefSAU2kjDy0U9gTCqi17H1-VYoB8t_o7icb84OAQ7OB3NCssy4QwvU8-eZRJK9HF--D2tnzDOML424HzIGqvEGYvfonZHmXnTa8-ykpwv2_PZgqfCT1YdVXhHYE26Xs5sZCTjK8HNP-yt5JrfbhTLrVkwpyKG1lwvloMhk_Jx0IcFot_E90gQKmaNR0I98emHRWPWTuObGbWCQybNfYrxrzTtzHlzMSbTkm0JYTh_W40 "Layout With Whitespace Sample") -Therefore a floating legends can be added via SHOW_FLOATING_LEGEND() and positioned with Lay_Distance() that existing whitespace can be reused like below. +Therefore a floating legend can be added via SHOW_FLOATING_LEGEND(), positioned with Lay_Distance() and existing whitespace is reused like below. - `SHOW_FLOATING_LEGEND(?alias, ?hideStereotype): shows the legend in the drawing area +- `LEGEND()`: is the default alias of the created floating legend and can be used in Lay_Distance() call ```csharp @startuml Compact Legend Layout Sample @@ -152,11 +153,11 @@ Rel_D(c, d, "uses") Rel_R(d, e, "updates") SHOW_FLOATING_LEGEND() -Lay_Distance(legend, e, 1) +Lay_Distance(LEGEND(), e, 1) @enduml ``` -![Compact Legend Layout Sample](https://www.plantuml.com/plantuml/png/LP51Q_im3CNl_XJ-z-J2lmc3dNPgbsJT86jBkx6ZSMtH1cp7s0fRl_ta5TBcPFcdzuHuMYPK4GTdUTMxe3Jo5axW3M_LfH-G7vGB5jY_pcix6E1dn92UoZAgx-BKuNau3WcYxZs2nqBthWnM-JnmaT3OxbXMZujTHf_lRUbKGeY4P4KErNc8HI0jOpk8gVT2_UUpQybNipaRLU98ZV77dsVqHT1dJwB3XOOweGbTIrvDh6PYhU-j8vRD3mgW3hq5lwcRUpNRWvNxl6FUHYjh4z4CQq544wGmReo0cJ0o4u3CWb7uXzdXTVibNzhjwkDjivPjisusjPWpob_M7Lt7Qn0st-HgVPYp9TKKsYy0 "Compact Legend Layout Sample") +![Compact Legend Layout Sample](https://www.plantuml.com/plantuml/png/RP7VQ-em5CVVyrUavS9juTwMmPu60vtjtA1JqOqzXfWURLXC9Jbb-j_lr6gri9Ss-Nn_d3OPUPGEcvrXWRRAD2Nm2d7l7zBKoUzagx5greq7fsgBO35HzIxzqavL7gjqSlz_OQJ5ZxSYXGFf9PG4nOJCKbjmoRwjPcm1pjSsalzus2tvE8nPRulM9FGx_XJI5a5LbaoheqVOHOfGj-IJGRGSHBFRQ8z5Vi08IA5tmg_k_DRDbc34ilt6DL4bZV54MvX5H1H1EeWh8r0EsJ8Y02tRbn9Fc0MRnYhKzCT5FirdMHIpm04spl9mOsg9scw5WItOCcG1FIz-jdgPVuhdOZv-VvrDnJbzAObP8OyYqtHzLa6FJ-FlQ2pxouC_7UMFFEm62Eb0XYJzMdssnwGFki_yKZsY8hhK7m00 "Compact Legend Layout Sample") ## LAYOUT_AS_SKETCH() diff --git a/README.md b/README.md index fe881d0e..4ff6bc97 100644 --- a/README.md +++ b/README.md @@ -321,7 +321,7 @@ Rel_L(x, s4, "uses") (In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legend)) a greater distance between an element and the e.g. floating legend could be required that all e.g. corners of the drawing area can be reached. -* `Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment. (Lay_Distance(from,to,0) equals Lay_D(from, to)) +* `Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment (Lay_Distance(from,to,0) equals Lay_D(from, to)). The default alias of the floating legend is LEGEND(). In following sample the floating legend should be in the left bottom corner of the drawing are. (The normal SHOW_LEGEND() call requires no extra Lay_Distance() call and the legend is automatically drawn below the diagram on the right side) @@ -347,11 +347,11 @@ Rel(spa, api, "Uses") Rel_R(api, db, "Reads/Writes") SHOW_FLOATING_LEGEND() -Lay_Distance(legend, db, 1) +Lay_Distance(LEGEND(), db, 1) @enduml ``` -![db below legend, 1 unit distance](https://www.plantuml.com/plantuml/png/hL5DZzem4BtdLtXH3o0jH5NRIwLAYu3THUA30bkEqH0FuCgnKyy4r7_VCGcxKQjAFVHa-ytCUtvl7eWXS5NOvCwut5OQrOcvfCzf6k0oE1e-LVkACEJUCJeUvBv8ImikplI9jJNxTFInluhGotoM5a2CGQ1i91DW78P16VcJEuq7UQhnvDjqj5ni_a68gn9q-F0cQAJQFqX7dyfW6Eccf_4SQ_IgyhXSR8UxoMOvd_nNeIi65oHVOF_JBRKtLocuOsMXCVrd-JkSuM-rWdxOZ32SyVVnbfiq_fsQJ5TozQuReNlL6LN4li3GaViAVMbHyGbOEKIjok1rbJD9yLtjwKldIjNf9Q-hwb89ChnP3ID7OoLUjoTKXRGeunZ30VA6cWNF6zcw1gAXBf9oM-Z6r9Q2qWZnS3MD_36MU3w3qnP9WRLAjYIDHChweydRTB6xpJNUT_LUfiV0i0V2o3GtUV3a3wmsNsTNQcyrtMAuLpve34havDjdRtAKy-130MoyQukrjYAQoHfjatUTrGjXZ332Lo3QQgFPkdPw_U0QGLEwYyInd6oUbxliSROSRgUBfsmsUPeinjrUCeEVsTWGWyknQ_68JjS4xtl9Wpnazxy0 "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") ## Layout Options diff --git a/percy/TestFloatingLegend.puml b/percy/TestFloatingLegend.puml index 24e5f5bc..025cace9 100644 --- a/percy/TestFloatingLegend.puml +++ b/percy/TestFloatingLegend.puml @@ -18,5 +18,5 @@ Rel_D(c, d, "uses") Rel_R(d, e, "updates") SHOW_FLOATING_LEGEND() -Lay_Distance(legend, e, 1) +Lay_Distance(LEGEND(), e, 1) @enduml From adbedcb1518d5e6f856c81ef0d8120fb1771107c Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 1 May 2021 17:33:05 +0200 Subject: [PATCH 06/14] #146 New layout call SHOW_PERSON_OUTLINE() activates shape "person" --- C4.puml | 6 ++++++ C4_Context.puml | 15 ++++++++++++--- LayoutOptions.md | 30 ++++++++++++++++++++++++++++-- README.md | 1 + percy/TestPersonOutline.puml | 28 ++++++++++++++++++++++++++++ 5 files changed, 75 insertions(+), 5 deletions(-) create mode 100644 percy/TestPersonOutline.puml diff --git a/C4.puml b/C4.puml index 58aab7ed..f958219c 100644 --- a/C4.puml +++ b/C4.puml @@ -70,6 +70,11 @@ skinparam actor { style awesome } +skinparam person { + StereotypeFontSize 12 + shadowing false +} + ' Some boundary skinparams have to be set as package skinparams too (PlantUML uses internal packages) skinparam package { StereotypeFontSize 6 @@ -169,6 +174,7 @@ skinparam rectangle<> { !$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) ' actor has style awesome, therefore $fontColor is ignored and text uses $bgColor too !$tagSkin = $tagSkin + $elementTagSkinparams("actor", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing) + !$tagSkin = $tagSkin + $elementTagSkinparams("person", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) !if ($tagStereo == "boundary" && $bgColor!="") !$tagSkin = $tagSkin + "skinparam package<>StereotypeFontColor " + $bgColor + %newline() !$tagSkin = $tagSkin + "skinparam rectangle<>StereotypeFontColor " + $bgColor + %newline() diff --git a/C4_Context.puml b/C4_Context.puml index 820d961b..d56d1984 100644 --- a/C4_Context.puml +++ b/C4_Context.puml @@ -171,7 +171,12 @@ endlegend !unquoted procedure SHOW_PERSON_PORTRAIT() !$defaultPersonSprite = "" - !$portraitPerson = "true" + !$portraitPerson = "portrait" +!endprocedure + +!unquoted procedure SHOW_PERSON_OUTLINE() + !$defaultPersonSprite = "" + !$portraitPerson = "outline" !endprocedure ' Elements @@ -211,16 +216,20 @@ endlegend !endfunction !unquoted procedure Person($alias, $label, $descr="", $sprite="", $tags="", $link="") -!if ($portraitPerson == "true") && ($sprite == "") +!if ($portraitPerson == "portrait") && ($sprite == "") actor "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) +!elseif ($portraitPerson == "outline") && ($sprite == "") +person "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) !else rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("person", $tags) as $alias $getLink($link) !endif !endprocedure !unquoted procedure Person_Ext($alias, $label, $descr="", $sprite="", $tags="", $link="") -!if ($portraitPerson == "true") && ($sprite == "") +!if ($portraitPerson == "portrait") && ($sprite == "") actor "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) +!elseif ($portraitPerson == "outline") && ($sprite == "") +person "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) !else rectangle "$getPerson($label, $descr, $sprite)$getProps()" $toStereos("external_person", $tags) as $alias $getLink($link) !endif diff --git a/LayoutOptions.md b/LayoutOptions.md index 4dbc3b67..4ed6a68d 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -218,14 +218,15 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![HIDE_STEREOTYPE Sample](https://www.plantuml.com/plantuml/png/NL1DIyD05BplhrZheIdKX8edJuqrMC5gQ5B5KzWcJxkmN-o-DHJnl_j2gnNtCl1ctfkPdGSK7gDMV7b_MpHLNQoBf_grB7Wbj5F0pgHfLUo0xn1TkCuoB_hqNU8kRcC0trg3O31jhSv4vwKm7ogwc2skBaeb36vM3vaI205fr2n8BQG1dpgoPEoVPp9Xh0GVh4b4fwMPyb4-e0pe1Le_ch1g7n1qSsEZwOJV9-rioiU7gEC9_sIStgzBqiEs4SxHdHVOyjmv9Lk1qfeHZHRdKvvNPVfOrBJYWL-cCxvwNWnShfJj0nyQ1ewMKpqdIAAZGabUlEub8dYEKeCYhq3Plexf4ZoGTESe8vAjGVsqEiNQ1DeaNDPrMP5g4FsofpDtW1IZXm7UlDL_L-PWElhCRm00 "HIDE_STEREOTYPE Sample") -## HIDE_PERSON_SPRITE(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT() +## HIDE_PERSON_SPRITE(), SHOW_PERSON_SPRITE(?sprite), SHOW_PERSON_PORTRAIT() and SHOW_PERSON_OUTLINE() With the macros `HIDE_PERSON_SPRITE()`, `SHOW_PERSON_SPRITE()` and `SHOW_PERSON_PORTRAIT()` it is possible to change the person related default sprite or person layout itself. `SHOW_PERSON_SPRITE()` is the default. - **HIDE_PERSON_SPRITE()**: deactivates the default sprite - **SHOW_PERSON_SPRITE()**: activates the default sprite "person" - **SHOW_PERSON_SPRITE($sprite)**: activates a specific sprite as default sprite -- **SHOW_PERSON_PORTRAIT()**: activates portrait outline instead of a rectangle +- **SHOW_PERSON_PORTRAIT()**: activates portrait instead of a rectangle +- **SHOW_PERSON_OUTLINE()**: activates person outline instead of a rectangle "person" and "person2" are predefined sprites which can be used as default sprite too. @@ -332,3 +333,28 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![SHOW_PERSON_PORTRAIT() Sample](https://www.plantuml.com/plantuml/png/RL1BQzj04BxhLqpTGcHm919wAXIYcj0KcbXOIdCKAsbYB-nZsPd5cDB_tbcKHm_LGRixyptccnjY5JbP0ztTxcbeR_VTxc5eT_j-t_peopLqoWQ3nGVj9fDcX2Dpe2zr7TMfEcW-fZ4HniaxHiVLv6qTZ79PyP9uDdgijvylsrnwlFzPMqMCKKh3LXXAEunL46nH_D--A5gCv5sfPglT1bPDFZLnLEpZQbrqPsAqmpUVtApYkPokDd2np7onXjy5oFTcLPvm75G8elE48pGX63qfrjwjfBJzk86cQwk7srue4U6wkeBxNzlSQupn9u8SbO0zICwW16AJOIrUq9yqCqPWRT685ybiVrwcAtbfYiuBJ9h51UXdK10mvmDDMNCKvWo2EKg7GjICm4Tq-GSH9rRk86P6dNtYp4aaU7MGTA-BMlJ4QdalOekK1FcqtBwk5jXr7cIFvdMzx_jv9AGS_AxlsqvG6VJMVS_p7PdaYVbuZjx-Ixb1DoTh_W80 "SHOW_PERSON_PORTRAIT()") +**Using SHOW_PERSON_OUTLINE()** + +> This call requires PlantUML version >= v1.2021.4! + +```csharp +@startuml SHOW_PERSON_OUTLINE() Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SHOW_PERSON_OUTLINE() + +Person(admin, "Administrator") +System_Boundary(c1, 'Sample') { + Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines") +} +System(twitter, "Twitter") + +' if a person is combined with a sprite then the rectangle layout is used again +Person(person, "Person with sprite", $sprite="person2") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![SHOW_PERSON_OUTLINE() Sample](https://www.plantuml.com/plantuml/png/RL5BQzj04BxhLqpTWcLm919wAXJY6jCK4bj4SdCK8sbYB-nZsHqXJEb_xopAeuVeeDNEV8_vHhUHCV1eDDHtXwUssZtMXtrxE3Rtl_QxV0Kr6gyf-wHihyU1uCpiuxUo33WL9yNdiHiZXTvP9ij5xqpfDTeaU1LvqAehjr-lgbGwFjoN1YDJa5Ax5GOgIw7mWiso3zsphA8GdSrnCCgkOR59fueSa5rOhBBw8dgc_U56Es2uvFtr6fRpoCiL_Cb0dZUdVAAkHUz5vuaws7YlLO-id5r8QVjv3PkwAlQxHYY1uAQuXeVVszJRQEsc22bf17OWCJqAn8oQbNX1CocMOC3Aa1QlABFzVPakvxafEYymQMPBKC-0u2db0nMJPYVC0GHpbaxqGJ41dycc5mJg6Ur9p3HUtCY9CqR1uqdIlIvgrXEh-JwBpL8IvClyzNqnmsxI88-aNzVxlfzZb0XotZLDLGigWTwwxtb-4aUvKZgUWpF_Ksx93kdF_WC0 "SHOW_PERSON_OUTLINE()") diff --git a/README.md b/README.md index 4ff6bc97..0397168b 100644 --- a/README.md +++ b/README.md @@ -368,6 +368,7 @@ C4-PlantUML also comes with some person sprite/portrait options: * [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite) * [SHOW_PERSON_SPRITE(?sprite)](LayoutOptions.md#show_person_sprite) * [SHOW_PERSON_PORTRAIT()](LayoutOptions.md#show_person_portrait) +* [SHOW_PERSON_OUTLINE()](LayoutOptions.md#show_person_outline) (requires PlantUML version >= 1.2021.4) ## Custom tags/stereotypes support and skinparam updates diff --git a/percy/TestPersonOutline.puml b/percy/TestPersonOutline.puml new file mode 100644 index 00000000..190075c9 --- /dev/null +++ b/percy/TestPersonOutline.puml @@ -0,0 +1,28 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Deployment.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml +!endif + +!$COLOR_A_5 = "#7f3b08" +!$COLOR_A_1 = "#fee0b6" +!$COLOR_NEUTRAL = "#f7f7f7" +UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true") + +SHOW_PERSON_OUTLINE() + +' default header Property, Value +Person(personAlias, "Label", "Optional Description") +Person(personAlias1, "Simple") +Person(personAlias2, "Simple with sprite", $sprite="person2") +AddProperty("Name", "Flash") +AddProperty("Organization", "Zootopia") +AddProperty("Tool", "Internet Explorer 7.0") +Person_Ext(personAliasExt, "Label Ext", "Optional Description (with default property header)") +Person_Ext(personAliasExt1, "Simple Ext") +Person_Ext(personAliasExt2, "Simple Ext with sprite", $sprite="person2") + +SHOW_LEGEND() +@enduml \ No newline at end of file From 841aef26f40c84092db04c361940aae2f51b5d7e Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Mon, 10 May 2021 00:47:57 +0200 Subject: [PATCH 07/14] #145: Support rounded-box and eight-sided shapes --- C4.puml | 65 ++++++++++++++----- README.md | 31 +++++---- percy/TestLegend.puml | 7 +- ...ontainer Diagram Sample - message bus.puml | 38 ++++------- 4 files changed, 85 insertions(+), 56 deletions(-) diff --git a/C4.puml b/C4.puml index f958219c..290603c9 100644 --- a/C4.puml +++ b/C4.puml @@ -15,17 +15,27 @@ !global $LEGEND_UNDEFINED_BG_COLOR = "#D5CFEE" !global $LEGEND_UNDEFINED_FONT_COLOR = "#8B77E4" +' Labels +' ################################## + !global $LEGEND_SHADOW_TEXT = "(shadow) " !global $LEGEND_NO_SHADOW_TEXT = "(no shadow) " !global $LEGEND_NO_FONT_BG_TEXT = "(no text, no back color) " !global $LEGEND_NO_FONT_TEXT = "(no text color) " !global $LEGEND_NO_BG_TEXT = "(no back color) " !global $LEGEND_NO_LINE_TEXT = "(no line color) " +!global $LEGEND_ROUNDED_BOX = "(rounded box) " +!global $LEGEND_EIGHT_SIDED = "(eight sided) " ' Styling ' ################################## !global $TECHN_FONT_SIZE = 12 +!global $ROUNDED_BOX_SIZE = 25 +!global $EIGHT_SIDED_SIZE = 18 + +!global $ROUNDED_BOX = "roundedBox" +!global $EIGHT_SIDED = "eightSided" skinparam defaultTextAlignment center @@ -144,7 +154,7 @@ skinparam rectangle<> { !return $stereos !endfunction -!function $elementTagSkinparams($element, $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +!function $elementTagSkinparams($element, $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) !$elementSkin = "skinparam " + $element +"<<" + $tagStereo + ">> {" + %newline() !if ($fontColor!="") !if ($tagStereo != "boundary") @@ -164,17 +174,26 @@ skinparam rectangle<> { !if ($shadowing == "false") !$elementSkin = $elementSkin + " Shadowing<<" + $tagStereo + ">> " + "false" + %newline() !endif + ' only rectangle supports shape(d corners) + !if ($shape!="" && $element == "rectangle") + !if ($shape == $ROUNDED_BOX) + !$elementSkin = $elementSkin + " RoundCorner " + $ROUNDED_BOX_SIZE+ %newline() + !elseif ($shape == $EIGHT_SIDED) + !$elementSkin = $elementSkin + " DiagonalCorner " + $EIGHT_SIDED_SIZE+ %newline() + !endif + !endif !$elementSkin = $elementSkin + "}" + %newline() !return $elementSkin !endfunction -!unquoted procedure $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) - !$tagSkin = $elementTagSkinparams("rectangle", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) - !$tagSkin = $tagSkin + $elementTagSkinparams("database", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) - !$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +!unquoted procedure $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) + ' only rectangle supports shape(d corners) + !$tagSkin = $elementTagSkinparams("rectangle", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) + !$tagSkin = $tagSkin + $elementTagSkinparams("database", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "") + !$tagSkin = $tagSkin + $elementTagSkinparams("queue", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "") ' actor has style awesome, therefore $fontColor is ignored and text uses $bgColor too - !$tagSkin = $tagSkin + $elementTagSkinparams("actor", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing) - !$tagSkin = $tagSkin + $elementTagSkinparams("person", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + !$tagSkin = $tagSkin + $elementTagSkinparams("actor", $tagStereo, $bgColor, $bgColor, $borderColor, $shadowing, "") + !$tagSkin = $tagSkin + $elementTagSkinparams("person", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, "") !if ($tagStereo == "boundary" && $bgColor!="") !$tagSkin = $tagSkin + "skinparam package<>StereotypeFontColor " + $bgColor + %newline() !$tagSkin = $tagSkin + "skinparam rectangle<>StereotypeFontColor " + $bgColor + %newline() @@ -204,7 +223,7 @@ $tagSkin $elementSkin !endprocedure -!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) !$tagEntry = "|" !if ($bgColor!="") !$bg = $bgColor @@ -234,6 +253,12 @@ $elementSkin !if ($shadowing == "false") !$tagEntry = $tagEntry + $LEGEND_NO_SHADOW_TEXT !endif + !if ($shape == $ROUNDED_BOX) + !$tagEntry = $tagEntry + $LEGEND_ROUNDED_BOX + !endif + !if ($shape == $EIGHT_SIDED) + !$tagEntry = $tagEntry + $LEGEND_EIGHT_SIDED + !endif !if ($fontColor == "" && $bgColor == "") !$tagEntry = $tagEntry + $LEGEND_NO_FONT_BG_TEXT !else @@ -274,12 +299,12 @@ $elementSkin !return $tagEntry !endfunction -!unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") +!unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="") '' if a combined element tag is defined (e.g. "v1.0&v1.1") then it is typically a merged color, '' like a new $fontColor="#fdae61" therefore it should be added to the legend '' and the & combined tags will be not removed ' !if (%strpos($tagStereo, "&")<0) - !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) + !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) %set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry) !$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n" ' !endif @@ -317,10 +342,18 @@ $elementSkin !endif !endprocedure +!function RoundedBoxShape() +!return $ROUNDED_BOX +!endfunction + +!function EightSidedShape() +!return $EIGHT_SIDED +!endfunction + ' used by new defined tags -!unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="") -$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) -$addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing) +!unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="") +$defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) +$addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) !endprocedure ' used by new defined rel tags @@ -330,9 +363,9 @@ $addRelTagToLegend($tagStereo, $textColor, $lineColor) !endprocedure ' update the style of existing elements like person, ... -!unquoted procedure UpdateElementStyle($elementName, $bgColor="", $fontColor="", $borderColor="", $shadowing="") -$defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing) - !$tagEntry = $tagLegendEntry($elementName, $bgColor, $fontColor, $borderColor, $shadowing) +!unquoted procedure UpdateElementStyle($elementName, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="") +$defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape) + !$tagEntry = $tagLegendEntry($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape) %set_variable_value("$" + $elementName + "LegendEntry", $tagEntry) !endprocedure diff --git a/README.md b/README.md index 0397168b..cd975e9e 100644 --- a/README.md +++ b/README.md @@ -359,7 +359,7 @@ C4-PlantUML also comes with some layout options to make it easy and reusable to * [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right) * [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-show_legend) -* [SHOW_LEGEND_UP(alias, ?hideStereotype), SHOW_LEGEND_DOWN(...), SHOW_LEGEND_LEFT(...), SHOW_LEGEND_RIGHT(...)](LayoutOptions.md#show_legend_up-show_legend_down-show_legend_left-show_legend_right) +* [SHOW_FLOATING_LEGEND(?alias, ?hideStereotype) and LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-and-legend) * [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) @@ -374,15 +374,16 @@ C4-PlantUML also comes with some person sprite/portrait options: Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects: -* `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing)`: +* `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape)`: Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. * `AddRelTag(tagStereo, ?textColor, ?lineColor)`: Introduces a new relation tag. The styles of the tagged relations are updated and the tag is displayed in the calculated legend. - -* `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing)` +* `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape)`: This call updates the default style of the elements (component, ...) and creates no additional legend entry. -* `UpdateRelStyle(textColor, lineColor)` +* `UpdateRelStyle(textColor, lineColor)`: This call updates the default relationship colors and creates no additional legend entry. +* `RoundedBoxShape()`: This call returns the name of the rounded box shape and can be used as ?shape argument. +* `EightSidedShape()`: This call returns the name of the eight sided shape and can be used as ?shape argument. Each element can be extended with one or multiple custom tags via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`. Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+v1.1")`. @@ -410,6 +411,9 @@ AddElementTag("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf") AddElementTag("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61") AddElementTag("fallback", $bgColor="#444444") +AddElementTag("micro service", $shape=EightSidedShape()) +AddElementTag("storage", $shape=RoundedBoxShape()) + UpdateRelStyle(black, black) AddRelTag("service1", $textColor="red") AddRelTag("service2", $lineColor="red") @@ -421,24 +425,23 @@ Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extens Container(spa2, "SPA2", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0+fallback") Container(spaAdmin2, "Admin SPA2", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="fallback+v1.1") +Container(services, "Services", "techn", $tags="micro service") +Container(fileStorage, "File storage", "techn", $tags="storage") + Rel(spa, api, "Uses", "https") Rel(spaAdmin, api, "Uses", "https") Rel_L(spa, spa2, "Updates", "https") Rel_R(spaAdmin, spaAdmin2, "Updates", "https") -Person(user, "A user") -System(system, "A system") - -Rel_D(user, system, "uses service1 via this call", $tags="service1") -Rel_D(user, system, "uses service2 via this call", $tags="service2") -Rel_D(user, system, "uses both services via this call", $tags="service1&service2+service1+service2") +Rel_D(api, services, "uses service1 via this call", $tags="service1") +Rel_D(api, services, "uses service2 via this call", $tags="service2") +Rel_D(services, fileStorage, "both services stores via this call", $tags="service1&service2+service1+service2") -Lay_D(api, user) SHOW_LEGEND(false) @enduml ``` -![merged tags](https://www.plantuml.com/plantuml/png/jLJVRzCm47xFNs4Acb9rQzSmCGbfqgPjOaW5glqGZzCbkIO6nubybuxzzzXENLeQLl6mlDYv-_nzf-_EFYS6mssbeZTIPwhDKPJC3NsSJ0myZGl9PPksX2QhDQFcSLPNaqQ1TcUEY7CbqydboT7SXHw-p2OL4AEneSTBUmAaHZDk77_qqEJ0UAsmiZnt_AmmRj1GhG_5kuN5NjQgDcU3mY3gmJ2woFCLzXwAUB2SZey7syYt-Udxu-JKHTFQv6YsuxqSqxyv5lPB5piS8TvRnq4lKGxuOTf3vEExH0jGAeNifpzH1FI9_onwPTSjgiwgL5dieV2Bvx8PpqDebZ93hypuAzHZC1_quHA7KrBZ7jpq81pe8UwZYDRzZgc1Gp6ucryCx0AwQ1KOjxqlKLGM8gHcD0l8K709BDZ6ivQuhj1qESYOn9FaKYmbYD1xXeBEkaaORijTv9NKLi6lebyPN4uI6-3Q_6y96fz4wFgwZEbM6T18Ly7yinFy0KjmwmteN249K4gaBLaWaL1r8JCHkmitNZCBQp5gahMcuOPA6BUHsursHAc1fFCwUJMpHs5KUrrFDcrFNj_tK4pm8hA3sqrSru07GdBI_XcpUPSEjRw0UPnr92j3_UtR1TrkK8NTF-3Ht3zkiNiydKN2RMpyxfaOgvZyuXFTrgQynDNgn1fWVqc4M-bDuLAIo42fFww4l6NPIvBi8KbU94bhBWCJxIjd_OYCGcIq8HBDuDcg-9uuAMlEpRVlZxFhJzTVhsBRQC9XT8uwRolr6m00 "merged tags") +![merged tags](https://www.plantuml.com/plantuml/png/jLLHRzCm47xlhp01JQswjMkOc8GqQMCh36d0r6xYSRh4byJWs97jTEFVOyTrI9l0nCFwOllkk-_Ed-_ISsr0cRhaerTCfBocI0fZAlr-FbVmECkPAUgargXIAGmACqjbEQyu21Tpf0tbB9bVdXpTEjFzbvjv2TgWigQ7Ini1JA2QLOv_T5zHCBZaM5gUjVd5SLoXqb8SaZUPnLvABjLPb2j44Kr65vHkiNUGZwFDOdOSxI9VqzEtn_6fioPIKLIxza6EnJv7Pdz9rkVmzk4w3WQ9AE2xHP_8s_j46N2UGFgpYSW3-gJvMVG-l6IfaaIZsh0KNOmkeCAp9SiBisOKwTgTnvDU7csaWhmJifAriFWFyYc4XBTP8VVlad1Rs25fbeRGUZoPpzzSq-1JkBn26WtXOeVZJE0pkCL12EWJ3rACskOQwmeEIRI-lOZi0YAlEIYtlIkGb1P2c32eCaYHc08CCTQUrbQL4fNtGMeqUMIc81i693IQWLoV-RQRxAQxe2KJDaEpak7Cu7nC6mLM_lyjGU0Z2ItMbh7OAGCgvYgu_UmI_e0DkFKQ1EMe2N1ExD1QeDQ4ovobPEocUzOo4oin2isaq9DEbj3RKxURkjt-tMElTVnYOa_3N0og7dTbZrzUzr1CqA9RakzOxGJPRbqH1jD2j0HxOzkzKiOuhlrish2FzaJ2gFPfWiTMi4BkUzwtmBtsUPkljlLxjrVh7vY76q-oVL8__ptGgaCLTd-1D_WhtvSTQMgREfmNZSYcO9gam7ddTbk_fNcU9Nw69MvP_X3iQfr8KxJiZUXs6IRjVw2cmJBjv1kjhxzzVxXPVbf-lHfdm3LEHkSegFlV-mq0 "merged tags") **Custom schema definition** @@ -555,7 +558,7 @@ Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%2 Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) -![messagebus](https://www.plantuml.com/plantuml/png/bLHVRzis47_NfxXb3qs196wBFUsfZcqixPpOjHm4Un9EqjacIf44IJbpXttt7IMReHSLQFCGYJyTVt-EF7zq7grl6maN3Jc7MofRTv7z8bGbsvfWvxrnluz65fzljiBlMlvCjjBAa_8tbMv6Hg8A1DVErrAKeyblryi0FTxFHmqwJvQXOi8xK2YoDuPhipVGAjxSC0du7S56IwcVXTg2v290LSFPPs4TlsbWSP2wGYaFp15TlXR8t5UX35fiuDcYUHArty67T-yIlC6_x_l8kVX6tSTiFlvhyRWkrejbCLqyFLo-pTuSeN5Uv7_ErfCxnexGqwVrNJ6V_J5xc3AOPKkoJglBgdLUDsIlO1BVBiPmWY-uD3yuJqrngrjLeprSLk-vv5GDdzH6smQzqEhYBVoJPS1_CTyb6fDMZusHekgh6V-CUtIL5SPVmLXjMuasmEFGNnTDkD3C1XM73mqM5epL6o69tPtBnJY58xiN5QNQUG-TTAyWDpOSugtMFe3h7O7HGddG6y2g8kU0iqKR89AehvIF5xBWAyTSnxE2szO5wXMMfV3tNpePYyePRNr7pkL21INQa_BkDQ-bKCi-aqYh4vPcMhNb8Jmdbj2J0nMyIk6eXXezTcgH34nhZNOq88XjBNmYDWxhL6Zow-ZcOROEhqkhzw9cCMstg8JhUdFzp11qD45fWvMG_3gWDIrV3gmkqxEQeiSINQUti5X9WlSVgh3AlRRaVknGc3yc3W9fvrA5-qF-PPwGuwbvtwY6FLd7vDsba38Us4jJiOQThdwcjwoIT3QiWlXiJoekevSa7s2fMt-yAU1tw667U-9_nf2YclN-pR8LoMIg-_bx36xuURTUBtCk2qN5gX_EWP5vD1pkEqs6a7yRoD0TL7K5d_F5m-YCU3umXhsFd5JjOW0TM9wep7NrbJplxbsztfpCLYI9tjhEx0jfppF0aborsDx-54N_OpIzdHmZd4_pm0Z-e8cKff-8dw7ehGoeHsWmIY_zFxNqviKTlLQ_9vlZeLWDgPqnSU57zjqsyZy0 "messagebus") +![messagebus](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqpL7ho0TuqKFHLO8FumcWJUNSUoaQCmeiOI4OeaICgkM_I_bvHiXN7LJRA7jJYSUU_D38TyQnqQrzG2afginPBonYQZdxXaeYa8AkUq_NqwDNXwABch6hzDXYdfIBe7fkgf5YW3mBrrXU3vTF7R_IQOza_hQOtMaV6cRE4Za4io3zhxZaQpebW9gZt83ijnKdDc57Za8sUKJE0NMw6cnnKlAvVoWeeqhCTtVYSl5qeeyvWib947eKvavg9fWmwUvB9vghYZvEwMnpfbi8mOjggH7dwk_XnW42tzv_Ch-AFqtSkdRBFQfY_FsSj-jtx_l1fxyuQCLNBC6izOavd0elzAPd0rjm1dwwZEva48clEOlV4kLszuBm_ArEYuaiaT_3q2_zVNSenQnyuphGLddREtVy0ZMcQuTXEOoR8HQ89v9dpHRA_1WbDGeyIIm5N43MYZ3bpux6xOhX7PfKynTTgPhhGJIBNXieIvKYuOTnM1LbmwK0T0niXQy9drAe17YVfIEomjFCBDmRXLT3coMTvOp_7KhM3Us42vnJpdxkbZIszGMgsCQqczEvT10Hr9EliVM4F1rSkFCjrURN6gsoO_Xz-58NHaGOOK1BTKG84EMx8U37HZjB9alpy_R0hk8X6pi8u5B7wUFZolTk5pOzIH5sH1cH8bjsqfxq_U12rCK710neN__04Do_nBtuiyRlaI7UPeMnql1faWUFCh2wlKAKFscxtjXd60CMg0funh7tC-dTEFwuWEh-N_Ymeuah6UhZrjGlGT_z8MBA1IxBNkn0g7--9teww4LP2pEfBibxswg0Q0kMhSvV21gz11XKVo_xGcISMmWdz6eos9R1dTATtuxplHoRlTRfDwnywhtHkOsBqkqFrFSo1KgGnOQC-IJU23lzMcCUv-u1BeLAGa2zldf0B89yfJnJwJUoKuck0Uf9VMj5eZq1Pd02KweNt5krRpxYPSpXUNuAy81mRzEpN4CDry_J3407bl6aoa2xiXYuzY7z5HTJ6ZDPwpxH3RLqZNfsoz-cFrlFHFs5kVH7Yg_mK0 "messagebus") ## Background diff --git a/percy/TestLegend.puml b/percy/TestLegend.puml index fe740cd8..24e7aa68 100644 --- a/percy/TestLegend.puml +++ b/percy/TestLegend.puml @@ -17,6 +17,9 @@ AddElementTag("role3", $bgColor="orange") AddElementTag("role4", $borderColor="blue") AddElementTag("unusedRole") +AddElementTag("micro_service", $shape=EightSidedShape()) +AddElementTag("storage", $shadowing="true", $shape=RoundedBoxShape()) + AddRelTag("line1", $lineColor="green", $textColor="blue") AddRelTag("line2", $lineColor="blue", $textColor="green") AddRelTag("line3", $textColor="orange") @@ -37,8 +40,8 @@ Person(person13, "Person13", $tags="role1+role3") Person(allInOne, "AllInOne", $tags="role4+role3+role2+role1") Component(component, "Component 1", "PlantUML") -System(system1A, "System 1A") -System(system2, "System 2") +System(system1A, "System 1A", $tags="micro_service") +System(system2, "System 2", $tags = "storage") Rel(allInOne, component, "without a tag") Rel(allInOne, component, "uses line 1", $tags="line1") diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index 9d0ce2a2..f20a6e81 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -3,41 +3,30 @@ ' 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() +AddElementTag("micro service", $shape=EightSidedShape(), $bgColor="CornflowerBlue", $fontColor="white") +AddElementTag("storage", $shape=RoundedBoxShape(), $bgColor="lightSkyBlue", $fontColor="white") +SHOW_PERSON_OUTLINE() 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(customer_service, "Customer Service", "Java, Spring Boot", "The point of access for customer information", $tags = "micro service") 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") + Container(reporting_service, "Reporting Service", "Ruby", "Creates normalised data for reporting purposes", $tags = "micro service") + Container(audit_service, "Audit Service", "C#/.NET", "Provides organisation-wide auditing facilities", $tags = "micro service") + ContainerDb(customer_db, "Customer Database", "Oracle 12c", "Stores customer information", $tags = "storage") + ContainerDb(reporting_db, "Reporting Database", "MySQL", "Stores a normalized version of all business data for ad hoc reporting purposes", $tags = "storage") + Container(audit_store, "Audit Store", "Event Store", "Stores information about events that have happened", $tags = "storage") } -Rel(customer, app, "Uses", "HTTPS") +Rel_D(customer, app, "Uses", "HTTPS") -Rel_R(app, customer_service, "Updates customer information using", "async, JSON/HTTPS") +Rel_D(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_U(customer_service, app, "Sends events to", "WebSocket") +Rel_U(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") @@ -48,4 +37,5 @@ Rel(audit_service, audit_store, "Stores events in") Lay_R(reporting_service, audit_service) +SHOW_LEGEND() @enduml From 41b3a20f09d3cfc3408a458cd3ec4d2e55331afe Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 22 May 2021 22:02:16 +0200 Subject: [PATCH 08/14] #149: LegendColor considers brightness --- C4.puml | 80 +++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 58 insertions(+), 22 deletions(-) diff --git a/C4.puml b/C4.puml index 290603c9..05fbc6ba 100644 --- a/C4.puml +++ b/C4.puml @@ -12,8 +12,9 @@ !global $LEGEND_FONT_COLOR = "#FFFFFF" !global $LEGEND_TITLE_COLOR = "#000000" -!global $LEGEND_UNDEFINED_BG_COLOR = "#D5CFEE" -!global $LEGEND_UNDEFINED_FONT_COLOR = "#8B77E4" +' %darken(darkkhaki,50), #khaki +!global $LEGEND_DARK_COLOR = "#66622E" +!global $LEGEND_LIGHT_COLOR = "#khaki" ' Labels ' ################################## @@ -202,7 +203,7 @@ $tagSkin !endprocedure ' arrow colors cannot start with # (legend background has to start with #) -!function ColorNoHash($c) +!function $colorWithoutHash($c) !if (%substr($c, 0, 1) == "#") !$c = %substr($c,1) !endif @@ -213,39 +214,74 @@ $tagSkin !$elementSkin = "skinparam arrow<<" + $tagStereo + ">> {" + %newline() !$elementSkin = $elementSkin + " Color " !if ($lineColor!="") - !$elementSkin = $elementSkin + ColorNoHash($lineColor) + !$elementSkin = $elementSkin + $colorWithoutHash($lineColor) !endif !if ($textColor!="") - !$elementSkin = $elementSkin + ";text:" + ColorNoHash($textColor) + !$elementSkin = $elementSkin + ";text:" + $colorWithoutHash($textColor) !endif !$elementSkin = $elementSkin + %newline() !$elementSkin = $elementSkin + "}" + %newline() $elementSkin !endprocedure -!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) - !$tagEntry = "|" - !if ($bgColor!="") - !$bg = $bgColor +!unquoted function $contrastColor($color) + !if (%is_dark($color)) + !$value = $LEGEND_LIGHT_COLOR !else - !$bg = $LEGEND_UNDEFINED_BG_COLOR - !endif - ' named colors have to start with # too - !if (%substr($bg, 0, 1) != "#") - !$bg = "#" + $bg + !$value = $LEGEND_DARK_COLOR !endif - !$tagEntry = $tagEntry + "<" + $bg +">" - ' ..white rectangle - !if ($borderColor!="") - !$tagEntry = $tagEntry + " " + !return $value +!endfunction + +!unquoted function $flatColor($color) + !if (%is_dark($color)) + !$value = $LEGEND_DARK_COLOR !else - !$tagEntry = $tagEntry + " " + !$value = $LEGEND_LIGHT_COLOR !endif - !if ($fontColor!="") - !$tagEntry = $tagEntry + "" + !return $value +!endfunction + +' legend background has to start with # +!function $colorWithHash($c) + !if (%substr($c, 0, 1) != "#") + !$c = "#" + $c + !endif + !return $c +!endfunction + +!function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) + !$bg = $bgColor + !$fo = $fontColor + !$bo = $borderColor + + !if ($fo == "") + !if ($bg != "") + !$fo = $contrastColor($bg) + !else + !if ($bo == "") + !$fo = $LEGEND_DARK_COLOR + !$bg = $LEGEND_LIGHT_COLOR + !else + !$fo = $flatColor($bo) + !$bg = $contrastColor($bo) + !endif + !endif !else - !$tagEntry = $tagEntry + "" + !if ($bg == "") + !$bg = $contrastColor($fo) + !endif + !endif + + !if ($bo == "") + !$bo = $bg !endif + + !$tagEntry = "|" + !$tagEntry = $tagEntry + "<" + $colorWithHash($bg) +">" + ' ..white rectangle + !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + "" !$tagEntry = $tagEntry + " " + $tagStereo + " " !if ($shadowing == "true") !$tagEntry = $tagEntry + $LEGEND_SHADOW_TEXT From bbbda8c6e85524f9f29bab04b6e2ea1f3e5b26c6 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 23 May 2021 09:50:59 +0200 Subject: [PATCH 09/14] #149: LegendColor considers brightness (2 - relations too) --- C4.puml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/C4.puml b/C4.puml index 05fbc6ba..f298cf39 100644 --- a/C4.puml +++ b/C4.puml @@ -224,7 +224,7 @@ $tagSkin $elementSkin !endprocedure -!unquoted function $contrastColor($color) +!unquoted function $contrastLegend($color) !if (%is_dark($color)) !$value = $LEGEND_LIGHT_COLOR !else @@ -233,7 +233,7 @@ $elementSkin !return $value !endfunction -!unquoted function $flatColor($color) +!unquoted function $flatLegend($color) !if (%is_dark($color)) !$value = $LEGEND_DARK_COLOR !else @@ -257,19 +257,19 @@ $elementSkin !if ($fo == "") !if ($bg != "") - !$fo = $contrastColor($bg) + !$fo = $contrastLegend($bg) !else !if ($bo == "") !$fo = $LEGEND_DARK_COLOR !$bg = $LEGEND_LIGHT_COLOR !else - !$fo = $flatColor($bo) - !$bg = $contrastColor($bo) + !$fo = $flatLegend($bo) + !$bg = $contrastLegend($bo) !endif !endif !else !if ($bg == "") - !$bg = $contrastColor($fo) + !$bg = $contrastLegend($fo) !endif !endif @@ -316,12 +316,12 @@ $elementSkin !if ($lineColor!="") !$tagEntry = $tagEntry + " " !else - !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + " " !endif !if ($textColor!="") !$tagEntry = $tagEntry + "" !else - !$tagEntry = $tagEntry + "" + !$tagEntry = $tagEntry + "" !endif !$tagEntry = $tagEntry + " " + $tagStereo + " " !if ($textColor == "") From 35bd190742e51ad92b0ea306c0cbbd9d633b7275 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Mon, 24 May 2021 15:07:35 +0200 Subject: [PATCH 10/14] #149: LegendColor considers brightness (3 - add old PlantUML version workaround) --- C4.puml | 51 +++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 41 insertions(+), 10 deletions(-) diff --git a/C4.puml b/C4.puml index f298cf39..ac981020 100644 --- a/C4.puml +++ b/C4.puml @@ -224,6 +224,14 @@ $tagSkin $elementSkin !endprocedure +' %is_dark() requires PlantUML version >=1.2021.6 +!if (%function_exists("%is_dark")) + !$PlantUMLSupportsDynamicLegendColor = %true() +!else + !$PlantUMLSupportsDynamicLegendColor = %false() + !log "dynamic undefined legend colors" requires PlantUML version >= 1.2021.6, therefore only static assigned colors are used +!endif + !unquoted function $contrastLegend($color) !if (%is_dark($color)) !$value = $LEGEND_LIGHT_COLOR @@ -257,19 +265,32 @@ $elementSkin !if ($fo == "") !if ($bg != "") +!if ($PlantUMLSupportsDynamicLegendColor) !$fo = $contrastLegend($bg) +!else + !$fo = $LEGEND_DARK_COLOR +!endif !else !if ($bo == "") !$fo = $LEGEND_DARK_COLOR !$bg = $LEGEND_LIGHT_COLOR !else +!if ($PlantUMLSupportsDynamicLegendColor) !$fo = $flatLegend($bo) !$bg = $contrastLegend($bo) +!else + !$fo = $LEGEND_DARK_COLOR + !$bg = $LEGEND_LIGHT_COLOR +!endif !endif !endif !else !if ($bg == "") +!if ($PlantUMLSupportsDynamicLegendColor) !$bg = $contrastLegend($fo) +!else + !$bg = $LEGEND_LIGHT_COLOR +!endif !endif !endif @@ -311,18 +332,28 @@ $elementSkin !endfunction !function $tagRelLegendEntry($tagStereo, $textColor, $lineColor) - !$tagEntry = "|" - ' ..white line - !if ($lineColor!="") - !$tagEntry = $tagEntry + " " - !else - !$tagEntry = $tagEntry + " " + !$tc = $textColor + !$lc = $lineColor + + !if ($tc=="") +!if ($PlantUMLSupportsDynamicLegendColor) + !$tc = $flatLegend($ARROW_COLOR) +!else + !$tc = $LEGEND_DARK_COLOR +!endif !endif - !if ($textColor!="") - !$tagEntry = $tagEntry + "" - !else - !$tagEntry = $tagEntry + "" + !if ($lc=="") +!if ($PlantUMLSupportsDynamicLegendColor) + !$lc = $flatLegend($ARROW_COLOR) +!else + !$lc = $LEGEND_DARK_COLOR +!endif !endif + + !$tagEntry = "|" + ' ..white line + !$tagEntry = $tagEntry + " " + !$tagEntry = $tagEntry + "" !$tagEntry = $tagEntry + " " + $tagStereo + " " !if ($textColor == "") !$tagEntry = $tagEntry + $LEGEND_NO_FONT_TEXT From 78e81e6388411477be66f76d896a3005786368f0 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 13 Jun 2021 22:42:26 +0200 Subject: [PATCH 11/14] #157 Legend shows only style relevant $tag and default elements --- C4.puml | 76 ++++++++++++++++++++++++++++++++++++- percy/TestLegendHidden.puml | 26 +++++++++++++ 2 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 percy/TestLegendHidden.puml diff --git a/C4.puml b/C4.puml index ac981020..331c469a 100644 --- a/C4.puml +++ b/C4.puml @@ -130,6 +130,7 @@ skinparam rectangle<> { !return $stereos !endfunction +' element specific (unused are hidden based on mask) !unquoted function $toStereos($elementType, $tags) !if (%strlen($tags) == 0) !$stereos = '<<' + $elementType + '>>' @@ -137,21 +138,34 @@ skinparam rectangle<> { !return $stereos !endif !$stereos = '' + !$mask = $resetMask() !$brPos = %strpos($tags, "+") !while ($brPos >= 0) !$tag = %substr($tags, 0, $brPos) !$stereos = $stereos + '<<' + $tag + '>>' + !$mergedMask = $combineMaskWithTag($mask, $tag) + !if ($mergedMask != $mask) %set_variable_value("$" + $tag + "Legend", %true()) + !$mask = $mergedMask + !endif !$tags = %substr($tags, $brPos+1) !$brPos = %strpos($tags, "+") !endwhile !if (%strlen($tags)>0) !$stereos = $stereos + '<<' + $tags + '>>' + !$mergedMask = $combineMaskWithTag($mask, $tags) + !if ($mergedMask != $mask) %set_variable_value("$" + $tags + "Legend", %true()) + !$mask = $mergedMask + !endif !endif ' has to be last, otherwise PlantUML overwrites all tag specific skinparams !$stereos = $stereos + '<<' + $elementType + '>>' + !$mergedMask = $combineMaskWithTag($mask, $elementType) + !if ($mergedMask != $mask) %set_variable_value("$" + $elementType + "Legend", %true()) + !$mask = $mergedMask + !endif !return $stereos !endfunction @@ -175,11 +189,13 @@ skinparam rectangle<> { !if ($shadowing == "false") !$elementSkin = $elementSkin + " Shadowing<<" + $tagStereo + ">> " + "false" + %newline() !endif - ' only rectangle supports shape(d corners) + ' only rectangle supports shape(d corners), define both skinparam that overlays are working !if ($shape!="" && $element == "rectangle") !if ($shape == $ROUNDED_BOX) !$elementSkin = $elementSkin + " RoundCorner " + $ROUNDED_BOX_SIZE+ %newline() + !$elementSkin = $elementSkin + " DiagonalCorner " + "0" + %newline() !elseif ($shape == $EIGHT_SIDED) + !$elementSkin = $elementSkin + " RoundCorner " + "0" + %newline() !$elementSkin = $elementSkin + " DiagonalCorner " + $EIGHT_SIDED_SIZE+ %newline() !endif !endif @@ -258,6 +274,57 @@ $elementSkin !return $c !endfunction +!function $addMaskFlag($mask, $attr) + !if ($attr == "") + !$mask = $mask + "0" + !else + !$mask = $mask + "1" + !endif + !return $mask +!endfunction + +!function $orFlags($flag1, $flag2) + !if ($flag1 == "0" && $flag2 == "0") + !return "0" + !endif + !return "1" +!endfunction + +!function $tagLegendMask($bgColor, $fontColor, $borderColor, $shadowing, $shape) + !$mask = "" + !$mask = $addMaskFlag($mask, $bgColor) + !$mask = $addMaskFlag($mask, $fontColor) + !$mask = $addMaskFlag($mask, $borderColor) + !$mask = $addMaskFlag($mask, $shadowing) + !$mask = $addMaskFlag($mask, $shape) + !return $mask +!endfunction + +!function $resetMask() + !return "00000" +!endfunction + +!function $combineMasks($mask1, $mask2) + !$mask = "" + !$mask = $mask + $orFlags(%substr($mask1, 0, 1), %substr($mask2, 0, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 1, 1), %substr($mask2, 1, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 2, 1), %substr($mask2, 2, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 3, 1), %substr($mask2, 3, 1)) + !$mask = $mask + $orFlags(%substr($mask1, 4, 1), %substr($mask2, 4, 1)) + !return $mask +!endfunction + +!function $combineMaskWithTag($mask1, $tag) + !$mask2 = %get_variable_value("$" + $tag+ "LegendMask") + !if ($mask2=="") + ' !log combineMaskWithTag $mask1, $tag, ... only $mask1 + !return $mask1 + !endif + + ' !log combineMaskWithTag $mask1, $tag, $mask2 ... $combineMasks($mask1, $mask2) + !return $combineMasks($mask1, $mask2) +!endfunction + !function $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) !$bg = $bgColor !$fo = $fontColor @@ -371,9 +438,11 @@ $elementSkin '' like a new $fontColor="#fdae61" therefore it should be added to the legend '' and the & combined tags will be not removed ' !if (%strpos($tagStereo, "&")<0) - !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) + !$tagEntry = $tagLegendEntry($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) %set_variable_value("$" + $tagStereo + "LegendEntry", $tagEntry) !$tagCustomLegend = $tagCustomLegend + $tagStereo + "\n" + !$tagMask = $tagLegendMask( $bgColor, $fontColor, $borderColor, $shadowing, $shape) +%set_variable_value("$" + $tagStereo + "LegendMask", $tagMask) ' !endif !endprocedure @@ -434,6 +503,9 @@ $addRelTagToLegend($tagStereo, $textColor, $lineColor) $defineSkinparams($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape) !$tagEntry = $tagLegendEntry($elementName, $bgColor, $fontColor, $borderColor, $shadowing, $shape) %set_variable_value("$" + $elementName + "LegendEntry", $tagEntry) + ' default tags sets at least bgColor and fontColor + !$tagMask = $tagLegendMask("CHANGED", "CHANGED", $borderColor, $shadowing, $shape) +%set_variable_value("$" + $elementName + "LegendMask", $tagMask) !endprocedure /' @deprecated in favor of UpdateElementStyle '/ diff --git a/percy/TestLegendHidden.puml b/percy/TestLegendHidden.puml new file mode 100644 index 00000000..288d34b0 --- /dev/null +++ b/percy/TestLegendHidden.puml @@ -0,0 +1,26 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Component.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml +!endif + +AddElementTag("shapeRound", $shape=$ROUNDED_BOX) +AddElementTag("shapeOct", $shape=$EIGHT_SIDED) +AddElementTag("shadowed", $shadowing=true) +AddElementTag("shadowed2", $shadowing=false) +AddElementTag("yelloTagged", $fontColor=yellow, $borderColor=yellow) +AddElementTag("greenTagged", $borderColor=green, $bgColor=green) +AddElementTag("tagged container", $fontColor=white, $bgColor=$CONTAINER_BG_COLOR, $borderColor=$CONTAINER_BORDER_COLOR) +AddElementTag("tagged person", $fontColor=white, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR) + +Container(c2, Container 2, tech, $tags="tagged container", "'tagged container' stereotype/tag overwrites all styles of container ($fontColor, $bgColor and $borderColor) the container is not important anymore and therefore not displayed in legend") +Person(p2, p2, $tags="tagged person", "produces no person legend entry too") + +Person(p4, p4, $tags="yelloTagged", "'yelloTagged' stereotype/tag first and defines $fontColor and $borderColor (in legend), 'person' defines additional $bgColor (in legend too)") + +Component(comp3, comp3, "techn", $tags="yelloTagged+greenTagged+shapeRound+shapeOct+shadowed+shadowed2", "Complex sample with all styles") + +SHOW_LEGEND(false) +@enduml \ No newline at end of file From 32c482facde891fd51e8de768c6fd251d484e36b Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Thu, 17 Jun 2021 19:15:11 +0200 Subject: [PATCH 12/14] #159 Relation tags support line styles --- C4.puml | 51 ++++++++++++++++++++++++++++++++++++++++++++------- README.md | 9 ++++++--- 2 files changed, 50 insertions(+), 10 deletions(-) diff --git a/C4.puml b/C4.puml index 331c469a..5dcfe913 100644 --- a/C4.puml +++ b/C4.puml @@ -27,6 +27,9 @@ !global $LEGEND_NO_LINE_TEXT = "(no line color) " !global $LEGEND_ROUNDED_BOX = "(rounded box) " !global $LEGEND_EIGHT_SIDED = "(eight sided) " +!global $LEGEND_DOTTED_LINE = "(dotted) " +!global $LEGEND_DASHED_LINE = "(dashed) " +!global $LEGEND_BOLD_LINE = "(bold) " ' Styling ' ################################## @@ -38,6 +41,10 @@ !global $ROUNDED_BOX = "roundedBox" !global $EIGHT_SIDED = "eightSided" +!global $DOTTED_LINE = "dotted" +!global $DASHED_LINE = "dashed" +!global $BOLD_LINE = "bold" + skinparam defaultTextAlignment center skinparam wrapWidth 200 @@ -226,7 +233,7 @@ $tagSkin !return $c !endfunction -!unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor) +!unquoted procedure $defineRelSkinparams($tagStereo, $textColor, $lineColor, $lineStyle) !$elementSkin = "skinparam arrow<<" + $tagStereo + ">> {" + %newline() !$elementSkin = $elementSkin + " Color " !if ($lineColor!="") @@ -235,6 +242,9 @@ $tagSkin !if ($textColor!="") !$elementSkin = $elementSkin + ";text:" + $colorWithoutHash($textColor) !endif + !if ($lineStyle!="") + !$elementSkin = $elementSkin + ";line." + $lineStyle + !endif !$elementSkin = $elementSkin + %newline() !$elementSkin = $elementSkin + "}" + %newline() $elementSkin @@ -398,7 +408,7 @@ $elementSkin !return $tagEntry !endfunction -!function $tagRelLegendEntry($tagStereo, $textColor, $lineColor) +!function $tagRelLegendEntry($tagStereo, $textColor, $lineColor, $lineStyle) !$tc = $textColor !$lc = $lineColor @@ -428,11 +438,26 @@ $elementSkin !if ($lineColor == "") !$tagEntry = $tagEntry + $LEGEND_NO_LINE_TEXT !endif + !if ($lineStyle != "") + !if ($lineStyle == $DOTTED_LINE) + !$tagEntry = $tagEntry + $LEGEND_DOTTED_LINE + !elseif ($lineStyle == $DASHED_LINE) + !$tagEntry = $tagEntry + $LEGEND_DASHED_LINE + !elseif ($lineStyle == $BOLD_LINE) + !$tagEntry = $tagEntry + $LEGEND_BOLD_LINE + !else + !$tagEntry = $tagEntry + "(" + $lineStyle + ") " + !endif + !endif !$tagEntry = $tagEntry + " " !$tagEntry = $tagEntry + "|" !return $tagEntry !endfunction +!global $LEGEND_DOTTED_LINE = "(dotted) " +!global $LEGEND_DASHED_LINE = "(dashed) " +!global $LEGEND_BOLD_LINE = "(bold) " + !unquoted procedure $addTagToLegend($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="") '' if a combined element tag is defined (e.g. "v1.0&v1.1") then it is typically a merged color, '' like a new $fontColor="#fdae61" therefore it should be added to the legend @@ -446,7 +471,7 @@ $elementSkin ' !endif !endprocedure -!unquoted procedure $addRelTagToLegend($tagStereo, $textColor="", $lineColor="") +!unquoted procedure $addRelTagToLegend($tagStereo, $textColor="", $lineColor="", $lineStyle="") '' Arrows have a bug with stereotype/skinparams and cannot combine text colors of one stereotype '' and the line color of another stereotype. Therefore the text color of one tag and the line color '' of another tag have to be combined via a "workaround" tag ("v1.0&v1.1"). @@ -454,7 +479,7 @@ $elementSkin '' be an inconsistency between the element tags and the rel tags and therefore '' & combined workaround tags are not removed too (and in unlikely cases the color itself could be changed) ' !if (%strpos($tagStereo, "&")<0) - !$tagEntry = $tagRelLegendEntry($tagStereo, $textColor, $lineColor) + !$tagEntry = $tagRelLegendEntry($tagStereo, $textColor, $lineColor, $lineStyle) %set_variable_value("$" + $tagStereo + "_LineLegendEntry", $tagEntry) !$tagCustomLegend = $tagCustomLegend + $tagStereo + "_Line\n" ' !endif @@ -486,6 +511,18 @@ $elementSkin !return $EIGHT_SIDED !endfunction +!function DottedLine() +!return $DOTTED_LINE +!endfunction + +!function DashedLine() +!return $DASHED_LINE +!endfunction + +!function BoldLine() +!return $BOLD_LINE +!endfunction + ' used by new defined tags !unquoted procedure AddElementTag($tagStereo, $bgColor="", $fontColor="", $borderColor="", $shadowing="", $shape="") $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape) @@ -493,9 +530,9 @@ $addTagToLegend($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $sha !endprocedure ' used by new defined rel tags -!unquoted procedure AddRelTag($tagStereo, $textColor="", $lineColor="") -$defineRelSkinparams($tagStereo, $textColor, $lineColor) -$addRelTagToLegend($tagStereo, $textColor, $lineColor) +!unquoted procedure AddRelTag($tagStereo, $textColor="", $lineColor="", $lineStyle = "") +$defineRelSkinparams($tagStereo, $textColor, $lineColor, $lineStyle) +$addRelTagToLegend($tagStereo, $textColor, $lineColor, $lineStyle) !endprocedure ' update the style of existing elements like person, ... diff --git a/README.md b/README.md index cd975e9e..cdb9334b 100644 --- a/README.md +++ b/README.md @@ -132,7 +132,7 @@ AddElementTag("v1.0", $borderColor="#d73027") AddElementTag("v1.1", $fontColor="#d73027") AddElementTag("backup", $fontColor="orange") -AddRelTag("backup", $textColor="orange", $lineColor="orange") +AddRelTag("backup", $textColor="orange", $lineColor="orange", $lineStyle = DashedLine()) Person(user, "Customer", "People that need products") Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1") @@ -153,7 +153,7 @@ SHOW_LEGEND() @enduml ``` -![tags](https://www.plantuml.com/plantuml/png/bLJTJjjC4BtdAVRprukWGWBz4L8b9AA0IgNGfWJ49Hfx9ywswrrhPnpQj--COs884LMlTZLpPiwSsMEV4KFYfl9x_xbG-CQYMJBNz6aqIl0mB1qlcxmXJ4KCZ867HQn6jOUWDOV4rhjyDFbmEDFGxTLqL04n9WdTJwG2NC0qhBN_tjZQ2uyL1hw1Sf2jZeT7sO5vayTaCKsYZ-aq-z-Ul3zwTvBjxq0VAteXJV-6pQ7usTHRw9WWb2XWHL-Ztq8o_jf2Ij2xW2_APvWeXe7kvC1aauOuLfW4diqmrXuDBu5DGBIcJj4s1PEKTLLWAnS4EjRJ4IVW-A8M-YIIX73JoAmSj8603qPNOkGvwXX4ERKgeAJJTbT2kTd_W6eGYlbih4oYe_7Gajv8fqeWnWN6j82Y6q0PYaxOEWTA_Y1cQ2VedgwdEzgc6p_LQNOpmzCT_EC8cmMyeXfgfnFClYZX3rY1dfSGh4SouBqHNmkGoFXOki8Cz0COzgiLHs0W5mFjFnVxTflgF1_ON9gV0qCEX4fqvOeKAIxOpBzFM-ReBJs-v85fNMyWM56tYgv0EHSnLS32-5n7AfPkXQfbVSlqsbZ7EdZfGgc1ESSakZwQtmYfDqDdSJMkcBvpxTeFjuIabUttBW3DjnbPtExq_VLwgQtOQmHBexla6Blqexlxzz_DqQLV8vgkYNhf7O_SAYI24dTAd5z-kxkVNdo--7e-sDyxms3rp_C7 "tags") +![tags](https://www.plantuml.com/plantuml/png/bLJTRjfC4BtFK-pdhnT6JN3I7qMgX1G4gAb4MWg9Sed6ti5ikzwrTjRGl7rdrn08jLBrQj7CcJbppeov8G_EDvK--q-PGZSInThxcZvbcODjlrH-tUGDeIkiyMXylx1LLcimeUQ2lDGgpqOVBcOXz70tpIeWZuv3on5NW3Be-dNeVpQKSgAnuYRtKAR9vgf_cPoBDxbr4jt8Qki6oV_o-ltbk-karu6-2kWLD_qRDeVYPrEVeAq3KoA30tgE-WJfyTS9aeEQf-yCBloJHZ4GOw0roYb7qXvtdg4ZQz9Wrxb8HWrvMw7ZecI6jkOAlmOl3A8KjREoAJmblNqLo4ePXWx3gyWxyFQFMZWaaJY4put4Ha4C6DoAu9RWJTNMi2aK1K99WsWZKpwl9gKQc68n6mOcbjXeYAJttAbYY536erj1qGuG6OgTi3O7WNpBTn8dY5izfhiyfHiUwnJTp73imR-Ei3VW5TLGgp31x4iW_04R2Eyj6AcH16Wj-EGPI2IqBLKXql1jz0_Myh6W8MKDzLwAVNjADSvJcNFpCNZ8WJ0GtQd2MR8hBnRVfv7PQadxJPwB-448deRLRQmgaD-LTHLuPdofmnLhjS6WfVsLX9-DL3uCNYfJXi22JMHT7yKJWZiSm_xw-N3dg7TNszx30o65olXNm82GZnashZkzdBUcHh5p14dPerCUT-dzTH_jlvkZJRz6D6s93j9RdW2ha0XAx9IukFtsk9nEFa--ZjFUsGqQsLJwDm00 "tags") ## Supported Diagram Types @@ -376,7 +376,7 @@ Additional tags/stereotypes can be added to the existing element stereotypes (co * `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape)`: Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. -* `AddRelTag(tagStereo, ?textColor, ?lineColor)`: +* `AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle)`: Introduces a new relation tag. The styles of the tagged relations are updated and the tag is displayed in the calculated legend. * `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape)`: This call updates the default style of the elements (component, ...) and creates no additional legend entry. @@ -384,6 +384,9 @@ Additional tags/stereotypes can be added to the existing element stereotypes (co This call updates the default relationship colors and creates no additional legend entry. * `RoundedBoxShape()`: This call returns the name of the rounded box shape and can be used as ?shape argument. * `EightSidedShape()`: This call returns the name of the eight sided shape and can be used as ?shape argument. +* `DashedLine()`: This call returns the name of the dashed line and can be used as ?lineStyle argument. +* `DottedLine()`: This call returns the name of the dotted line and can be used as ?lineStyle argument. +* `BoldLine()`: This call returns the name of the bold line and can be used as ?lineStyle argument. Each element can be extended with one or multiple custom tags via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`. Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+v1.1")`. From f5d06a70cb32c6a32f3927bb25eab503fb7e6bec Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 19 Jun 2021 13:48:17 +0200 Subject: [PATCH 13/14] #159 Update readme sample with new features and styles --- README.md | 2 +- ...er Diagram Sample - bigbankplc-styles.puml | 43 +++++++++++++++++++ samples/C4CoreDiagrams.md | 6 +++ ...er Diagram Sample - bigbankplc-styles.puml | 38 ++++++++++++++++ 4 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 percy/C4_Container Diagram Sample - bigbankplc-styles.puml create mode 100644 samples/C4_Container Diagram Sample - bigbankplc-styles.puml diff --git a/README.md b/README.md index cdb9334b..eb12727e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # C4-PlantUML -![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/bLLDZzis4BtxLqoTGnr0kqQ0ddgArpQwcwntrSZRJK_2Y1hRH2XI82axHj7_tg6i3yiEajGdQJJpvl7D6_gzysXzLQZHBr8BLUK4E-zBz_jqQl5mkvL-LsML8okCzgJzhJ3557ChKUzLLLRJ-MytiKBjNrQFKuMUdETGEkTib9hiRHcmVuLASs710E1t11kZb3b8lGN5IO0wXy5dQHq_6U36e8n0fOwCqJ6yRi1V7sT_Fx-iq_Lpd2wUNvycR_lOB4cJZylr_9w3JUZrONsVFYx_M3ujE3ZoqYl6RK4XbxYrM31H2mzySAl9mntgBu5pSdIUYj4e9kkCdeZAULEGZM3UFOrdq8R1REf3PLmTmO45XR8kH5N708KmbVPkp3nEqEaT1tAqnubunrYN1CPluPyHyA_ZEpbGbc9PSl8hPJ0hIoK5Ucdqc4CVS8yH9AKDv5T_pKDiGKhkcKPDZJtWfO1cnFKuGhZhcxK7ZsTCSjZPbOmzJlYpefiOjnIwjrqJOMNf8vZfRQNGXd1ipLxcv827-kqk6_PAe8vA-cDmWQXg8Hti9OOIQO7F2var1pRc5QF2P59H8yUgVcavpTz4y1aBP2M6NDY7XVIKWwionroQcVqCDtT5xaG0SjfBGPVq5jaaHuyPEWfZQ1u3c-JFHnYyUsEPMrW-iBILpblarY0rkxAefnl1ZfDpm8fT9IpbF3w9oaN1LEGSBy-MNyYBsokPCXHVIEUiamn-ZH--RPk5uJJRrmrq-u4-GH86vjR_TjPUVlKJAb2grDK1XblUhFYzMQk0lsRfPGtDExAImXfdDXwMNyKEDJliLCcmPvWDWnwLCVM6TvWkzlPCsc31PjA20zqfpXG6p4pb-p57tRf6mFFG3klpzYAFFf4wknBwnNnnv4Bl-_KwJZXnc7TQe-_d38nTfvxQfKyajxlCd5q39xXsoHkaEZWSUziGtL6B23uapq_Jy-RdBVzNPNh7sJsntl93b4-4kOEDDKLzwnmiBo7VIIOWDy2Bktbxpe1vfiU5ZHA6TK0t8LfZz4Gk73VaCAohNBXXk_R9QXqtGDrX1kLNlck52VNJHftF_EVOYlEUI_alwpy0 "Container diagram for Internet Banking System") +![Container diagram for Internet Banking System11111](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System") C4-PlantUML combines the benefits of [PlantUML](https://plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicate software architectures – especially during up-front design sessions – with an intuitive language using open source and platform independent tools. diff --git a/percy/C4_Container Diagram Sample - bigbankplc-styles.puml b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml new file mode 100644 index 00000000..59014e61 --- /dev/null +++ b/percy/C4_Container Diagram Sample - bigbankplc-styles.puml @@ -0,0 +1,43 @@ +@startuml +' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Container.puml +!else + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml +!endif + +SHOW_PERSON_OUTLINE() +AddElementTag("backend container", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape()) +AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) +AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +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 cutomers 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", $tags="backend container") +} + +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", $tags="async") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +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", $tags="sync/async") + +SHOW_LEGEND() +@enduml \ No newline at end of file diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index 965cc27c..0c38901c 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -52,6 +52,12 @@ Source: [C4_Deployment Diagram Sample - bigbankplc-details.puml](C4_Deployment%2 ![Deployment Diagram for Internet Banking System - Live with details](https://www.plantuml.com/plantuml/png/vLT_Rzis4FtVd-AgRQXJE7PYf4Cne40TssjSs8aHEKq7330eafQvKgH0KawyeTzzTv8osx7J7zWm35W2A19rT-_UlUE9UUC3Sw78TECvS6jMqWLG0UvKM08JGWLb3TFuAikO4Q2LaS1SMcJI13WUN0_7lTde_N0-kkoFRmR3rr4xWc2Xy1AqvKphTUEPMi0FA-OKIxISotlbWsz6ZpsZemR0CsMuBeI4TgVTxlJFvWEPQxici7PEIJwJsijjmsK8kV-fqt7ihfrYqaM2q0wP1FB1j3kvPeO87liWj4emwl6Kbcucuqx6V93kC90HQj5ez8IOiJGkyjowq8mMo2XX_6FKWk-Jj6-rTQ-Zx_W9_IA3Myp05c7gR8w5N5z89gHh7ZMmk69jMAOuQ9bYQ52UQYIWoNXGAnOaBXdGc4zPuoFq6FT-kRgPpMz7iulvUFXsU3cWI445BM6JBWmKIntBO64TZ92sCpB0EJCVbKaXNYF138vXh5QoqTYupI-jaCrSynP4z2x2l-SgBHq1bny_Ws210PS441tzWH80O6qUc3QZCQfDpOAEU6-4DK0DSuqbm4HATG4UuS_7JM7GFb5fWZZ7B5SlNhpuDTo_eYWtIO72mUcFxPCp6CzYMkl1dKm05SP61IUzek1KkR2KswyMp6KjO9nBJrLUAGO_luJpqTlZqHHZJNpxWSGUaNTinU2zTBucymfpFsZu8RkdzozFkvEdJJoPd9vqpxPjzil0SiQNaWYMDp2p6POpUhm0hzebPiy0GXZmjd1SGfdoSBXLW1rwzDEt9Z1bf4CeHH6c8-ZbkLORrSeef5cSEwhgv7sVbf7DIWdfzvjhKHXUpGSLrcMD6RoBhoux5xFPD0Q4Q6-H_jGehr_JEKzsIzqe8ZavtMeRUdogOMPOEwIJCRSkMpXXNkxLw22MTOnhakIgl85Zc5PneitQQPS_0cc1njsqWVgI78EaAH8CCQWTADorrAoUkm_B46CJP8pUni4wMKuFsW6fyi6Lrg3Cmhgil6_1alcb5C2Ai4HEjSh0dHJqoBH_s1sWROeFCl1l5klpU_jwIwtkhbhTpwdb9SScEAWN3jt0KlzwCuQFu6a9hsi9kziQncNqWohsDj0jy84PaUpbqAgcDitQ1LFQuXBaXSkjbnwiqUil9RalVlU_elv-ullzyC-CVMoDPBibS6vLS__i_pNth-kvt_rN1ZyQOOHRcNpbu1z86cNEbpNs0Sqvr0ShigRb_M-2nukMaBDK0jl079ejd_RF8vcb5Fk53pQJxha7N50OJiYLukNkeDGHzYe6ww1dXBDA4ELTgfKRcaygV_GYvmyiOyXmvwl6GAjCqVdB5ub79dP1pBxqjGiMU9scfpOZ7-LsyqNIXqXoc-MxB6cbGBY8CbQEMsyN0MuLRgSxJmbLh3F6h-87ie-Z9WvjfQiLFg-UAE1RQqcH_j8XMWiczdUbDMuBvUJ2thVgs373hQEeg1F5NPN0KAIIuFPRoUUCPb6bzHIrFjHICNSghrgbPz92CxTRUAt_NgsfwMlMMEbDK-40_Qi1giFEX7r4G3hoS4Jr690o-SrRKnrLq9kSaDMtUSnlgas5ZZlxnPQi-4RWhLHhh1969FLNrCC2rIbBTUTKa0-0xmRd_Ls7xbTxu7GHoSQbaaVwwY0VB1eruekhsys_5c-a4KMc_mG0 "Deployment Diagram for Internet Banking System - Live with details") +## Styles + +Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-styles.puml) + +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System") + ## Icons Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml) diff --git a/samples/C4_Container Diagram Sample - bigbankplc-styles.puml b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml new file mode 100644 index 00000000..67ca780f --- /dev/null +++ b/samples/C4_Container Diagram Sample - bigbankplc-styles.puml @@ -0,0 +1,38 @@ +@startuml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SHOW_PERSON_OUTLINE() +AddElementTag("backend container", $fontColor=$ELEMENT_FONT_COLOR, $bgColor="#335DA5", $shape=EightSidedShape()) +AddRelTag("async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DashedLine()) +AddRelTag("sync/async", $textColor=$ARROW_COLOR, $lineColor=$ARROW_COLOR, $lineStyle=DottedLine()) + +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 cutomers 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", $tags="backend container") +} + +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", $tags="async") +Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS", $tags="async") +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", $tags="sync/async") + +SHOW_LEGEND() +@enduml \ No newline at end of file From 4d9db66dfb327450159bb4eec7c4b4cefbd1740b Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 19 Jun 2021 13:59:05 +0200 Subject: [PATCH 14/14] #159 Update readme sample with new features and styles (2) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index eb12727e..6fb02899 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # C4-PlantUML -![Container diagram for Internet Banking System11111](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System") +![Container diagram for Internet Banking System](https://www.plantuml.com/plantuml/png/hLPDZzis4BtxLqoT71n0kqQHvb9WWNXjjTd0NhkMj-dD655ZcGX52YIr7oZwtpkaFsXxKwH0UrcOGyvxJq-Fe_teF5hVDQhtWzH2THN1rllM_JmSMdowhgNVTcNdo0gZFMb_BKmpR1Ngq7FbVALaEHp_TBK8fOVPTDYWysIvj1vp1qfDzheD-BtYq_pBUf4lY_dzUlwmcjxTvuDtlL5LvOeQXbvXFUYNABwIha0ScliPlDtmOcoKiJTlysa-o-zNwr_c_6SydywNl5_Mkzt-c_VlFqn67qAFss9BDxcijxwG5LL5M0_UHS8bgKY6xaMBSDZJyu5Wj5oop0EoOWd_k57u5qKt4tHRggQyla0FuCF_Xy9udoXwNdf5SBGNAecrnGOsniATPlSrURX5_LNg6eeNvwdfzHPadT43qJbl6h8PZ8-_-YCubC5im6y9IkxEu8dVFhIn4LMi0GfXEkrTdtNieDUtNAZGlWp4ZunrAQ3_3lxi0K3IEtYYSerjouU_K0cZjbLIe9T6zxdq6HynWwArGVpizt6eJKZ9HvOHfJdFPmNiymYegrW-yfQ71r-CMEGviskHuGhULdIrm9e2-u6r45QsFeEHhZk5DfGNrZnoU1oWKjzcsNHQ1Ecef7y1RzZ9QAI3HucXHLhWvuNIcYT7zfMYnfHIqTwEMLWSDOtVPF07DiXEd6i19Hl9WG3NbOwrcCs_rkPUYTi9W8eUfQ1BUPDoKA774Xs5rx3_6TGKlqtXREsDPMrXKe2bMZflCN23r1pB9lxEO1ll2c37kHAMAj9Ued9PY1Kv1yhKl20lhbyPjHyCx9GCYLtSVJiu4yF7REexTUvx3WLJ63ZULgpTpUjXnAh-EkO-V_O3Qb2gjOi5PiglPho6tO50lTeIoCYA2cPIMEFCnaF-BBQeQu9T9yEUOEx59TGPieaM6xgurCdtaCz330GN3WzuwZvWQJgVCf0Txt86tg9s6Ar8_lUMf4xcHRgr3uvSuFwqMYqAFdX-phNutJCfzOUZExhrFV70BasQ4H4kJO0zKYoU9Y8Hne6RmMV-oWmZUNgTSMkFa1JyDw3rBJSdsOVRSWcw9AmSRAnfui1wijAJ0sy2qPvdSZjco2FcYLiN8IiOrW5TXMh4I48kydYguRAlSvoFH5_CLeiTK7gOi_QBL2QVqcUEnzLiUkbLscRutVy0q_pN_7x2t_wFZDurwcy0 "Container diagram for Internet Banking System") C4-PlantUML combines the benefits of [PlantUML](https://plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicate software architectures – especially during up-front design sessions – with an intuitive language using open source and platform independent tools.