`LAYOUT_LEFT_RIGHT()` rotates the flow visualization to *from Left to Right* and directed relations like `Rel_Left()`, `Rel_Right()`, `Rel_Up()` and `Rel_Down()` are rotated too.
`LAYOUT_LANDSCAPE()` rotates the default flow visualization to *from Left to Right* like `LAYOUT_LEFT_RIGHT()` additional **directed relations** like Rel_Left(), Rel_Right(), Rel_Up() and Rel_Down() **are not rotated** anymore.
Legend details can be deactivated via `SHOW_LEGEND($details=None())`
@ -256,7 +256,7 @@ SHOW_LEGEND($details=None())
@enduml
```
")
")
## SHOW_FLOATING_LEGEND(?alias, ?hideStereotype, ?details) and LEGEND()
@ -281,7 +281,7 @@ SHOW_LEGEND()
@enduml
```


Therefore a floating legend can be added via SHOW_FLOATING_LEGEND(), positioned with Lay_Distance() and existing whitespace is reused like below.
[Commits Since Badge]: https://img.shields.io/github/commits-since/plantuml-stdlib/C4-PlantUML/latest?label=new%20unreleased%20changes%20in%20master%20branch
[comment]: # ("image is based on percy/C4_Container Diagram Sample - bigbankplc-styles.puml")
[](https://www.plantuml.com/plantuml/uml/hLRHZ-As4txdhvZZxdGWiQ2VxdSlbLOw5jBUdc2N0hlNDpI9XyGwnqvj1nPL_Tyx3Y5PsAskKli2yTZpVPy_ZoVvx3nQN-Qgym4IetTaFKWFU-apG26abqQZugayHor0IKs0DYrpqXwkfijeDbxVFaQRsxl9x64QNNU7e-6m2zv0wGYKIL2fG-UDtCBx7Lg9iQ8DFKddNQzxcTpjTm3UI9seKX2yJyblcfmTgf9UInbD_h-P6EsHbTbX4NRoXfIZvr2PzuNxQJIok1-clBCoPd4suIpIViXx6nKATN3XodcXPCoWLuiGUfZFHZawJ_PL7YtajjDPVRd_jbb4ozNztUR-OJsxlOjwVVPpZQa3LnQ5iHwq0LTWGWwa1fyHQCm9UZ4w4c2EeL8Biconr2a4JZB-K90Rm3wJIGR2w0--0QpHK1zoOwa_16QytJPXIs3fzv8OHvme5QKiUL3_WwUd-gIh9CZGXOEB2GHjfIRH6GiHAGfdpNlfTMDCldDYOqDt0E-sF9WOPUprksWMpQExzURdU_wPtC_kbpmVfyVPxjkF7pzDnvz2ZikmeEj8ffbVIK5Y5SQzFiySbQrPsFM93P8J7VGef80BEVrkFyXRaggaeJle963pfavwniib7yn9I2ZTlvrO-OEYwocwZCHCQXPpXXx0H_yDXV6-fUXuwHL1OoW8YQd57BR6mgtsP3Lvk47zFPJ4wk0yvPtEWgmpkfUKpfkSx00cpLDt3ASmc6rrw35d3ux7N5I9gAeOO9AOKdlNPHr7wCqD1mJQGo_v7sDT2kZsuOyE0BHwUtkADrWKlFWRnJ0k2YKJ33sZow6lkCC1h0eRnCyV9o4s9ILtBAEIvZolJQ2-Y81QLE66DpvjV35caUVCha26M_6qegi5fXJOJwohnCh23s2iqrAX3U65DJifo04gzJhBjjJ9iTr9Vm1lsCdAI0SxYI55Mk3zGcpDtf5zeIWtiLHKsp4FWqRJvEq0ViCSsObpBQ1aBiCDTMNio8FP_cDjxeMuem0Gj9C9NSgRnZs17aE_2STGFmOrgrzdS3RsnfA3q2B1KYgTjzMHWjHSbddrF82ikYk0fSyWiIH8UudA3K9PaNEWJCe3yidmXL7rnMQdPAZOnUthXJCrlCosUMVE_S2XO0e3LxSLKtVzedMng3-Rie-UV8zob6hZgW0JHLTp7jTNBZ2lCm9PaQA2kKoiSMRh8NfACjGfmJ6JOPzXrjfQLCRKMuivNTpfrlPGdgSgI3ZGxE-P-O2nANrR0eFcAW_0MzGEAoTQ-pjBKi_QHNjf7novmFrblLwiUE7vEbVW3zVKHT_2rNIRkz2hOzEsY0gkRG0rKXKyAuY6iEgt0_ZAhzLHHTwUPZLL8xGA_XtGveQJMzdjPJa7NH8A1rjhygfVxQtqvC2RG5JpJ6yc3DbWFdFheiXM3Ek0haAqmcY5dDNZfORplD99dRRqg_bwKGCrcpbBlwZArgVsBSVTQZwxzAgTPlZZHyyi-YMwc_RwdQqndYm8YtjzVDUSFfzWDuJtuS2bqRr-vLduk6fdUVXuckvyPfLbhlu2)
[](https://www.plantuml.com/plantuml/uml/hLRRRkCs47tNLqoykrWPSEosktaf460TM-rwOJkkvMJx9b3IM2QM8bMIicCK_VSETRETf1UWVKdCeURCuLmE-SbOfcsP2-yz94hkKLlW5WxSxe2bARTSIIPeAy-PJ45mYS1qLkOeBLnFry5yl9az1j5iEPa_J8FRtd0q7FR0AYWDWb094-BeNV4jlDippLaiCC8dRgpnUy-TUtqFu8hBH9GfmhiCRTJvx9aeyJMNqUHZD57ICcAcXuKxoHKAW-TGEsiBy-DefDbXcD79ofZ8QJgkfLCCwMoZGZ3fid1jR2fuJA3NAsTwMCn7-n-6DyFlNeqZKxxrlF3p_TTe5Qp3-sLq_x2PpvQ1twTyRbXcm9H5eIYfKe4fM886k0IxGv0iH_1ZPZ05LPjAcQAc57EPWR6eKTbZWMO0XnrFTf0g-TvsW0qQayTSQUmFWIBEjfrP8sZyhKJ2ITkG0ZEYF6Z-WyMdfjAL4-oOSOMB4LBSqZ5JRvocWK1NQpgBtujPyeqSkpJq1l1sIuk94ahVlWtcmI9ORgAVxkdFv7v-lwRzEAjtUsy-VBYPZc-SZzcn0cy3dkrio5DCGxVs-xHJCziGiTiscclBEXpuw5p0E9y-TGlHMwEeg35pb8d3TeTg-8pNQofCIyIrxbzkXFOey7RAp0xJEQtz_WMw0n_zFo6KjQSGdkLM87G9XPIpJBCSjah3ZDfJIxHmn-GtrnBXaOgPUzuAjL7IJqfZLOvw09FkLsyChHdKjYfwJDw3kin5vKZZx6p0aaILqXfAf5T3HtTaI9a--idtXFMSGAyFlzDOmOclVy0uOaL17t_56CP58NZ2d6PGddfVs9uD82oq8xzud3ZR50KdaJ4LDT8UonDe1X6Sm3Xp5pTk3xuQLzfm7fbQbk12sXPulM8PkkXjr33HlB036Cki5CprQM-brPxwXYP3YDUZR4kPr7B7xT4DGb9MYJImvyovS0rqNeYrEf1yl62KgvYJKjNfM5IBbjFapG1-PJc9cRpaGeAQSpUXfemDSMbgzc-ucHVaQW8ql7kUu7DwqzXFcMLERrmPcf-EJVZB72xMblJ4EFtM924PQRMkIaegGcsPLxy7JYneLe2Lr5U9nfGAo9aWhQAsGcD8-ZDQe4s6BnBL33PbYhkENSrURvofeiyqdAlDANF_a26N50AkffLK-FQbTFMzFxgs3vwiZpdZ8ZALWG85rmjQDoFd8c-eBBmAIlEpu8bMHcqj14_9ZadgljgJOCym6sudLCAKM-s4_tAcpzBkshFfWeGCtVdEaWyiLgKzjS2W6-K1KAsaOLKcJkdtICVEvE8qj0y6ZOlzURDPXVJXvNVrYFtzDnTDNtrQXukMJgjZTIOHDLmh00rIPRniY3PWfRS3-4BNwgWEtbMpbk8QuPp1Vm6AxiZvHFiqB9UWQsIfWQrMUQLN1qtZwwvD5wY9CxsRj5bmc6VPUjPa8S4Qm6jdhJ1EH9xruoM7Ix_IE6tkmeUBpQe1wWvpuVwYAziydMuvKYjw-3pBrTabs6yUFVFWvs0vfSVELYdhhYzwOSdwhccVJx0VqjEF2auTwVUhd9qzhjpkvEDZk-rz8fRqjFeJ)
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.
@ -93,13 +92,13 @@ If you don't need the up-to-date version, PlantUML includes the last released `C
### Now let's create a C4 Container diagram
\(If you don't want run PlantUML locally you can use e.g. the [PlantUML Web Server](https://www.plantuml.com/plantuml/uml/ZOvFIyGm4CNl-HIrfowupSMJfvNrk6BnprccwT069fEGcI3zzhO5YoAAf_VcmVlDEub2rXB8N7bsL0Qi9jKajzPcU6z7hrFfYs1saHLPMnU3JGIyTewY0_dUdc-EtHgzFbni057CI_HsNXhW6NERLhxfC4la9croHnxakgelq2FLYtbCwYC3LVSeBlljgWzcXpJkq_selg2RE58Svpz0pxCeXaOs-UztyuJqVV3lAtR4bpa7Sq8UIg0F) too.)
\(If you don't want run PlantUML locally you can use e.g. the [PlantUML Web Server](https://www.plantuml.com/plantuml/uml/ZOz1QyCm38Nl_XLPJYciTYdTPQUCxjYniAtduZYYCIYoiPIM_FicWPQDqR7JUnAyJqybYqtITwWUF3di6yXQaSZFnYHxraSlRL_t3Ca54Y3HBdGcegKfisHfqDTckrbMqsh_jZEdjNxIgt5rs8u9wmcIZXDVLP0uK15dUK5l-J7BTxO6p4Vp7iK7ifYz0hlavobVg1kaS5VtA_e5hgM0uJZy0VeSMA0hU9R_NbSVW3yBtsznGtohir0bK3D-Vm4=) too.)
After you have included `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Relationship`, `Boundary`, and `System_Boundary`
> 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.


Elements and relationships can be decorated with tags and explained via a calculated legend, for example:
 relationship versus bidirectional relationship")
 relationship versus bidirectional relationship")
## Layout (arrange) elements (without relationships)
@ -369,7 +368,7 @@ Rel_L(x, s4, "uses")
@enduml
```


(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.
@ -404,7 +403,7 @@ Lay_Distance(LEGEND(), db, 1)
@enduml
```


## Global Layout Options
@ -444,7 +443,7 @@ SHOW_LEGEND()
@enduml
```


Additional `$sprite` (images) can be defined with following PlantUML supported options:
@ -481,7 +480,7 @@ SHOW_LEGEND()
@enduml
```


Relationship specific sprites are typically smaller and therefore following options are possible:
@ -532,7 +531,7 @@ Rel_D(user, user1, "requests", "async message", "if sprite starts with &, it def
@enduml
```


## Custom tags/stereotypes support and skinparam updates
### Sample with tag dependent sprites and custom legend text
@ -711,7 +710,7 @@ SHOW_LEGEND()
@enduml
```


### Sample with different boundary tag combinations















