From adbedcb1518d5e6f856c81ef0d8120fb1771107c Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 1 May 2021 17:33:05 +0200 Subject: [PATCH 1/2] #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 58aab7e..f958219 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 820d961..d56d198 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 4dbc3b6..4ed6a68 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 4ff6bc9..0397168 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 0000000..190075c --- /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 2/2] #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 f958219..290603c 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 0397168..cd975e9 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 fe740cd..24e7aa6 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 9d0ce2a..f20a6e8 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