diff --git a/C4.puml b/C4.puml index 1dd207d..6c1ba0e 100644 --- a/C4.puml +++ b/C4.puml @@ -51,12 +51,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 6 @@ -154,6 +160,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) !if ($tagStereo == "boundary" && $bgColor!="") !$tagSkin = $tagSkin + "skinparam package<>StereotypeFontColor " + $bgColor + %newline() !$tagSkin = $tagSkin + "skinparam rectangle<>StereotypeFontColor " + $bgColor + %newline() @@ -170,7 +178,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) @@ -317,7 +325,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 fc07bbb..572d8fc 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 eb8ea81..93a7769 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/NL1DJ-j03Bplh_3hEpIL-XBrYHEdXX1H90fHau8uHTl4a1NxiTfr52h4VsUZbXPnikmPpuozzCGTzKh2wlOwhyigt-GFrNEHGycLbSZ-2Dt8laNeYAo_J1B7X_XLKDVlUe-kCPfGKzmObRm9rtIUkYIx-5T8hccxlalmFU0jjc5OPu7CXKONs-38s2_BQCPOWSuR7V5M2Js7IJfMuSbnCcuoO-NU4whwolIwvMuVDOivJ0z9fpFuO0009vTem5tDhGqwJxY3r5ef6ax2w4aOPN_da9P5V9zNOSKX_8yNi7xCHYoLqWmUnWCza876ACi3HVMIX9K8rI28q049XL9ez27Rvp5TH0Smw1nf0MGRbDzNdMDjFVhHRrLLHHbO8-c4dcLka7neSImlpgYVAylmtV6PNm00 "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,26 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![SHOW_PERSON_SPRITE(sprite) Sample](https://www.plantuml.com/plantuml/png/ZP1FQzj04CNl-XGRzn0PR8c4ddgAAqnJQ19XoSrHh5UJQEd-MNPcSKtfT-yiTknIUeWkOlQzcVURkKEIaP8rehj_UXxQzQPxUXowTlErNvSOeYQOYqxQOA2uqawPD8AOY09-gkiezzMhfYdj4a9KtX4ugfItzGyTrOGqrSt7PMkae-t3jnf-iZx2o8z3msQf7SGgS7XnDS8BLyAZRBb-Hq8J9KumMkt6-YrXwGCu19KO-o2PG1CeIX5kbvfxiROI2U9baLDStNXhlJkX_2jkERcMnXpbuZztch5ro833QmHmmpbwDY-A5Y9wLygCkX2pLVvhf2Z9HzQx0nBOuRDFRfJnKAgRXRW-7lnwBduLWh_piSezx0OP0izvXfrOXM2qagIzc_5Jys4XLbrRFQvxReaWRgiRyV2zoThA6Bz7aI5Ha1VAso3POfCXpLcYtsiYY8Aq1SDPo6o_JtGb7KMUSxBbnJPWthQwO6qHCEVTzttRiIkRpkfbp1SWv1BoxoLw-tVB7RWnMVC7 "SHOW_PERSON_SPRITE(sprite)") +**Using SHOW_PERSON_PORTRAIT()** + +```csharp +@startuml SHOW_PERSON_PORTRAIT() Sample +!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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/RL3DQjmm4BxxAQRRmdfXQvFGKw4GTmbDeScQjTCSZTQUh4Nr8wGHxbBwxXrLJT93VB2acM--dxaA93n5hQ2xsJyCxVMXszyDxVxG7vglVRc1JcYdi7WZpQZYX30JkV2nhhrOgfEaEHvZG3zQGsYe6gskVqW_pe7cUlVXVQk4eVlRRpN-93GJJbmSTjQGa0PzvLYuA5vNBeeMVR2c59EMPWkh9fqoa1Ta_MfJTET0g8VFDff9-7CvNcnXdUskD_2h0FwUfSe5ZuDmZdaUy0YDSqgEWgGrAoxjtcwXwThgxhhd4OzmMLt0xVTTwZLAsIL0IXc0B8nMEy4G7HL9fn3wHHAX1v8Q5Mi5zlRxdxkISfDvCYmPBzOW7q60-viFP4YSHvwSW34pTuBpaX1eHfD-u74aOKuifiJPHaepCJ1Ud3ZTqw8o7qlbToRBL1paNRvzMcNOPJ9oGFMqtfVzt0SCAVXDtxSTenBekVkIvmjIu2Ucuz5R_V_85PefQlK7 "SHOW_PERSON_PORTRAIT()") diff --git a/README.md b/README.md index de01c70..e116916 100644 --- a/README.md +++ b/README.md @@ -106,7 +106,7 @@ Rel_R(api, db, "Reads/Writes") @enduml ``` -![Sprites/Icons](http://www.plantuml.com/plantuml/png/hL9DZzCm5BpdLtWh3brfkpu05oIahTh2Lkf7wGSLf-hLVcaCZXtyd9QVptEQhI8-90wSx7Z6CvvvUQ888TQbpUwCKxRMA8eOAtedPO3Buyd4eZxMX45v5z75H-LB-Sq4LL0ivEZDO6N1nTry9l47uner7nv6J0RZC3nMIJgxqvZpfnXFFaz7oyNc7pnYNO4EhsMLz5baO1WTvCmOK1LCH98bKCGWDPuJHZUN3yl5ThYVR9RpoNyrQixWWkHB7Boz5NPB9S6TQWjjwD_Xht26ls4bVRS7VjaPVxdUJIDhPb3RwMpuPRdR7lRJxVDXDlauMOpxzrcsOe9t_KHy4BrHJT6N67gyNw6lB8fOG1GEKOigU5shI0o-kYPztsiCUlVPRO1zge0lRrR3fD46JDjjWQ9aYZ1SPSX1jTAHprLhUyM0FSI5k-yQlIXrhQ0oB3nSJPD-AYkjp-2qHH9WhU3PCP58M7yogYkNs5sjyR6lZtnx316EG9YKvaO5JpwFOlDfraXxg-cbXWVXWyOWs8wVVVP68Q-v3oL4urtNh3ChzipMQDk-hrtj22d9DxyU4nBU89plp_1XVStUF7cDe4dkarM2dz1fdlTF "Sprites/Icons") +![Sprites/Icons](https://www.plantuml.com/plantuml/png/hL9DZzCm5BpdLtWh3brfkpu05oIahTh2Lkf7wGSLf-hLVcaCZXtyd9QVptEQhI8-90wSx7Z6CvvvUQ888TQbpUwCKxRMA8eOAtedPO3Buyd4eZxMX45v5z75H-LB-Sq4LL0ivEZDO6N1nTry9l47uner7nv6J0RZC3nMIJgxqvZpfnXFFaz7oyNc7pnYNO4EhsMLz5baO1WTvCmOK1LCH98bKCGWDPuJHZUN3yl5ThYVR9RpoNyrQixWWkHB7Boz5NPB9S6TQWjjwD_Xht26ls4bVRS7VjaPVxdUJIDhPb3RwMpuPRdR7lRJxVDXDlauMOpxzrcsOe9t_KHy4BrHJT6N67gyNw6lB8fOG1GEKOigU5shI0o-kYPztsiCUlVPRO1zge0lRrR3fD46JDjjWQ9aYZ1SPSX1jTAHprLhUyM0FSI5k-yQlIXrhQ0oB3nSJPD-AYkjp-2qHH9WhU3PCP58M7yogYkNs5sjyR6lZtnx316EG9YKvaO5JpwFOlDfraXxg-cbXWVXWyOWs8wVVVP68Q-v3oL4urtNh3ChzipMQDk-hrtj22d9DxyU4nBU89plp_1XVStUF7cDe4dkarM2dz1fdlTF "Sprites/Icons") Similar to icons/sprites is it possible to add links to all elements and relationships: @@ -129,7 +129,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/jP9FQzj04CNl-XHRfGS7R8c4dWg6EAQqXwGrjT8UnKexhPRidsLcX6fAltjdhJWXzDH0TD2YDwFtVZpfYbWZZzwfQqssLtljauFYZGsz6mseWJdH-xf6FLK_BGzZDn9W7mD3uAgFlhwts0_4Gxrzjzev7VZkzgQ6Np8tO4HijxAiRG2iakGKnGwGObXeusrOgdAJJqkCcYEMI_MM4bg6TPcEUvTPSZRShyiJoynn34yvK5nNnCRPxXb3vs9NUqqCMD_eGnpvIs8R0rNUd0tMG3idj7FWAkAAXZWzL-TxULxi3sBas-iu1gFniEWlX7rkIyspbuAMv-fteUHwB6enGTVgb2JXEtHgavAplSxifKZRiwNQx7VLvm-Dl8AWBgiBTVjjc_CDK8_hSkDSd4ZbJqMAenA2f6NJZuvj9cucomoes7fm4aclqhBKzkUXk0NFYSB_aFtokehYAxZJ__DKrHq1vNu-DSrk_w_xoVBedqTYb7qU3Pu8FmAJF48-Vc3q_-bw1S68z1S0 "Click on the image that the links are working") +![Click on the image that the links are working](https://www.plantuml.com/plantuml/png/jP9FQzj04CNl-XHRfGS7R8c4dWg6kAQqXwGrjT8UnKexhPRidsLcX6fAltjdhJWXz5H3TT2YDwFtVZpfXbWZZzuLhspetMX03So9tjOrwgdwONaOkv40-nWO0bTzzFM3nNuW7khjczNEwS3tTxSr_9Iv0IDYkvLbRGDWbR9riGEa61RQU1kMgjpaqnAZveZbKhscX9PXNQRZtdMMd0qFw_B4CdCSmrCE5DSLiN6sUy7GkTZLNXC3rhVw44V-dDZ6G9Kt5uCrqCu9xHouYhYY8KulrVbUNXRxWnZvzbqSWz5uMFHNmhxNFZbGy-nSqF9I_IgKN4z5BIReMfsI97o3JcrIShRNcRqKQNknL9lzhlhqlf5N4DHrTQNklcvplW7gSLrkd8iJgVofI75KGf2qRFhHiSt4pMIP0HLR3y8Cz5zQbjf-FnQtu3bH-1-ppw-hABw0E_q_prNT4r3kvsFJxFP_kvyiZ_vv94RPvydWcV03CCaZvECxHl-FhZSGZ4X_0000 "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: @@ -236,24 +236,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/kirchsth/C4-PlantUML/extended/C4_Dynamic.puml +!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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 @@ -268,11 +278,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/VL9XQnGn4Fs-ls8yIctXUgkd22S8HKj0K2oLVYvfTkusN3PPCxCz3_6_EydktUhXThuaxqrcvkKbryGwSjUuueNrndKLGitSqlkoZ7gts5YkkyUEC9hW6JqlJ6ZAhOsc9gxBJs-lRftsVF_rIua_9LzX9UJ3pTxhnff5cneNjnWf-8lKPGwpUrbUpox_PfS3lHJw-vuOcmlAY_0zbaJn4kmQg8sM4R9gWft8W_FvWQrmRJqIQFZMelyiagsP2ylQEWB2yMuorUPqla-GqsLnX-xXPb1v71_nHuV4D9Ezfhqtq22Htc0Y9lLO_gyMS7QBS8x-2PtCl38k45RIwMneym5cfzd-vZx4HhjXcZID21m2FDeDPDrtW-w3czQlfIAhDg6B5cFQJdT9sJO_oB8VI2qQcyvAWSDuhAdranH93QPPLJ48F-DejTyuX5y5IBmQOyJgNwm-gkUmMgrMQXghTodK55Pl-b1JU0Z1ftf_9qTF_q685SRiP_f2QGtUxRCzew4kX2r1sCxxX-OQXmC7TrBTSNzPNAElkiRz0G00 "Relation with sprite or OpenIconic") +![Relation with sprite or OpenIconic](https://www.plantuml.com/plantuml/png/bLJVQzim47xtNt4reMl1ZTDa6sGGAEimZ7MqjFIvAD8b5f4bJvANbR7_VVfXDSaQ3telydsdk--xu-GhOucsNIEo4owfw1X2RMrhFfMb9jlncjkwMtO6DLNIehHZgffompMjZQtBw_SNTu98-_ZzfiHVBiwGEV3fsbrs_hZrXRCxr4R9Cr-bWFpH7VdvFdZPet1vY4yJFZt4PmcVEJnxU3OMcpCJ3XU9le-y0wbqGmIOLdEB1eX6i4h1agyXkqVnTDEBIcnShbo6oTqdLPtcgFtdS1KN7KLuaRT1u3GI6qe4ieCKjGcKztkKiq7A8_cttuwm5U7YOZB-47cfQfPSOfy8HB8enGa60XAtVIGx6VLNsSDWnJVeJSM65V_3vzJwCRL8kH-jcwz0_P9DYOGbUawMHGn6LdCYrmBXTmRE9ZlR-TMXNtsk_kTNy_cy6lQhZzwg8R-QHQk6_6IJLth_fCd6vNzPNQKPwZ1Q_mRz6GQJnbA0u1i4MoD4F8raVp4I5lU1hz8gX7TkOCjj3QT5GXckk4G316vRb5-fafmM3hM42mC6Tty3fvM7SFW3A7Ux35ryIVlHFsIDFpeqDdH1pBEaqA0nP8qU69J3xL4fiU5Jb3zHECeBAfH1jciN5f2_YfvdLoXPruY_ "Relation with sprite or OpenIconic") In rare cases, you can force the layout of objects which have no relationships by using: @@ -323,10 +336,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 0000000..8e69783 --- /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/kirchsth/C4-PlantUML/extended/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