diff --git a/LayoutOptions.md b/LayoutOptions.md index c5b64b4..97900e0 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -57,13 +57,13 @@ Colors can help to add additional information or simply to make the diagram more It can also help to save some space. All of that is the reason, C4-PlantUML uses colors and prefer also to enable a layout without `<>` and with a legend. -This can be enabled with `LAYOUT_WITH_LEGEND`. +This can be enabled with `LAYOUT_WITH_LEGEND()`. ```csharp @startuml LAYOUT_WITH_LEGEND Sample !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -76,7 +76,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_WITH_LEGEND Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4lskNy7hV4W3E8sJFfhD9aRzK9fW7IUmbCtURGk3jiQnS2LI8Ecwtct_-mvbcP7D28BitW0BN1cmPN7cp9aHUVZuA1KLQXP7pZxfy8WBYJTxfPVZ_1R096H0t9vxu_RzuUKjVdLkUxS3idUPNWuYUMeHXUon8gRlTgxwIqJl-jykEJvn7Fb7o18gQ4pGYCuYvSDtrOh2HnO3KsICNo3oPdD1auSmK5DoqcZadiVq-mr8IH_12_y3vFXT8-ybOAmeUuo0_DSXU7c82bmj4hZaJ2qzJj8MEQK1dsDoP48Z2SxFF4nB23xF8DAoahttwPK-qL3sqto0dyzoEZyVyHaBg5Wqcoj-6omAE3Ui21iytgPN-hJDHG2YwBb-eq02AgSGQ9hxf4SNVAQglUA88-DUw_VRUt_OyeRUFro_SvLBUKJ7VpmAdMp6mtNTThUJivXI5in5g1GmeiGCx0wYi-lJ64Yjm-DmJ3pA9BdnQiwohv09v_hdVC9r_z5XBWG4pGSg6DRpxFn8DpH9Hm1L4A2v844enpCfGyxgX044aYXEHa2-qIWCj9Np6x3WAKMJxofN__PksBrzwADValfofNYCkFeT8-ocVS-zz8U3wqzNFebWehIB21-dAkU1XMylUqK8LGTlvhXu1KFCWCewWM54Hn0Tv0P2xU8YUreZQpsGIfBvbGFg6zqZdmScdvUjNuiZO6O3YAXEMKx3f6AYw3fSSJgkhq1FrkYPabxKQWTaPPnlC7xaJ9CtPQaKHi5uodQAzuKT7PrB7CTd6qBP_9p1Vpq_qktDewFQMWsGsqJmk8vcFFUkCzfsKvtK3W-RjODI39EO3MRR6DIrkhLnoBzQEMXlcw3TfXcU7nvgXkLGDiyI8mE-Xju7784ZBhOf9cPTZBLhKP-lgOcnPN4Hinnono9RDUvkKrmjh5Q5kxkNjXYRpranqOBGvH0smz8qDiftlqtvxk-i1EztBruHSb94iPX-EO35xRvIsNhRb4rFqLPwlTqBLumD4rLCj21q2KG1mrwbyWssAPzUtDWv3dv1_Oh1KRoAArYOHpc6JR8yawSLDBc2A87A6p1qDkgGmlA3J6l9uUTf60J0ldOFquOrd_iId_jdV0ObFeDdV7ebFhtC9zqkZda2PwH5P9Yk42MVg3aLUBEG2kBNQ78dmfYA1O48zCPFdX5_QXcIa16fiRI7DqiIBXGYvfpkW2SOWB9WqrTcQ-jeGSQSCRo3W2XEL4cOQwQ01MXBPq48R8nvkDz0B4OyMDJrGdzAqZSUZccKncMS7JuzIL92TOIKOR0ancSglUUJzU01V8E89peJXAHObcqtxtVkmBlj3zkVLZltnkdRamzjq-x-otS7_LPlQ1c-FzKVO-ZzxldkJQxz-FZzQRjh0rc6VqklgcS51TjZFNmuQpRjpRlPwThd5QbfgK5xOqUwKH5xvzpuyARz_h9m9m_VaHoZqV05EPktK4h-jAK_XUINtVybE9kULKZrJUV3PQTHNkSNv6ptzl8wxtwEyd3jNmrxxYUtttMcMZUaIT69u15Oi3mxS7vSaBKB__jeH7uuFyutUaOpio3BNfgQcEoAR5SbppjjLAAf3JCLNGSrXaMWnWaJIjEo3rtsYPi9VLKzJ0bNE0rPPhXsKb46fcy2a6FnFEeNzeMjB0eYRF8TkjzL1SuvvR6XRUJT4YW9P-9vwLkja8KPpXPv0xORSJk2pNVRofUJtxdo9U5sE3Oq52kU7fBFIx_YGxxjru0TpXH5QaAIUQYc8IFgvLQ5OnEyO1teRwpojbda_HsTnX528c5ZHCLu6Yea8-ih1sIHukgxvMdfaLocIgIYaydsYyKEJdgjwxuxoAtUthuvxNRV_QBLcwdZYqpI9ftojKNrwVclwHcTh0fdkEOz_pcJkD42eqlMhjiIgEhdwYJVN_CYLeM74VJT2UN5toAtc-nR2LLNVkDQKVnD5aMo7oUSwVkyx1kdSi7FpHkloYSEE219D9CasMwQC6GBfWdFbdKT8wVikuZtpTrj7sKn9zwdxzhjoyOl4c-JtMxYlTT8hmB5DZaKAlO7t4zrJ_-l5FilnJR3-CzNx2nGaM9dpI-lsCNad6TwevFjBMaGXqYfrjA_eLI2AYxmj7jpWJu-hfDzZyP91Fi7o-6PcvxcC1hI946S1nYHLf94uJXTEjRmKMUlJbhUtUk-wwEB07Bo-fZS_BEZsrfHnEUIp2IoqIgdCz3w5SyY5Mg5z55J5GYYmXWYZ2MHsy-CtIkrR4ISp0mRdG54gwoUQDrBa3hUbU_VUMYbZKph4ymdK1B_WlxHPynvbu_0WbaS_Gy0 "LAYOUT_WITH_LEGEND Sample") +![LAYOUT_WITH_LEGEND Sample](http://www.plantuml.com/plantuml/png/PKzDozD04BxlhnZhuKsX9hpYoLDZBAtGrj2a5azXcunsOJ-MtLb24V-x4rfRmRqCEyyppySoaWoKZ8Pj-VthiUrENzfDjrsjL_lFq4ZZDOetolOw3PY2XWkHZn-B8iWn_wdeaiufOkYT9RIKzyuK1zNBCBYzGe-wg3wygxMqTDnj2oCZOU1LLp5VAeiXzsmjnF_UsLo86aDqDfE3KNO1itAQAbAGvC9iBfehovdkaqjsaE6QzQyBUBb5Vfd3Bm7y7aRPYETEUiyw9pn3wRtcdAISdV6gUhk0igdp_Qhbau3mFd-5tRTgmagjtHXXgXc17717BvbYaYR5Nj2EYWW3a3AesIjojj_tT1dTGDQvqnWK1zH_MprZ7IDVyjoqRTqmQo8zqAVC6Ydo5wVn8pZpxyaIxP2C_WC0 "LAYOUT_WITH_LEGEND Sample") ## LAYOUT_AS_SKETCH @@ -90,13 +90,13 @@ Without any proof * if they keep what they promise More often these sketches are used by many people as facts and are manifested into their documentations. -With `LAYOUT_AS_SKETCH` you can make a difference. +With `LAYOUT_AS_SKETCH()` you can make a difference. ```csharp @startuml LAYOUT_AS_SKETCH Sample !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml -LAYOUT_AS_SKETCH +LAYOUT_AS_SKETCH() Person(admin, "Administrator") System_Boundary(c1, 'Sample') { @@ -109,4 +109,4 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` -![LAYOUT_AS_SKETCH Sample](http://www.plantuml.com/plantuml/png/xLfhRziw4lskNy7hV4W3E8sJFfhDEaRzK9fW7IUmbCtURGk3iSQnS6LI8Ecwtct_-mvbcP7D28BatW0BN1g8PN7cp9aHTVX0Faf5XPhF8cUVT7d4XSIBlSBcEBy5C0aP4BVlNhi3VtHnWt-wD_sR8TcxI9g3I9vQHY5xB8dfkztBmGhHk_gtIuvF74V-4RAO2ZeZQ4JdaVBXksf7uIER0LDaZ7z0PCqMWiRtOQ2cvAJHoDoVqU_N82Lz12_y3v3ZTusibu2nekmn0l9VXs3p41MuMiPmmPbQUPmaFN9A0xx0vCY4HXASdrcOjX1yaK8aPILxxvEMtD5GzjriW9_FSces7_YS1LGiMwqrloqMEPmRLeGj7c-JbjpjS160oBkldoYGWCef19hcFkdJ9P-hSeyuuiYut_xzviuVjRsHzm_NxrvcKdwWupyUXKusvU6wRgVNpLXCAGiM8bGA655Y3lO0qTaDw0n8hSjduPXub4boxTMSrLWX4yxrLtF2zVZHOSu51ArxAXZMywnvf3jQf2k0AWZGN90WbEEvb25dTS800aaK9mz0lj4e3BILynkmu2b5a-ywL__cTjIxkH-WNvpuSgKuCWxrCqRORVk-U-6FXbUVBdqImKHf5n4-JbN60mlVMOsA4Cg-lAdZyXMCC0CgwmH64Ns0w23p8jJEpzExDR8n0gaagLyneBxG8_9vOF9vrVirFm9cDeI8wfJbD8nB9egkepMdu_eQz6I3dYdfUQrsGDR6sGxZHyuqULEMKc4KZATiftXVsD5HK-9xVBObbAtFAVpNvf7kRnqTrJPgWDmcWi_gQCOpppgbRNVLIUtmi5KxACGmYTbWjer1tQXR1r_vLwb3ucqJjFiqm-RXeMPO36NpB30ou1le0y0ty86BAiN4h8kmgXVr-PgQ61MBYvX5aBiNUPjuhqfnjR1Q5UxjNjfyRBvW-KHpGXT3M0oBqzWgtrsLyjtTMWdUxLwyFEGuds8U_M80YzjTgRBrgvHDJz5MUltT2vUF3HELJpGdT0543iD-gV8DgvHFBsxi78U_fduvu2XU-HNCpQCOmoPPdCdJ2ffSGXH3wGqOEXjrI63vGQgrvF3pD0m2O5zxXqd7XizTWS_TCpx30f_XCpxz0fz-wfDi5ySyXZFI9Z9CLeYIJzI22hnOIWMprsXoAy8P5Ki24UYDdpmZ_jGo924ZKcDf3syUnrmeHCmutGAFCG1bmRQlJDVMqPACEMDu1G5HdAY2C5TC0GlGbiw34DWOyt2_WLW-y61PrmlzAKcUU3YcKHANSNRuT2TE2DKHKeR1YXYVg-IQJpQ31_0D8XxhJ12IObcgRjvltQ5tCnXrFgrtxetJjoSVEgRV_PVl3WVj_iWoV7-gFyRG-ztptUjC__7n-zDEpmQo3F-MjB9d1JdRO_twSDPgsPjtizErpoiIqqA3pjQETAiYziwvyU5Dv_r5xauUlYCvHgFH2t8sJw6G_6bRVtB9huR_It0s8okNwflkXujkexZEByZP7kt5TTxz7EN-ohySzTrFxg3dJBLkI9EY4y4Zi61rTk3yE2SR3N_xQ4H-E3-QMoEZbLgGrIXDJ4nsURRhacUTjYhHqeQfYcw26iCyKEE42ILfsOSk-yHDXRwi7YQ4Ivo6h3BSEAae0jCN0SYnU1xr2_l2rXOv4RRvZjplgWHdMtbiyZPonGGAmfbuNl9KIsGX4mUBl0LMdRWLmUPRjVB5v7UlV46uwiU6XcB9qqFoUUMNVyXNVGtOvKnHf2OaMOHg6ZAYNcvLE3R1SzQ1_jOghyeYx-_eD8uG4WaR8oh6qr0X6LbVEo2B15TVhKvBZ-GgLI8LdKogBnQxEEcrhmRkCBDwU_lcjDTxzujMRwQEBp99ctIArnRbf-U_fcTqiYgSufhd_ETCuaOBZ2xPksvReCgUgvFiUCsAM1aUbg1N9xGj_ZQvoh9l9LHU-OrhIV4tMUJ9_Ypc3AytPDyu5Gj-PjvuLJnnm069exaaSRLfmf3DcIOyMzPrZ8ooxoBUrxSt0vJ5Z7YVlkjqBXg_IBnDThk9zruZQJcARNB8LUmFk9_gdVwVAVPVYfsEdJzViTD0bc9RF5vOiVF9ETQ_IJZfpf86in09rThwEvHAKCK5ddLlBy_7ntMoxz5P7C7-GVfoFarE2tWOqJX6d7ju8EquZi9nid2iuQtkNfsqlTlN0zT75m7avFKnkVvdL_UreuWl99bBPACrJlFNwZMRHohK-kYZeYeGH8KpY32MH6u_KtQlrAeJSL8px7I64AspUg9r9q7gU9U-V-kXbJOolKymdq19_0dwIvymPrq-0Wlci-X_ "LAYOUT_AS_SKETCH Sample") +![LAYOUT_AS_SKETCH Sample](http://www.plantuml.com/plantuml/png/NL1DQzj04BtlhvYw1ylWIhZqr9DLOMgexGfBJiX9hAL9lB0Vo-u8OKB-UqROiKDq6JJlpVlOPIGPg3SQDldJ_qFTv5LJ_LlLnHegQRn6yKtPLlSTza73YSZ7traMv92-A3hrnpvYQ9qbj9IspcHxrShGkPr2ZpehVlqejRHqs6uo8oDXu5LJC5ygYo7rR2p4L-Ta9aI98JgRoCueEuT9FauLAKXoOJ8JrPd5JFF7zRQJuPoqYpbCBu6dCtWLmD_D9Xdms4ZlMUSHZv1xhpabAMSdl2g-po6lodItglaa8FnC5x1zA4OirzeD4SQI4SW1D_IIAQRNfDWBwa4HOG1I1ZLxHSxsTasNq0LadIkDGR57_T7g7kiG-PBdkgxBYbaZwORUPVuYHVx5SJm7PpwVBD5susk-0m00 "LAYOUT_AS_SKETCH Sample") diff --git a/README.md b/README.md index 7a4bb7b..d5c1053 100644 --- a/README.md +++ b/README.md @@ -106,11 +106,11 @@ It is possible to save them directly inside VS Code: [Creating your own snippets ## Layout Options -C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams: +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](LayoutOptions.md#layout_with_legend) -* [LAYOUT_AS_SKETCH](LayoutOptions.md#layout_as_sketch) +* [LAYOUT_WITH_LEGEND()](LayoutOptions.md#layout_with_legend) +* [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch) ## Advanced Samples diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md index cd5d7ec..8ed64b4 100644 --- a/samples/C4CoreDiagrams.md +++ b/samples/C4CoreDiagrams.md @@ -8,7 +8,7 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia Source: [C4_Context Diagram Sample - bigbankplc.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc.puml) -![System Context diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/VLF1Zjem4BqZyGzJBgKI2vUUUjfT6hKh0KKBgEefcZX3i71iP4yA_7t78Q51qDxiyPitxxsHdmEZvweq_Tu7RPMfSggyWHtp8NoPJ3mUnuNcNPLLWRnobidoMBboyguL-jmjD1t8JAQVdvO6BM_ciqc9WSbBAPr6_8d7Xvh_8rHMEajX0DuHR9qnxgXj0KPR0hGvt3nh7-JaG2Q3SGgDEKUILYRS3UZtPY-_VcpMwS-tzVTqbdnB5bzZbJKRWjLPP9NGj42kiV1OYWeFRrBobXXUqUwZe0iszYx91sU7gWhiIl8Z65mgQAxWQVCsaCSNQ97WjhMDJ50ZE4g6S6WxOmrGALTP3kF1ftxlCd2ONIZJK5-5xn_Awb4nlN2T5s9KlpKTGLlnL29hPm4pLzLnQdyxTLJdNUAUu83d6Ff5I2ibJKuyB56RlrgIftY7S5Mm5dkw5YYUvbfv5zoM8Jcf7Tg2WBeD7PijjztA0aY8vktvWSqLEqy1PFjjeaeAq2JrmEmra577B7kq0LM4oOrODMRVoNHsUnV_9b28G86bhwZs7UnjDYkoUMWCnqsqJGlInIvp_cwp_sclNS_NouRZKUirkLRWin387_W3 "System Context diagram for Internet Banking System") +![System Context diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/VLBBZjf04BpxApfSmaeiN7BAQNS9IbO2WXPGb9FL30sCc0UQRWVu-xIDJN12zZRJKrLTLVOJ2oOflCi-s61SiQOYETY97FZpO93msDzQsHMhWYcP68I2z4tqWpThCAtZrDA1t63uwN7cCCXoCXvuPA6aetnOua_IFvJo7w48IlGg0B8Zs4Jduj66BJWR232ieVLi4-ifWYu65mqwTrQDnYJyBP-Ddtz-Noxo7w-BR_buz7Kq_T9zo3AnuWZcPnRoK1DWRN6RqAk51AywIe44NZ3irKsDpR8P9OwXQmgMw2dre7EPeBj2X_LRHn-VeK52t5G9LehgmL7RWqF3B6U0niGY2FSx3zbbMtTrKSovkghSVsnLcyhU-BgEov9-MJg23Hh8ezWO05Ung8gqgRsqLpNjSKzmmBEdsaTj91-TfElHkZzEHe_b7VYwVw7PR6KF7KoiIP7ZHc1qCZiCMmAw9PJQRUcmqUf9TIRD-Kx6kSH43EXSqwRH0TGrtKbwRQDtarGI1aPJmlH6OggaR-Hklke_pI-PM66Aob_Gx6-WxLxc5DPSXsMGM7EcPBUxLKpTjl2xx2hnP36xIDnZDgKrxfwKNlxrlm40 "System Context diagram for Internet Banking System") ### Container Diagram diff --git a/samples/C4_Component Diagram Sample - bigbankplc.puml b/samples/C4_Component Diagram Sample - bigbankplc.puml index 491a725..4770af7 100644 --- a/samples/C4_Component Diagram Sample - bigbankplc.puml +++ b/samples/C4_Component Diagram Sample - bigbankplc.puml @@ -3,7 +3,7 @@ ' uncomment the following line and comment the first to use locally ' !include C4_Component.puml -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() title Component diagram for Internet Banking System - API Application diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 56dccd9..0acd507 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -4,8 +4,8 @@ ' !include C4_Container.puml LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() title Container diagram for Internet Banking System diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index d8485ff..eef0dfd 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -7,8 +7,8 @@ skinparam wrapWidth 200 skinparam maxMessageSize 200 LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person(customer, Customer, "A customer") diff --git a/samples/C4_Container Diagram Sample - techtribesjs.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml index dbd0569..aca31e1 100644 --- a/samples/C4_Container Diagram Sample - techtribesjs.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -4,8 +4,8 @@ ' !include C4_Container.puml LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person_Ext(anonymous_user, "Anonymous User") diff --git a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml index a4b3f4b..7ca5bbe 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc-landscape.puml @@ -4,8 +4,8 @@ ' !include C4_Context.puml 'LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() title System Landscape diagram for Big Bank plc diff --git a/samples/C4_Context Diagram Sample - bigbankplc.puml b/samples/C4_Context Diagram Sample - bigbankplc.puml index 70778cd..06469b1 100644 --- a/samples/C4_Context Diagram Sample - bigbankplc.puml +++ b/samples/C4_Context Diagram Sample - bigbankplc.puml @@ -3,7 +3,7 @@ ' uncomment the following line and comment the first to use locally ' !include C4_Context.puml -LAYOUT_WITH_LEGEND +LAYOUT_WITH_LEGEND() title System Context diagram for Internet Banking System diff --git a/samples/C4_Context Diagram Sample - enterprise.puml b/samples/C4_Context Diagram Sample - enterprise.puml index c58f636..0b8e329 100644 --- a/samples/C4_Context Diagram Sample - enterprise.puml +++ b/samples/C4_Context Diagram Sample - enterprise.puml @@ -4,8 +4,8 @@ ' !include C4_Context.puml LAYOUT_TOP_DOWN -'LAYOUT_AS_SKETCH -LAYOUT_WITH_LEGEND +'LAYOUT_AS_SKETCH() +LAYOUT_WITH_LEGEND() Person(customer, "Customer", "A customer of Widgets Limited.")