diff --git a/LayoutOptions.md b/LayoutOptions.md new file mode 100644 index 0000000..c5b64b4 --- /dev/null +++ b/LayoutOptions.md @@ -0,0 +1,112 @@ +# Layout Options + +PlantUML uses [Graphviz](https://www.graphviz.org/) for his graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML. + +...and also sometimes one of the biggest disadvantages, if the rendering is not what the user intended. + +For this reason, C4-PlantUML also comes with some layout options. + +## LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT + +With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN` is the default. + +```csharp +@startuml LAYOUT_TOP_DOWN Sample +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml + +/' Not needed because this is the default '/ +LAYOUT_TOP_DOWN + +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") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "LAYOUT_TOP_DOWN Sample") + +Using `LAYOUT_LEFT_RIGHT` + +```csharp +@startuml LAYOUT_LEFT_RIGHT Sample +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml + +LAYOUT_LEFT_RIGHT + +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") + +Rel(admin, web_app, "Uses", "HTTPS") +Rel(web_app, twitter, "Gets tweets from", "HTTPS") +@enduml +``` + +![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFgG1dCP9NvhD9SRwHMc2Svp0KYwtrnO6ROrZOMLI8Ecwlcl_-mrbcP7D28BaDfzM1c9Pd7dccI7ry0NvGoegr7mMEVkamoCk9Dxi5LwEyri0av01SNlkZTltXvUt-ATpsxiTaBtBv78GoLFBA6IF9J5zjtFLNo5wr_znoV69uyY_GXPJGMS4ZUWyKZvyKwqeV6GpO8gCyG-8hDb2qFWX3DIKd3GQcUSp-kq6fAIFu8N_1NByhf7r4Z1Mb3r6GFxd4BmyH0MkbZ5SSgPM7YT9YvpIW2ymEJAXaGJdHnQc9GHVf119MSdU--HAdcWe-sasm8zdEPsVZ_YS1LGicyqrloqMEPmRLeGj7c-JAtdQvY80aVTSzoYGWCef19hcFkdH9P-hSbqSSMJSQ_rvU-yFMzxG-wVhTwuoAO_e-Az7ePDDURYks-vsCXPJoeA529K2HfIOWpr0T7PzEWDIw_1PE2OUPPBSU3LdDLR8X7FzTJxXUlpeC1S2WkO35GphUNP-f1kQf2E0AWZGN90WbEEvb25dTS800aaK9oCWNsaK1jhA-GrOy9IYoNUTgtzxD-pUFlJHBqvykL8S6OUwZn5ssxxdNlh3mVN7Avz4C57QHOIFKvNnmCAtLwCYXB8lR-guV0L3p83AEe5XH4SG7MHUXDh5HVgqHZP689KazIi6r3TwH3uFJ3wjMh_aHy3C1X1HdRASXd79HD5rkEPqN5-3dcpGCoMzgDKEoDeuss3yo9acRyfIAeo2yPJj5EypEpewb_WUdsq9PVDJ2l_b_4YtDu-EQXirG6uJmMTrDEEPlavfsqrrKZiyRDOE2Z5COZQORMDGD-hMnbV-LUgGUDi4xJRDyFpmK3CiXh9v5XWPy0tqFk0REEAYIZ4nwsAioaLzjgOcHiNY8cOnvAv5tYRUhL9SBQnMXRkxbpOVcozOFj6Sq3P48SFYDBRATr-bVFTtLeBtknSl3pdEevXFtmOev7PVgcozAcNJKxILNc_tmkLZmqJb4yq9NG2Hmx1Ngdo3AkNJYnixny7FgLyEE8fNVWLpyx0nYaaMP_AqWYPN4CLGUWE6paOT4bX-a6ejEVmq3OC0s9VkOTAmuNDVu7F_ZC-Wm6VmZ4-lmAUN-YJRnJ6FuOoqY0oJ5QBa4xMW0c-MKi7iDPhSYN16nP9017hZ9y-8FxKCISY8r5ZQmvl7CHSA4JDETy1Z341PiEqhqxLrj2HZpXZUGK0K9weWp3LJm0AqfVCW13R6FDol89OZ7YphUg4_9KcFXsCQ9N4PPuTFJ-A4K1qXPHYiYF6vIkxvP3Du05yXuh7E124fbgNgvltE7NYt_M7xuthdtZXzU_AXRThTV_lkeD_g3It3zwVwOmozFptVlScq7n-_FsrtRI3ByFVaAdjMaBCzrgyFPysclNatErtxl28nBJHeR-r8jofYxvmR7zwqtr_cxkJX6v9ZD1g-86VJ2uNaJrlwaqj-DVnVXBCPC7bKttG-N7OQnNL-GSxsQ2-ky-xdA0_N_jMmvtvq-rrdgdL3cXIT21w11Qkp0-Vx1TcuyBUFHkIxy_ryQsGqKmko6gM9YSakptPTygpJLYMQsZ1LqKrGOvW7QfmmeIGj-z1bdxYfq9VLmuHmYTEGLOQR9nK5OFec03aMpwD-Pf_PsY8dmZRVeVjDbU1iAuzDtaQkb41XE1FFItgrH1OoSR39ss1LYTiHBBvLArzCVjVA5uQhVcneA9OyFIIVLdxvXtpLru0TpXH5QaAIHQYc8IFgvLQ5OnCyPnteRwtogYpo_e5EumWXaR0nec8y3HMIaVMr0x98SFNTwhJqIAvI9LBHoQJwOh63arxhkkyECgktjszEkzrtFsdrPkhu8fEqIQTuRL5-UlvxUaOdgy8fhkddNpE96osmzTFikcs1AdkkJhBZDIjYPNZOWbwPqBRuM-IgoxwLK7dbDwubnTzaaIVxivWpVP-LVUDKAFZPUUDLySG11oIEvfB4rQO9GpPdcl1iMTSnCig-YtZVtDtsKHOpudtwhjs-RFmayJRPxIRUUutaob5iaqEkOd_0_LJtz9Sfzj-AZLPMFnYhT0ZyAbrFuN-rhfiyB5stUBoyhkUGSwn_672ST0DAWrc8Z6ej_HrA9QZY0e_4jrVnu-CwsVVeB8vW_s3r3cVci0MCXZIE4US1HgGLnr4uJjQNDNpKsQkJbdVtkk_ww2A0dBm-9ZV_wkYsLXJnXIHpYMoq5Ee4jCZDvf4AjOpwABmA157X32AC9P7RZvJTAxLgH9pK31kT0KJhh9vetKkGEjwLxzzvQAMDJEiJp4TG4d-2_j87qLcNFu05yrdqVm00 "LAYOUT_LEFT_RIGHT Sample") + +## LAYOUT_WITH_LEGEND + +Colors can help to add additional information or simply to make the diagram more aesthetically pleasing. +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`. + +```csharp +@startuml LAYOUT_WITH_LEGEND Sample +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml + +LAYOUT_WITH_LEGEND + +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") + +Rel(admin, web_app, "Uses", "HTTPS") +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_AS_SKETCH + +C4-PlantUML can be especially helpful during up-front design sessions. +One thing which is often ignored is the fact, that these software architecture sketches are just sketches. + +Without any proof + +* if they are technically possible +* if they can fullfil all requirements +* 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. + +```csharp +@startuml LAYOUT_AS_SKETCH Sample +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml + +LAYOUT_AS_SKETCH + +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") + +Rel(admin, web_app, "Uses", "HTTPS") +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") diff --git a/README.md b/README.md index f4651de..bd6a7d8 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,16 @@ # C4-PlantUML -![bigbankplc](http://www.plantuml.com/plantuml/png/xLfjSnev4lxEh-Wb7n9NuRMTbyINSwZbPHnx5smEy2LxIOeICm9K6QGfITZXBllVhoLc18CyDGVEkkggTbn51gdxwQTRhTOB-KLf8lLY7bUUGal4GYfyULBwL2e_HNJ2E8MW4tI3g-7e_1e_MjUTwpuyERTF1P46UXapFjqHSnYqBgvMY8FBVmLmyhnIKLyPJuWaSq0XieZra7xJZPXD-Pno3I5-KBafTYT9ye55UWRFZuytskVaMvSgHQPqmFvDuUJLyQQMfA4cV1fJ-4y5y1aWAXLwcT1pmVLAuxdjKJCIYJjq3YOaLhJonoPCGqfnbqBOiCAJr_QnBGRARzqqyCUzdCxEncB18oANzNh6By-YYFEnPs6BnqlxsDQca16LHUrcH2b4HCreP6W-XGvPYeNUROXZWOmxZT-lRuQZnc0q-2qOjYusN1wJyEjK6cTJ7a4GDDkj3OaPuT6TP5fJ3bekg9yWnhihCgTGROav2s50k8Bke5fPvGfCX33_d4s4oHzZvfsaKVq3aHpZ-VRio7JKeIKfqJH2SGaHK-52AIPu3JYbaG8jO4pXbiGiCbALdoYFrYuwVpDVXzUzKVlwmnNg9LPNQ2sGCJDZZB3RyftWV3ZgNxw_649C9zgeI3QTwGqD37npbHMCxZfvKyNbCpf23uYg0Ht5P4pZWus9K7ttBcsjGYu3YO9KhnpGl9YCl1yOFgrwlnHRGC_wD2R6PJLZoOwEekeeutHIoq2Vv-YvaBwhLWyW4zxiS7hmrf1tOTd9ZARXZ3_8tcT-T7IcS1w_tIgKzKyf_9Up8zDVFpggvcA0t2PIp6ie9jPZdT7sksfGFJoiLmzACPnZFfWlur1pSMlYb7-MAHXjdw3VPnYU7HuQXkLGFiyI8GUUGx-YE0F7GkuJJFIw36l_eDuVKsTZp-0YPXdamuEyJRozJt1DOVKYt7vuQ8knnHql85fikXp2PrZkHZvyD_k4xwRdENZpyE0L8IV558lebmDut6vs2bjddx2P9Tfph_Fmm1LZquak85fikWIYW65df_3rzmcVsTpuFlP_GFoAmR5u5KUmq8zo39zakIVh7JHSq3YXEn_0KDbL1mih3j9Q2uUVPYoAAF_IFhGTEPsR4fsRUtJw9JhzUtGw9JgTLCSU5qEHqBVG0CNi3b69YRuZ4b-MIjFvpoZIasnEv19eJCt1Jxs5uSmJ1CP16IoZCLWaYP0Q4JUKUbGaQ83mQ5jNfNlhU0cXu1pVQ0HQW2unSyarvH7AaaN4A0_HZ-2MokLOHCkQsUZFm8uu2qbixNB13zSjYILKGqZ5eXKnp0dxBYPvun6zfR58Z2S8IJ0i-nxUUq5_S7qrQhxFJkx7fo-Vlscw_k3ZCEXVDJeZJ_3rgVbpWeFV1yEWkz5_SlBwjDdsWJp1lzbdrxk2WkEncJw2r-l-uTsTTFtx2YjQAj3CdqYtG-UVd8_Vl6Y-FYyyoTDlI8wJUFI8dDqeb98_RPY_GlAhz7yKpYvXYgY-QBqvRnsNn_aHEVlPNXxdXz-ZVBWSNemwmVlWgbsPcRgXd8kLc4ufZrPt1vNlxo3tuFSX2i7tolUphSoefnAmob8huhmhair2lgcq5Ocw4KohQ1xK2HQ1EYLqoBhbNxeyXI0jzBlMGqjuXzkGbOVvcueICFCIKHNA-r4_yyyyaoYmiCrt57pJEt3sAuzFtaVUou5IS-i5n8xg3bueg-2Jzy7s9UvRyFZk6_boyW-DVAcv_QyD7SKTRm_Xqqgl-99l_prWIt1Da9fKSCVqZ77GZxSh39tnWdtWS6kNjyycx--e5CO8YOIT497XZ6aaesgP0hAmkEPjTLjwf5QkWj9aCjb_izZ2HQznUHNqDtPlBr-SjjklVj3kpSNnKHPfvqxvtkAlvNdtvHcLl0Ydk6wS_vn5tDK2LvVyKxTVe7QzLuTylgwBs2uy_8A-Dw5yyVV9xL_sVOTsh_nETSVYxxmeAllpH71ypvLzfrHIyFFhnhFoXOCUG18l52JxBHEERC4oCV3BkhMnhkmFATxTtlMLAOlhudtwgjayF_v1nTjvzx3Y_UJOFWKLs_bGMB7Vu7cgVVfNnVu_gzXfxlpv5Jirv5TidyTZL-m2SfMj_pfGUUhzlubxyhLIIO-VuK9fCQUo1YttLcr0rfpjEyU4VwtP8fec6Obj6v0m50kkbVc5RdlV7vuWbYbaabCDJHJ78b8zmFbl9-Pw0RoZun594fJ-GCVGI9AOXNPpMiMcNyajgS4WaQWCtN-sJ5kRnkmMULXkIgDiQ9EGScrAecrsXWrFepleDGpBl6cL4CGRsENai4Ucr9ZFp0v2oH9TWmQVBc8YJNDFYbiMKGKaZkytCrdmq70dCTDBq09ZQKEfu9OHey8aeCCmbk9EKUbJceinYsaQaAxvuaYrdjJW8vaJZ4MU3CHipinYeXPZXMJ4v7ycfpnsAm9cNM4XzVcDiUvI7Y51PdAbTtd_YBK5YicrNevm2J731O5zsn7HP4mKDJcGlXhSmJywaFkkXKGh2uK499qofIL1S61y8kJS4gt1Z2YxlkePX996b6j6ObKpAKsLWbXCyGlLuSz80nUCpOFtdB3is8pMWiCkVeULW34_d54qbTRFBWkbCFi02Bw5Cwm8sMO0OJSmqq2iKH6JJoIPqspcE0FEFnB7sKY7sE22kU4c4DnDwVKmrzoChG46XIjYmxxsjDAdyKPLM4_D6qMLiNqn7FO6A9YNKmafbN69xU1MvaPzLm4ipdf-PtniQoxld2cYbZoimQ-uCXvPivdEsjgkggDEFiStagvFIQJ0_49bwyoTP9egqCB0fMZjPWjnh5jv66-43OzCyIWbyx7RSLmCnaqUOolp1jYXW1wQLfFk2BzcCkWEUramSdek6pm4BOp2UkL2vtHbKnViZ_MhTlC1wM_G3jBiX5AzoY-8lPZ7_mK0 "bigbankplc") +![Container diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/bLN1Rjj83Bq7o3zmlOTD0IN60dlggOvjD6bZHusSfdiIg15j3pgQ4MP6Tet5_diviYHBSO3kwgIXoCT7yd7qmNcqlYhKvSLlKWjLvLHP1LllI_T-FBQulzb8lwsoof4LHdlI_aQOOlma1ThSB2MLfCRJlwvZXTe_Bnx61JfFbatfbFrHQh8tPPtX3wWqnnQC0NvBi3PAcRtK6r3i1QXp67oMrl6R0SuDoWXKwX10MgBmHehBYuV9tu_FgtJr6AUpnvSb1pIMIP8cd-UhwLtdytA_kaiVvX_dorc8zD8h1cqH8PUuiLWmJGltNBdLvE4MzVV0E3bmbKK8Yyawewz4vRmfo4OmxTv64sZDODPrKHd7Hx3dda9P1wAgRO12c4fxDteNG8_mwIsRShI7A_4dexqcCNe7_rnU03yTwQizPIcM9Nk_K0QJibGyA2-D7h7f4-umWgIqeOB5rscmpKZ97JEfsR4Ql1JG3BgUI31tYREs-dWIU0vJkvB1Hmb_LtGTuuP2-ZPj8gmiVGGJlQaKsc2EhTd9d1pmODzEisQz1Ewef3y49OYgRgQ3dSGG8YrmmP1PisTzdbCgJ2OLDGrPr8UMrFJt2BvXWToB8HaMOo4zvU2gp36PPd3_XPmxOtSa03djfA1pVZbwpD1Hc4Fp6iWaNnvWSFR6ChMmWs1f8vsto9b1QjPcKOytWYqxvu0LAqjOodb-4fMBWh38ELwW3H_8Yvjp6XcAxwHpxfCCeetltnREpB2RFSKD-lQB_eIMC738_MzFuFCV_eeAb2frjO4HvzSBFZSB5bAikFkoHkTTMKXXZJDh3_CVOekQLNQC3CWzq8R52PP1zPhNcLwjSA-_GOVDj0KRkafwRGRCJELFeuwwlOs0Xw8TrZNtEdrvyKIgTpkS5lJPaGlPxrQhE0ckGyVZElt2QI3mshTDcIv9RhQPwLq9HyHsuLkmsZfKG9iKtK6B23ubZylnW40_xVyBJM_P_SJjj013c2V2tC7QcgA-XFQMDvAlA1EW6-JPxVHKR43jjUMLf186Ta3NmLgZzBYyaj-GnZ2mSk7IxHWaYrNS8dK53UBFHDXs9m2CcnPzutzcrw4F7Ci_ify0 "Container diagram for Internet Banking System") C4-PlantUML combines the benefits of [PlantUML](http://en.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. C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippets) for creating C4 diagrams with PlantUML. * [Getting Started](#getting-started) +* [Supported Diagram Types](#supported-diagram-types) * [Snippets for Visual Studio Code](#snipptes-for-visual-studio-code) * [Layout Options](#layout-options) - * [LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT](#layout_top_down-or-layout_left_right) - * [LAYOUT_WITH_LEGEND](#layout_with_legend) - * [LAYOUT_AS_SKETCH](#layout_as_sketch) -* [Advanced Samples](#advanced-samples) +* [Samples](#advanced-samples) * [Background](#background) * [License](#license) @@ -34,7 +32,9 @@ If you want to use the always up-to-date version in this repo, use the following !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml ``` -After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`, `Boundary`, `System_Boundary`, `Container_Boundary`. +Now let's create a C4 Container diagram: + +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` ```csharp @startuml C4_Elements @@ -71,6 +71,20 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![Basic Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "Basic Sample") +## Supported Diagram Types + +* System Context diagram + * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml` + * Macros: `Person`, `Person_Ext`, `System`, `System_Ext`, `Boundary`, `System_Boundary` +* Container diagram + * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml` + * Additional Macros: `Container`, `Container_Boundary` +* Component diagram + * Import: `!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml` + * Additional Macros: `Component` + +Take a look at each of the [C4 Model Core Diagram Samples](samples/C4CoreDiagrams.md). + ## Snippets for Visual Studio Code Because the PlantUML support inside of Visual Studio Code is excellent with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/C4.code-snippets](.vscode/C4.code-snippets). @@ -84,122 +98,17 @@ It is possible to save them directly inside VS Code: [Creating your own snippets ## Layout Options -PlantUML uses [Graphviz](https://www.graphviz.org/) for his graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML. - -...and also sometimes one of the biggest disadvantages, if the rendering is not what the user intended. - -For this reason, C4-PlantUML also comes with some layout options. - -### LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT - -With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to easily change the flow visualization of the diagram. `LAYOUT_TOP_DOWN` is the default. - -```csharp -@startuml LAYOUT_TOP_DOWN Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml - -/' Not needed because this is the default '/ -LAYOUT_TOP_DOWN - -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") - -Rel(admin, web_app, "Uses", "HTTPS") -Rel(web_app, twitter, "Gets tweets from", "HTTPS") -@enduml -``` - -![LAYOUT_TOP_DOWN Sample](http://www.plantuml.com/plantuml/png/xLXhRziw4ltkNy7hV6W3E8sJFfhDEaRzK1vOnmaiPRDtsy9Wf74iN9aKIBgkTzl_laD9PcGpMa7sRJvT1aWKSURCcI5r-FWa5HLgFejghqYFHrn8VDWhRRNQRm5CGWR46JZNpj0Rdz_WhzxDu6P4ziwJLaCaLosZa3rMnFIStkKmHNIl_ksGe-DQJVuHifWAEYDeHEUHyk2xwaJX8vi1KyJ7No3oPWj1u_imK5Dot6pcti_ezskGaZw26_u7oD7xPjvBWAyeUuo0_BT6iBc82bmjOpZdJAKUnqcFdDA0Bp0vCg6HXDhFF4n72Bx889AoahqFIKlUQ2ZxRJx0psSvjLeFVCu2AfRjzehV1ei2paqhmWQFTqbBtdQv240KlTSZ2YIWSWg1flcA3EYIprMr8OuuCXvqVh-vyyOTT-p-m_5wbxcK7wZ_nwFGoMOy7CVfzdivYobbmKA4IW4ZIip1dY0wko6T0Qdt-2pqYKkP9DTklPRE5JBXNFzfJT2E-3hCcO2WVKy5mtgUjWvrHvlq15050PeB4eJIdqiPSjOW322GH77o0EGRZS90MzL-0nOyfMZoNUNgtToE-pVtG_IB4r-k59yXhXvZXDsq7pZdtdXqTN7faGWcIhk8y76gSXvO-6uwAqAe-l5cZilNCCOCg6mG64Vq0QBzt8TGFplBtjR9sWoaacH-vO3wGS_8vu79vxJtQt44p6m44TKfosaOLqmKNSShJaUD5UZn6ZrJqhDwVP-iZFCTne-SQlAcB9N2AF2dRATuNzZXOKlYTtow8PJjpndyrzQXxcyV7jRNQe3S9eBF6cZ6SsETqRQx6gH-SD2kxvTYcCHiCDl6eAxLhOkV_EkLW_Qs2Tfzcc7hu40pB8UoUPOO6V0rz27W5_Z0nJR5nAoBi7OlwlCrDJ6sB2vYba7kNkHDulrjYgk5rQfmV_VI5cFp1IiWMXow7C9cM9h6HldkjYdVtQsLuDtknIj2Zeie5jCl1R2vtLKgss2Rikabsafli7lXYh5XeWg85eSkW2XXEAXKlj4svTER6pl7qUxr-p_WA5w55IpEenp39bcUoTCEcbn254Fb0nWw6tL8OFb-fhNauFCq309WN_i7ISUQprs9pzqpFgCIdz4pFeCIdq7canmNVHx3AUaG6IOxHCadQa45FYobWjaRDBaLuOoA9O48zC5FdX9lQXcIa16fiRI7EuzZBXGYvfnkWSSOWB9WqrTcU-jeINpE63v1G1GdgYJC5LF00hIbyo04vcCUpZSGomSUB1jwepyboOY7FesIk8opWwStSKAeWP0o359YVAwIPpvP3nx0DuXuh3D1I8fbsVRmVkkCt9lXk7knEhatJzuTV-oQVkTVdZCQTWPZo_33YVunXkxlhkTSv_gFZZwSTFisa6NujwHLlIieE1xhpuUpTji-l9kJhdrVaPYM6dGtJgGR5R5FpisFRxiVpWjFyl0ToJ4QZL-Ginc5Kl8d7VrJI3wT_Y_2sKoO8gflUn_FUytoEhyWPtksbzTvztkK-ollSZnmBfnXlpRLkY5DYhK87e45wTr1xSSPMMluluT6v4VjHsjZPhGp2vBEqiJ4P5TakofvtccZ4crjcAdeEgWnB08rJfXGafPzwVAAE9dGLzN3X725sv0qmxMRYZ8m_H20zCNpg5_O5xQoA8YmoNViV5SLEEUKnuQsaNTBe2ISYUScereX2_Cvs-GDs6x4hGWstsqhNqv-vygNXDlXsj1Gh7XxI3wdViMNVDll0NkSAOhKX2IBK4r3HjJBxGfz4xnW7-XjxFAssUJz7Pty226Hi36Ymf-62id8nie1MQIu-9JUbXxAD5KY5PrCjjyizd3HwrmDdL5kz_RkxKc___vFshsPEhx88ctIATzR_BKyLr-UqScgS8PhnldNBE962spzDATkMw2gtgkJ_7pDYrWL7aRGToUq8VuskTrbtoHKNVcDQqNnDraKoVuivam_vsNVE9KBVcxTU5s-SC0-YQEv9F5souGXMx1CkBQiwnWvPTz5lAzlRuOeYpdnFddVxPut_oJnDjdj9jvxpQGLABR9eL2nF-9vgd_oonJxByL6ApCEbbKs1NwLhcVmlrhNJHv5kfvrlxok5vF3bfqtQJ0BaK2ze_-6KWcgkC0RyCrDkt-4HYwTQILB--hxwPURMxaMy32cSOoMz_10Ed4SXNwogwpZgzvUWtJSspT3nqCN0UJupH6v_cTFztMYY2yacKiafGLGqwPeCfj7AjGXFPHR1OAeS0OHnf98yMT6yhLAEn4dCyFEsWYYLN9FjEuaI1tlqlDkNRJIHgRt2UO2bCH_GV_Hryzvbq_0Wlai-Xy0 "LAYOUT_TOP_DOWN Sample") - -Using `LAYOUT_LEFT_RIGHT` - -```csharp -@startuml LAYOUT_LEFT_RIGHT Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml - -LAYOUT_LEFT_RIGHT - -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") - -Rel(admin, web_app, "Uses", "HTTPS") -Rel(web_app, twitter, "Gets tweets from", "HTTPS") -@enduml -``` - -![LAYOUT_LEFT_RIGHT Sample](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFgG1dCP9NvhD9SRwHMc2Svp0KYwtrnO6ROrZOMLI8Ecwlcl_-mrbcP7D28BaDfzM1c9Pd7dccI7ry0NvGoegr7mMEVkamoCk9Dxi5LwEyri0av01SNlkZTltXvUt-ATpsxiTaBtBv78GoLFBA6IF9J5zjtFLNo5wr_znoV69uyY_GXPJGMS4ZUWyKZvyKwqeV6GpO8gCyG-8hDb2qFWX3DIKd3GQcUSp-kq6fAIFu8N_1NByhf7r4Z1Mb3r6GFxd4BmyH0MkbZ5SSgPM7YT9YvpIW2ymEJAXaGJdHnQc9GHVf119MSdU--HAdcWe-sasm8zdEPsVZ_YS1LGicyqrloqMEPmRLeGj7c-JAtdQvY80aVTSzoYGWCef19hcFkdH9P-hSbqSSMJSQ_rvU-yFMzxG-wVhTwuoAO_e-Az7ePDDURYks-vsCXPJoeA529K2HfIOWpr0T7PzEWDIw_1PE2OUPPBSU3LdDLR8X7FzTJxXUlpeC1S2WkO35GphUNP-f1kQf2E0AWZGN90WbEEvb25dTS800aaK9oCWNsaK1jhA-GrOy9IYoNUTgtzxD-pUFlJHBqvykL8S6OUwZn5ssxxdNlh3mVN7Avz4C57QHOIFKvNnmCAtLwCYXB8lR-guV0L3p83AEe5XH4SG7MHUXDh5HVgqHZP689KazIi6r3TwH3uFJ3wjMh_aHy3C1X1HdRASXd79HD5rkEPqN5-3dcpGCoMzgDKEoDeuss3yo9acRyfIAeo2yPJj5EypEpewb_WUdsq9PVDJ2l_b_4YtDu-EQXirG6uJmMTrDEEPlavfsqrrKZiyRDOE2Z5COZQORMDGD-hMnbV-LUgGUDi4xJRDyFpmK3CiXh9v5XWPy0tqFk0REEAYIZ4nwsAioaLzjgOcHiNY8cOnvAv5tYRUhL9SBQnMXRkxbpOVcozOFj6Sq3P48SFYDBRATr-bVFTtLeBtknSl3pdEevXFtmOev7PVgcozAcNJKxILNc_tmkLZmqJb4yq9NG2Hmx1Ngdo3AkNJYnixny7FgLyEE8fNVWLpyx0nYaaMP_AqWYPN4CLGUWE6paOT4bX-a6ejEVmq3OC0s9VkOTAmuNDVu7F_ZC-Wm6VmZ4-lmAUN-YJRnJ6FuOoqY0oJ5QBa4xMW0c-MKi7iDPhSYN16nP9017hZ9y-8FxKCISY8r5ZQmvl7CHSA4JDETy1Z341PiEqhqxLrj2HZpXZUGK0K9weWp3LJm0AqfVCW13R6FDol89OZ7YphUg4_9KcFXsCQ9N4PPuTFJ-A4K1qXPHYiYF6vIkxvP3Du05yXuh7E124fbgNgvltE7NYt_M7xuthdtZXzU_AXRThTV_lkeD_g3It3zwVwOmozFptVlScq7n-_FsrtRI3ByFVaAdjMaBCzrgyFPysclNatErtxl28nBJHeR-r8jofYxvmR7zwqtr_cxkJX6v9ZD1g-86VJ2uNaJrlwaqj-DVnVXBCPC7bKttG-N7OQnNL-GSxsQ2-ky-xdA0_N_jMmvtvq-rrdgdL3cXIT21w11Qkp0-Vx1TcuyBUFHkIxy_ryQsGqKmko6gM9YSakptPTygpJLYMQsZ1LqKrGOvW7QfmmeIGj-z1bdxYfq9VLmuHmYTEGLOQR9nK5OFec03aMpwD-Pf_PsY8dmZRVeVjDbU1iAuzDtaQkb41XE1FFItgrH1OoSR39ss1LYTiHBBvLArzCVjVA5uQhVcneA9OyFIIVLdxvXtpLru0TpXH5QaAIHQYc8IFgvLQ5OnCyPnteRwtogYpo_e5EumWXaR0nec8y3HMIaVMr0x98SFNTwhJqIAvI9LBHoQJwOh63arxhkkyECgktjszEkzrtFsdrPkhu8fEqIQTuRL5-UlvxUaOdgy8fhkddNpE96osmzTFikcs1AdkkJhBZDIjYPNZOWbwPqBRuM-IgoxwLK7dbDwubnTzaaIVxivWpVP-LVUDKAFZPUUDLySG11oIEvfB4rQO9GpPdcl1iMTSnCig-YtZVtDtsKHOpudtwhjs-RFmayJRPxIRUUutaob5iaqEkOd_0_LJtz9Sfzj-AZLPMFnYhT0ZyAbrFuN-rhfiyB5stUBoyhkUGSwn_672ST0DAWrc8Z6ej_HrA9QZY0e_4jrVnu-CwsVVeB8vW_s3r3cVci0MCXZIE4US1HgGLnr4uJjQNDNpKsQkJbdVtkk_ww2A0dBm-9ZV_wkYsLXJnXIHpYMoq5Ee4jCZDvf4AjOpwABmA157X32AC9P7RZvJTAxLgH9pK31kT0KJhh9vetKkGEjwLxzzvQAMDJEiJp4TG4d-2_j87qLcNFu05yrdqVm00 "LAYOUT_LEFT_RIGHT Sample") - -### LAYOUT_WITH_LEGEND +C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams: -Colors can help to add additional information or simply to make the diagram more aesthetically pleasing. -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`. - -```csharp -@startuml LAYOUT_WITH_LEGEND Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml - -LAYOUT_WITH_LEGEND - -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") - -Rel(admin, web_app, "Uses", "HTTPS") -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_AS_SKETCH - -C4-PlantUML can be especially helpful during up-front design sessions. -One thing which is often ignored is the fact, that these software architecture sketches are just sketches. - -Without any proof - -* if they are technically possible -* if they can fullfil all requirements -* 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. - -```csharp -@startuml LAYOUT_AS_SKETCH Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml - -LAYOUT_AS_SKETCH - -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") - -Rel(admin, web_app, "Uses", "HTTPS") -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_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) ## Advanced Samples The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](http://simonbrown.je/). -The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4model.com/README.md). +The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4CoreDiagrams.md). ### techtribes.js @@ -213,12 +122,6 @@ Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20 ![messagebus](http://www.plantuml.com/plantuml/png/xLfjRziu4lwkNy5rFhG1d4tIbpRNIuprYz9art6obeFUNbiOj4JRH6LI8EcatklzznkADakR5WJPtG07h08a53dpp3D3SlWI_I8L5ce-IuDdgCrJBYGK3agV8FWf8MFA20gxuKtO6mmlR-5N-xPxsqS7b_aJ05Aa5YbbaugOWx1zrJE8qVM_GtJw8WZa5yeoBF0CWH2Ufsf0lgfcIYTiHfX2CVmYmXLx53ZxG1CrHIzEJfpw6VvwGwJ44nBHFmawVNtYQWaIAymcAK7_2H0y4Q0IhXOPkUHC6OqNUOkSueG_WdDeZ5D9Wl-wC4qX-AE1C6551s_o9w_HK7wjQq23-PpEpqTypX8i5et6Yjy6YmBE9vw53HwlyYUlRN6H455KhtkKe0JBAKaqpMUeYnTyhgfrSSg1SRVvn-tzODYCXj5luQ1zvRWyml6NYT3EBdc4OTZgj1s9AMR9ew1A4OQKc1D_W6ZlUdX6KAtDPpH64MOItKIrm8mLDEPS_paVSpr-j9aBGPB61omOnFFT-R5kQA2s85YH1CG5IgYCvr9Ipkg84P98f3WQ4VI0KvfegU0dmfBlBbf_LxuERk-6dTiFFT3BSbsk50V6LFSnm6xATyFBmR1__VvgW58oLbf5qCbKEHeG-9OP5PHKdBmhnSLpCWGFiAmZCapnYAI7paIeNLmiQsjeRGHYYPPwvO2we4VaTc3qqRH-BhO0dlL9YhNBSagpYew2wd35wRI-0dsnHi-6zA9MEqGhORV1wg5tchmDIoKpYiHJjfUzJ-pu-5p2F7wtaIWR7vVmdy-FTNlZ-BYs5WFWDXPyLWSnxlJrahRVL4UrewD6xR0KmphcW_ao5dKjRYsOyi-DWj7s2Vfjck7vqP5cM0xbyomHik1hw3q2Ct34nIx11AyBiVOFwjQOMXix1XSmIo3t3x8NuyukmTM9rOjmP__G5cFpHrP0jDYq3r7EiDIDZV3TxnA--plFmVlzWrU4d1LGB3Rh0vHpkwyKjkukOTDBjETUT__05MEJiIeWMcow0AA4ORTI-FgxX4zlRdmV-pyWViNWaBmA8rZiXuzHJhBSa-yxQ7H5qenKFe21iiqEEIm_HEOD7NsSqYGXx7FdA6zOqxalqRdVejClqUblqUcMw7INElbnCUOPUOUQID9yXoZvM3rY0OM5L6JsCuZS2Jh3Oe58IlJ1Jxv3WwadY2X3KcDfZMYUPLmeG7IKxWZFm01coQQkNEwjqmMAEMDG8WbI7AaICzTC4PQ0B9udbB0O_0WVY5YCUBAewut-5EKzJcESvdOPPqVVQxASK1qW9KqCCJvNUPcFruqdv86aFDEU02I6iEnwUByB-z5jRzXwlpgvdvozUl6sPTl3Vmt2Vg_P7Ng2RyxqZnMC_eW6uOtJVdhwvgpLyO4ymN_aJzMxWeBZiPu-d3KQ_k7TddJz-ufSj5IWjN4YtOY8Vt8-UVkozUQoy2HFlW8vXjFX4tAslL1A_gofVmh9c-7_59pjo2ga-hBzzh9zKXxd9-JiZ_RoEEz_Z_BXUd0rx8RlmrudcEgy8QsBGKecX2NcxY3uTe7M7dWVW13w5dmxtnWPZQK4CgCq5x7U5SckGkugRKIYaGkQBba7jO95e5O9739kUPSkpr1e4dtbV9WJhd0ROZnSkwae0zE5XCXOR4Vzn3wnbKIHXGqJm_2hgi3Popmkj8-yZmEbvgozAE_L2bxOwUoJjs1x4VSj-7ntZNmv-NqZNsPkZsj3Ix7YxI7wQFIAB_bstmEsELCOg0c97gcQKeRKq-qAOskyO1yusDZbxRB9-oSenIb00c4hX4KyfGh8oFfA0LWON2YPsz9ZQLn5Kk7nUFVDOXiMlUPrB-mxkxTNByywdTS_QFTcu_WaYxHrftnlyVVoN7rv1YK_mWRNzlDViuZRN63padVgzX9KzNjrv8vNDubLuM4J-lw4tEJlazihxNiELS_yLhLYyhTU5ANzMSQPBhjftogL9dnttNXUld2GGvIbSucotPO9IxPWcOZyjAvjE9bzd-HzStVRWxJe9E-prwtMvSaFIjxMk_sIzy59_XHaREj3OSP-2-Ufpjd_LSR-EsFRQVoNP-oL8JzZ-poUD6CNamisFXq8dddVJMmPhq6mF7x6SwduZ8WwQjjIhObMrVeVRvlR-VWKH5RIaAZ6NCpohMJj4AQsddFEseQpp9LkPbbAOoCDzR_Y1mpkqKpLKPDDvYaMkhgPflnHMX9IfyWPPdX2TAQa0cM2ZsbAWDs6kPNAK1BnG6FYsevCrSfk7KMPqEc-nRdIbVgYEEEKARtPnd5Cf4JWcwM1gEEgPtbcFXeQZkOIi6xC6shDfORkuz68gflVSpC2CwcNcXmSn2dJbiY3dXa-hY3BPSbngR-gSttgpqSB_TTya28HqrnJAac24gnmRis2eMmkCYx95eDwmL6EiQP-Tmsr3uv_xeK3NRmJ_84cO8oB2MPKvh4vUeGgbCEO3uzYca8HR1LtLp9oUwe3V4TOvjPk1OvJ_KbIhDyYnGMHPLtYXGxWtQYv-3UBwFUk0urNWVkJ9EY120dG-O18KzjPtmEA4pJbSPMuWXKdglfD6m-Xz-shvU9uX_28pzLob20rnGfDyGE1Nrb664d07YngVP8wCzhClNjWep6l1eExIDCo_tRA6xTCb_iCd2i8CTB-JpGObWiMrz6li1uThm5tlIcuuX4HbaZh0DSe7yWeul4Nea3RiFALdNbbGIotUKxM0Srnjg0u0ys6r_GYDOceqselNLYVoTkcNoa97yPqVXM87CEpxX3QweenlM7D7NbMmzWoEe7vvvrdROCt2Fu2lEUpz7y0 "messagebus") -### Big Bank plc - -Source: [C4_Container Diagram Sample - bigbankplc.puml](samples/C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml) - -![bigbankplc](http://www.plantuml.com/plantuml/png/xLfjSnev4lxEh-Wb7n9NuRMTbyINSwZbPHnx5smEy2LxIOeICm9K6QGfITZXBllVhoLc18CyDGVEkkggTbn51gdxwQTRhTOB-KLf8lLY7bUUGal4GYfyULBwL2e_HNJ2E8MW4tI3g-7e_1e_MjUTwpuyERTF1P46UXapFjqHSnYqBgvMY8FBVmLmyhnIKLyPJuWaSq0XieZra7xJZPXD-Pno3I5-KBafTYT9ye55UWRFZuytskVaMvSgHQPqmFvDuUJLyQQMfA4cV1fJ-4y5y1aWAXLwcT1pmVLAuxdjKJCIYJjq3YOaLhJonoPCGqfnbqBOiCAJr_QnBGRARzqqyCUzdCxEncB18oANzNh6By-YYFEnPs6BnqlxsDQca16LHUrcH2b4HCreP6W-XGvPYeNUROXZWOmxZT-lRuQZnc0q-2qOjYusN1wJyEjK6cTJ7a4GDDkj3OaPuT6TP5fJ3bekg9yWnhihCgTGROav2s50k8Bke5fPvGfCX33_d4s4oHzZvfsaKVq3aHpZ-VRio7JKeIKfqJH2SGaHK-52AIPu3JYbaG8jO4pXbiGiCbALdoYFrYuwVpDVXzUzKVlwmnNg9LPNQ2sGCJDZZB3RyftWV3ZgNxw_649C9zgeI3QTwGqD37npbHMCxZfvKyNbCpf23uYg0Ht5P4pZWus9K7ttBcsjGYu3YO9KhnpGl9YCl1yOFgrwlnHRGC_wD2R6PJLZoOwEekeeutHIoq2Vv-YvaBwhLWyW4zxiS7hmrf1tOTd9ZARXZ3_8tcT-T7IcS1w_tIgKzKyf_9Up8zDVFpggvcA0t2PIp6ie9jPZdT7sksfGFJoiLmzACPnZFfWlur1pSMlYb7-MAHXjdw3VPnYU7HuQXkLGFiyI8GUUGx-YE0F7GkuJJFIw36l_eDuVKsTZp-0YPXdamuEyJRozJt1DOVKYt7vuQ8knnHql85fikXp2PrZkHZvyD_k4xwRdENZpyE0L8IV558lebmDut6vs2bjddx2P9Tfph_Fmm1LZquak85fikWIYW65df_3rzmcVsTpuFlP_GFoAmR5u5KUmq8zo39zakIVh7JHSq3YXEn_0KDbL1mih3j9Q2uUVPYoAAF_IFhGTEPsR4fsRUtJw9JhzUtGw9JgTLCSU5qEHqBVG0CNi3b69YRuZ4b-MIjFvpoZIasnEv19eJCt1Jxs5uSmJ1CP16IoZCLWaYP0Q4JUKUbGaQ83mQ5jNfNlhU0cXu1pVQ0HQW2unSyarvH7AaaN4A0_HZ-2MokLOHCkQsUZFm8uu2qbixNB13zSjYILKGqZ5eXKnp0dxBYPvun6zfR58Z2S8IJ0i-nxUUq5_S7qrQhxFJkx7fo-Vlscw_k3ZCEXVDJeZJ_3rgVbpWeFV1yEWkz5_SlBwjDdsWJp1lzbdrxk2WkEncJw2r-l-uTsTTFtx2YjQAj3CdqYtG-UVd8_Vl6Y-FYyyoTDlI8wJUFI8dDqeb98_RPY_GlAhz7yKpYvXYgY-QBqvRnsNn_aHEVlPNXxdXz-ZVBWSNemwmVlWgbsPcRgXd8kLc4ufZrPt1vNlxo3tuFSX2i7tolUphSoefnAmob8huhmhair2lgcq5Ocw4KohQ1xK2HQ1EYLqoBhbNxeyXI0jzBlMGqjuXzkGbOVvcueICFCIKHNA-r4_yyyyaoYmiCrt57pJEt3sAuzFtaVUou5IS-i5n8xg3bueg-2Jzy7s9UvRyFZk6_boyW-DVAcv_QyD7SKTRm_Xqqgl-99l_prWIt1Da9fKSCVqZ77GZxSh39tnWdtWS6kNjyycx--e5CO8YOIT497XZ6aaesgP0hAmkEPjTLjwf5QkWj9aCjb_izZ2HQznUHNqDtPlBr-SjjklVj3kpSNnKHPfvqxvtkAlvNdtvHcLl0Ydk6wS_vn5tDK2LvVyKxTVe7QzLuTylgwBs2uy_8A-Dw5yyVV9xL_sVOTsh_nETSVYxxmeAllpH71ypvLzfrHIyFFhnhFoXOCUG18l52JxBHEERC4oCV3BkhMnhkmFATxTtlMLAOlhudtwgjayF_v1nTjvzx3Y_UJOFWKLs_bGMB7Vu7cgVVfNnVu_gzXfxlpv5Jirv5TidyTZL-m2SfMj_pfGUUhzlubxyhLIIO-VuK9fCQUo1YttLcr0rfpjEyU4VwtP8fec6Obj6v0m50kkbVc5RdlV7vuWbYbaabCDJHJ78b8zmFbl9-Pw0RoZun594fJ-GCVGI9AOXNPpMiMcNyajgS4WaQWCtN-sJ5kRnkmMULXkIgDiQ9EGScrAecrsXWrFepleDGpBl6cL4CGRsENai4Ucr9ZFp0v2oH9TWmQVBc8YJNDFYbiMKGKaZkytCrdmq70dCTDBq09ZQKEfu9OHey8aeCCmbk9EKUbJceinYsaQaAxvuaYrdjJW8vaJZ4MU3CHipinYeXPZXMJ4v7ycfpnsAm9cNM4XzVcDiUvI7Y51PdAbTtd_YBK5YicrNevm2J731O5zsn7HP4mKDJcGlXhSmJywaFkkXKGh2uK499qofIL1S61y8kJS4gt1Z2YxlkePX996b6j6ObKpAKsLWbXCyGlLuSz80nUCpOFtdB3is8pMWiCkVeULW34_d54qbTRFBWkbCFi02Bw5Cwm8sMO0OJSmqq2iKH6JJoIPqspcE0FEFnB7sKY7sE22kU4c4DnDwVKmrzoChG46XIjYmxxsjDAdyKPLM4_D6qMLiNqn7FO6A9YNKmafbN69xU1MvaPzLm4ipdf-PtniQoxld2cYbZoimQ-uCXvPivdEsjgkggDEFiStagvFIQJ0_49bwyoTP9egqCB0fMZjPWjnh5jv66-43OzCyIWbyx7RSLmCnaqUOolp1jYXW1wQLfFk2BzcCkWEUramSdek6pm4BOp2UkL2vtHbKnViZ_MhTlC1wM_G3jBiX5AzoY-8lPZ7_mK0 "bigbankplc") - ## Background [PlantUML](http://en.plantuml.com/) is an open source project that allows you to create UML diagrams. diff --git a/samples/C4CoreDiagrams.md b/samples/C4CoreDiagrams.md new file mode 100644 index 0000000..b3d251d --- /dev/null +++ b/samples/C4CoreDiagrams.md @@ -0,0 +1,21 @@ +# C4 Model Core Diagrams + +The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/). + +## System Context Diagram + +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") + +## Container Diagram + +Source: [C4_Container Diagram Sample - bigbankplc.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Container diagram for Internet Banking System](http://www.plantuml.com/plantuml/png/bLN1Rjj83Bq7o3zmlOTD0IN60dlggOvjD6bZHusSfdiIg15j3pgQ4MP6Tet5_diviYHBSO3kwgIXoCT7yd7qmNcqlYhKvSLlKWjLvLHP1LllI_T-FBQulzb8lwsoof4LHdlI_aQOOlma1ThSB2MLfCRJlwvZXTe_Bnx61JfFbatfbFrHQh8tPPtX3wWqnnQC0NvBi3PAcRtK6r3i1QXp67oMrl6R0SuDoWXKwX10MgBmHehBYuV9tu_FgtJr6AUpnvSb1pIMIP8cd-UhwLtdytA_kaiVvX_dorc8zD8h1cqH8PUuiLWmJGltNBdLvE4MzVV0E3bmbKK8Yyawewz4vRmfo4OmxTv64sZDODPrKHd7Hx3dda9P1wAgRO12c4fxDteNG8_mwIsRShI7A_4dexqcCNe7_rnU03yTwQizPIcM9Nk_K0QJibGyA2-D7h7f4-umWgIqeOB5rscmpKZ97JEfsR4Ql1JG3BgUI31tYREs-dWIU0vJkvB1Hmb_LtGTuuP2-ZPj8gmiVGGJlQaKsc2EhTd9d1pmODzEisQz1Ewef3y49OYgRgQ3dSGG8YrmmP1PisTzdbCgJ2OLDGrPr8UMrFJt2BvXWToB8HaMOo4zvU2gp36PPd3_XPmxOtSa03djfA1pVZbwpD1Hc4Fp6iWaNnvWSFR6ChMmWs1f8vsto9b1QjPcKOytWYqxvu0LAqjOodb-4fMBWh38ELwW3H_8Yvjp6XcAxwHpxfCCeetltnREpB2RFSKD-lQB_eIMC738_MzFuFCV_eeAb2frjO4HvzSBFZSB5bAikFkoHkTTMKXXZJDh3_CVOekQLNQC3CWzq8R52PP1zPhNcLwjSA-_GOVDj0KRkafwRGRCJELFeuwwlOs0Xw8TrZNtEdrvyKIgTpkS5lJPaGlPxrQhE0ckGyVZElt2QI3mshTDcIv9RhQPwLq9HyHsuLkmsZfKG9iKtK6B23ubZylnW40_xVyBJM_P_SJjj013c2V2tC7QcgA-XFQMDvAlA1EW6-JPxVHKR43jjUMLf186Ta3NmLgZzBYyaj-GnZ2mSk7IxHWaYrNS8dK53UBFHDXs9m2CcnPzutzcrw4F7Ci_ify0 "Container diagram for Internet Banking System") + +## Component Diagram + +Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%20Sample%20-%20bigbankplc.puml) + +![Component diagram for Internet Banking System - API Application](http://www.plantuml.com/plantuml/png/fLLBJnin4BuZyH-cERGW0Rdqr1CXq0BY4H7eunJDUYSRjtwiR2zfLFM_TyQRnoP55L9pYNSy_kQRRpxldiQ48JNMxE-zqKwPfgGc69YbLCSF_Nx0-KcbqwmfcaX1UPV8fHFbRVz1AmoblzDKa-aFtn-F3BhqT7lJjnWJ1GvDXjxMtic9EbTu1utZivOZa6O4Ks-CdsjNWT6E05q9MziwH5vvuDfWl49Z5WAo8WelbDZVknbyktzwd7ovUhoSt5nykhWxbsZIoV21LJQK6gk0bYa4kEAkWgC4P-X-29lnWZkmS0o3qHKCwjfmhqbx9q13rW2PRJY8DHv1Rym767c45NLJUxpr7Pyngg3hb5j3LpK6W-oCWd_M9KNWbdAhUaMXM5AOibA2WqQdXMYWcfYyfH3XMQESqG7cL40H_9n7Sz8xx7ApGktM5zfaLbBpAreCscsNP-6jJbH2R8h8vNtw3pgshRVyA-bPAzhXLHPS_XmJ5XX9g3oGmHOOLc4OgnbPbDrnye5fYlSWKALZ2ZcR2VBWR5uVmGpZZ5l0Xccuj1m0g42bFAA9Hu1AKOnieeeVAAbCgntpvE9dEh155C6Ov9HTGJjEw52HWVbf5abnO2rGXn1WuPkqKIXNzurBl6B-BcAMiaEaez3aZ3DB38i3h3MNtN5Wxn1-xUy1_zPMFeYwSjc8bMChWq05lbYKdNRxUGWFnDTe7PReGEvTgskKQGe4jo3B5ySVMnaETqjl6kiDbaiODvQDjdWLZxKHDtQQyzk6VHaPnJDAgpMRIwYiXVoRIIJL1FQc2B5SRdRp_EeWdPmHRb-1RMS7iIDxAMlYgdQoHw1cs3xK6EFSXx8pl6qURAGfAYpf7tQ2ZpdZ1LO3Q0y3YzIEmgunjcUnz8qKvokqz417XAT8QvKaOJEfBiFTh0r0lgWFX2MyXJc7Y2KHXjVdPyFkYGvQUuSofBnk-4jm-VWu6alsR-6Q2yWxSsdOLURr-FvkaxhEwdZhvSmsrxu6qBu6xvHSoT-GFm00 "Component diagram for Internet Banking System - API Application") \ No newline at end of file diff --git a/samples/C4model.com/C4_Component Diagram Sample.puml b/samples/C4_Component Diagram Sample - bigbankplc.puml similarity index 100% rename from samples/C4model.com/C4_Component Diagram Sample.puml rename to samples/C4_Component Diagram Sample - bigbankplc.puml diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 39f6d0c..8bca5b5 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -1,4 +1,4 @@ -@startuml "bigbankplc" +@startuml !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml ' uncomment the following line and comment the first to use locally ' !include C4_Container.puml @@ -7,20 +7,16 @@ LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH LAYOUT_WITH_LEGEND +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") - - Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") - Container(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.") + Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API") } System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system") @@ -30,21 +26,12 @@ Rel(customer, web_app, "Uses", "HTTPS") Rel(customer, spa, "Uses", "HTTPS") Rel(customer, mobile_app, "Uses") -Rel_R(web_app, spa, "Delivers") - +Rel_Neighbor(web_app, spa, "Delivers") Rel(spa, backend_api, "Uses", "async, JSON/HTTPS") - Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS") +Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC") -Rel_L(backend_api, database, "Reads from and writes to", "sync, JDBC") -Rel_R(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") -Rel_U(backend_api, email_system, "Sends e-mails using", "sync, SMTP") - -Rel(email_system, customer, "Sends e-mails to") - -rectangle test -email_system -UP-> test -test -LEFT-> customer -hide test - +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") @enduml \ No newline at end of file diff --git a/samples/C4_Context Diagram Sample - bigbankplc.puml b/samples/C4_Context Diagram Sample - bigbankplc.puml new file mode 100644 index 0000000..70778cd --- /dev/null +++ b/samples/C4_Context Diagram Sample - bigbankplc.puml @@ -0,0 +1,20 @@ +@startuml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml +' uncomment the following line and comment the first to use locally +' !include C4_Context.puml + +LAYOUT_WITH_LEGEND + +title System Context diagram for Internet Banking System + +Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") +System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.") +System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + +Rel(customer, banking_system, "Uses") +Rel_Back(customer, mail_system, "Sends e-mails to") +Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP") +Rel(banking_system, mainframe, "Uses") +@enduml diff --git a/samples/C4model.com/C4_Container Diagram Sample.puml b/samples/C4model.com/C4_Container Diagram Sample.puml deleted file mode 100644 index 775b4e3..0000000 --- a/samples/C4model.com/C4_Container Diagram Sample.puml +++ /dev/null @@ -1,32 +0,0 @@ -@startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml -' uncomment the following line and comment the first to use locally -' !include C4_Container.puml - -LAYOUT_WITH_LEGEND - -title Container diagram for Internet Banking System - -Person(pbc, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") -System_Ext(es, "E-mail system", "The internal Microsoft Exchange e-mail system.") -System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") -System_Boundary(ibs, "Internet Banking") { - Container(wa, "Web Application", "java and Spring MVC", "Delivers the static content and the internet banking single page application.") - Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") - Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") - Container(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") - Container(api, "API Application", "java and String MVC", "Provides internet banking functionality via a JSON/HTTP API.") - - Rel(api, es, "Sends e-mails", "SMTP") - Rel(api, mbs, "Uses", "XML/HTTPS") - Rel(api, db, "Reads & writes to", "JDBC") - Rel(wa, spa, "Delivers") - Rel(spa, api, "Uses", "JSON/HTTPS") - Rel(ma, api, "Uses", "JSON/HTTPS") -} - -Rel(pbc, wa, "Uses", "HTTPS") -Rel(pbc, spa, "Uses") -Rel(pbc, ma, "Uses") -Rel(es, pbc, "Sends e-mails to") -@enduml diff --git a/samples/C4model.com/C4_Context Diagram Sample.puml b/samples/C4model.com/C4_Context Diagram Sample.puml deleted file mode 100644 index 9f01afd..0000000 --- a/samples/C4model.com/C4_Context Diagram Sample.puml +++ /dev/null @@ -1,20 +0,0 @@ -@startuml -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml -' uncomment the following line and comment the first to use locally -' !include C4_Context.puml - -LAYOUT_WITH_LEGEND - -title System Context diagram for Internet Banking System - -Person(pbc, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") -System(ibs, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") - -System_Ext(es, "E-mail system", "The internal Microsoft Exchange e-mail system.") -System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") - -Rel(pbc, ibs, "Uses") -Rel(es, pbc, "Sends e-mails to") -Rel(ibs, es, "Sends e-mails", "SMTP") -Rel(ibs, mbs, "Uses") -@enduml diff --git a/samples/C4model.com/README.md b/samples/C4model.com/README.md deleted file mode 100644 index 5ad498a..0000000 --- a/samples/C4model.com/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# C4Model Core Diagrams - -The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/). - -## System Context Diagram - -Source: [C4_Context Diagram Sample.puml](samples/C4model.com/C4_Context%20Diagram%20Sample.puml) - -![systemcontext](http://www.plantuml.com/plantuml/png/xLXhRziw4lskNp7N_T06S3QFFfhDJOp6jj84wpY1xQ1xjoqCMg9ZeH8fa7GTxtR_-mufcPND28Bitc0_N0LePN7cp3b3SlZu81KHQfx4taley9WBYIylAX_F-osaquXHy7l-ZTyVZIzlyP_ERUzs02ykpUCXqb0juuWzrCGS-PshVeOulFwN3qV7dYU_HImbWYI0HcGUgn5zL1TnzC0IoXG4-0yLHRE58EcdA5GpE3uyB7nFoECDbP8yq67qRmf7Rm-BNe86Yh27cC9_FC1dYAYKgsLABpbJcSUnQP4p4l85YeCfYINr_bk4kH22Bt88arPuySuyvek6ShyM0sWmbzFPsOJFMKZ4ijLQyTjWKSBvq8cmmUEDUSpNDXSX5MNVTOzI28cSqL3JV0azikHpLQ-BOuwCUnT_tDwFnXV3yV0V_gXpLP0y8S6t1w75vZnytsztEmMB6M7XGaHAKGPApAaxGBIwFaaeD3eyYG8O4YRXPjZmih42KyxrVsTJj8D0XpaND6nz8e9XFa_F3dH32pg24aL3D1SGHZAOInbnrWH6QIX1SPXG-4xYADHMtc-KXJybMhqhhQFRkt7tzbCV_LBZovNY2UBgFaROJVkUVpaQ3wu_NeqWfbEbNKJqC5C53qnyEniL4QqxUNF7vIiwHWL4De6EOpAXyLvX8ZJEp_El3LWRWKH2xbSDg5_qY7mQ63vdhL_B8w2o0Os9bYndKLfJABgELvoEcYlGupLwDgNdZSOUh8oB3TOFJZLvcvPQOHGDPcodU5_OmS6Pn7bykb4eMvzp-Azd1xgzTN3GMCi1SfiAdZJHZ1VwEgVjDZMXiR_VQknLObXXBfXhOr7NyjR6AVygTp3UBa6tJJCysz_N3AkXN9uLHXPy3RrFSGPEkDWccQYw36ltf3wTKnjZo-GYPWNaxabsSjpT9hcwi3ePxkwUsd9ilc0bHCj3kn2L3AjbRAJlVflqtTyv0kztJruPSbf2iJoi2r3DxRvMsdhRf4qlqOwytkw9AyUcKrL2j3nq1KG9mrwjz0ssIP_UtBWQ1xycVoNWMBpACrYgmyMe9bcjvESE6gvedDBQ1p1qjjN1mFAzlDR2_kTP58QKVUtkcuOrd_iAd_idV0OLFeCdV7eLFhtSnnmN0vxIKxW06PaTekHJjI02NvPIqUHlQ78deeI89T2OweEVF8NHp364Y87KMDfZE4zJBXGY5fpkA4yn067Xfg_CzzRn4WBE6BxH41G7LH7ccYdAGhGbyp2YB40T_dSgbXCUBfjwepy3q-DHG68Jbt6s__DBQWWr4L96OKQCpvLvvzFru27zJcEUQYK8IJ0jsnxUx_p1yBO_RdzSdTmFJzuSls_RTl-V8t_Gl-YD7SDt9_hF6Wx_68xycqBxqT6xatRN1N8C_swUkdS59STZFNquQxNSmxizwRht5SQqqg2zSIBTo8XxSZvy_xhzxhBq94yVaHmZyVWPETjUg2H_Sg7_Iibdm_yvEDkHLKhrTUVzPUUmEi_FoDaTxTLvtlqUvTFrw6hSyp_w_QutqtL3MebUJ1ye2xEx0-_7EQmz-7k4Hl33-t6sCJ9QkGLaezIOM7LbjgkK5vqsCj7IXdaLNGUrXcMWrWa56LdkfSjByFD2NxSU6i8rRaCoXMit5LLW-YMaCX1FetvXNzZAeYp2HeYn_wXgS7OhJm7QHTv5G6Ku6szeUhM62ZkTNV8MR2VYRWINxxQPhoQ_Q-QhmkrmRMWfrhmzXC-PN_abt_Pxm0vdYY0r8M4HgLd4G3tVhZ2mmKlsWQEDNTuscxpVqIc84H89MoCYWbcaa8nihXoGXS7LRzbjwO7Cf89KP3hTVhFOmKNluhhl3mgxjpUlJxhTjxzezsRp-2oBj9LJlRVuQtd-_rYUxIot5SSzJxkbf-wDEHH7Oh4yrU5XI_NkX8fbtIMtKq5t1DMlwTQrPbctAieAUf9ofj-B1TqwLPRouehmgdf9e7kGndC9wNOBW2LRiW0CtOAjOnHgzYvb-URkjey5hr2MJzwssvU7lwWiMtMxbUKNX-OfgSLMGsajVeydfUx9NxLucrhyyiUPizpbm7PAPMPEJ-HcTX3yMPKzX_-pAxlLKLRPy-Rdh-pbvBmdHgsd8XMlTkAcs66lGnYH1prxfroOCYGOLT0c3AVrGsxhUVcvD9q4JMXaFqXihJfpgNX2HGCRBo38VwssfnEqQfgA36dkQRu12G8-rmKGxzhpurSqaOXHGiF0np5VI1j3wdBwFQ8BY1WAICpk5GWkAKh7ZiHwfAQfe0dvHY4bouJcmRtY-KaJyFSJ4iKWRTZHZ6A4V8hSH87WkjI3_nZCi3CfqA83GXOH4wFfXY13p3DzGjHGSK4ba3XUvIp03p393LrfLdwp84q9mYG9j1d-eYemqWOqphejI-szf18_urUZDElG8MMXp3NeZEO6neFAJGF3-6PqLxHAYk0Vq7gUnFy3) - -## Container Diagram - -Source: [C4_Container Diagram Sample.puml](samples/C4model.com/C4_Container%20Diagram%20Sample.puml) - -![container](http://www.plantuml.com/plantuml/png/xLXjRziu4lxkNp7h0jS6S2xfUowN6XlRIfCzsp5ivzgzjZ1eYRPvAv42ISVrNVU_tv2IMLcALh2z6zo7LO1M9fzvvfaHENpvKMaYzJ8AQq-XBK8X5RuygNngjHy2EcESWjVrUbv_FBcwnN_QjztR8JoviayDcKPw7J8-tv5pxBMl-mdZwEPV7Zn_KQkfNnYFYIGH88WiGpscN_LboEOyebo3Z_zGcOMj98a_i40luCNfQQOz8bzxL2aofoFs7mhFNvzchIJrDU7paC9_Qu3F25cfqEkONWck4uiNjaSjI21M61pCIAXexTSipQMKOfLIsBJ2apVsiIs6gjYQTV3hWvekBgPYoGCYrytcHbzEHOdcquA7d8vNzh6jBI43AilQpHUb412re86H-HIwP2sMUhTF70fKtBty-VPkFBaSJKR_yCRjwqp8K-B_CfScs5I7vtcjJZk3M10Uh2JJcdBGSacB0yH4roSHXNfRHCo74U4AUgDwBHahC1F2_7SnGnpuniqxIOFc1o8vvlFyuiHqDA4jAT4qGBY4W2b_gHGJl06Sqa215Z2bS4z25XXKxGVAW-yXkdWtiOvl1vFExOS-siNMLcWjK34ptnXfy_YkTpMU36_UNuyXf3DjJ2IRBtJ60XFVIaO5exjEtjHm_OnEC0AY6a0d8PdIy2Wp4UhltgMjTTWQWKH1QbTDQ5xCY7oO63ublL_AFM1aGneI4x9Qi7Z7GD5qij7qlB4XVR4bpwNqNRr-11jmjiFPmRaHxzAoanjD_GK_oDzdVd9oeN0Ud-SAPVDJIl_buiJqDqzEwbivG6qpAQ86maJcMwUoYrqDg1yVD-j7bHmki29P4UDOj_BMmYd_R6DWh8i2Ytr6uSNniL5OJLNKMG5ov5liVOepS2haFid4gCkv3axgWpbrFlPCBd9MKnwQvBpmpZx9DOMraE7EuQajvnOhNYAqt7MHeb9XTHYvzDtjaxwxGI70kyEJLyOSbqiiaryWgDPsjrFQklkapIpHXV2wXoUkd9lET8dGSjSb51KAkpkbRxXF-ipcfXZZyF3y_GOv5g_o39R6KUIe5baToVSTD5pJCAOx7y3Gs5K7IokEqbeBnvyMB0We_z8vjXrRDdSLDdSFs0mhR8OFs7GhRBgfZJqk-YAcvt09YjaTeX8plI8INzPAq-Yl21b85X6v1XfIS_1Jvp1U5830E2Z3PIn6opWMKYDZncX0HOmE20_ojYhTMuThy0Nd-4O3q09qXPiRhYaF44kM0QFSnpYyUohNKn6i6sQZlm3xnPbFGkkN2txylIMsWXf8gLYG2CCnOT_5RDjvGEzfA68J2L8IJCk-X_U1DnpTzYUjzvkJ--dPgnTlMwxV-pZsXltBxgG0V7Dc_XnmzFDexFKo_S-VlpbhTOf41U3VxBFhNK79yTXC7y6RpUBXtPrqY_SL5be9QELEfBcC54_EfszVjjvSbPxawLSKnqauUKJDxYjKYZ-xD7-bufFX_oYQtO0fa_go_VQgVLgTvqVKN1pjrNa-_1xbmytu6YyCtdlzJcrXwePo8TP2EgSyIEuEQj_UmTQ3lyS8Wc-rRnUvaT5C4P2CKWjnqPLXDodF6kKoqJJ0j8fkapfW6Qapme1iMCLBbwVW9OL-vtfe1Uzm6v94k7rJKK5cNWAgVFamwsV-cMyG9HxoUYVULxs3PZSZgiKRviC2g73d_8tiLzqX2ZUTY-8TsM72dOTolVjclbhymPclS7V0jQ6JkEFj8NnAxCel-VRV0xO5rmIbIGKhfXUCWtwyNQ7ld9Vi0yUvNTu-cxo_ev4V8YKATY0Y_GNJA4OrDWQe8k75j-Isz4GbeOBIP3RRVxFOnaNlygRl3JExjrSlppgTrx_JxitbyL4MQHTEzTxYp-Nv_sDvThEyK77SURfGUdQ_COViICoMfrrqk59zkA1SMI-AExoWku1sh-dETCUoxg8eA-XHBBXvpnPqPrHPohChmhFg9O4UGHmk5SJxBG1ERCa2C2eMRECZKxCFASkzmMqV2rwcB9-zRhMkJd-dikoYEwmiFpcrJqajTZ6KrkAtU5BgdErUY_-inSOejzevNZUZ4FKKOOKFaS3S6FYZ2djA_qSNTXT7MM5Fkn-_i9UBgpqmQ6kQwJ1Jjo5WP6xcxKn8Mu0afnfQXEE4dgVxzLejFP76Kxy1zUG72HsglLHQH5JMiVCI_FJNPcCwHLJ3rcA8DvQc3OZlYwKfVNZBdZsxAAJnZYF2DkFGy8wHYV5qUFQOBuKfi-1zzHUOIGeqQv1ZZAQ6ieVnpZ1IcelEi8-qa5G12SEDQbz8b9u2qL38o6wAWU1AfLsGgk72Q82MX2lY6nZ-ejhFw73B8xDYyfck7oKLChD3M174VQ1Jk8pZaFdMkz7wRt9Fx1emYgKHr_jdspHtQCZkKP1LhpJ2VJj7ATSMhLq2gNQ1fKjgJ323vBiRr9qJes9YqfJ01mX_I9No9OiJR_XDbY6HfcSWnJqBakm-h6Asv3Pf96Hw3LfypoxSCs9ic8GLPc8gnKfHMPGN6NKzCMMX5MRSVYGHmVniAu2GHSoilsevLQX0w0CKHOc_z3zSaPbFYzA2gVauH9CfKTIe6TAG9DomQOQHlw0HoOp49OO9aiwPqjAYisEm0GkY5dQVW4guJZy3-986vYS9as59bO9GpDrOp2aZCJCJTd1JFi9qPeIvD5QbosI8m4-uR9rSZyS3G0_6kVMEmIT-gJB1KXweTEeg6trlF43e5ZAPlNUAMiJ7NjUoZl8mc-SX9KZu5rX9fb6e5iRafqwhdK6RUQLYafaocKxROVcSHnD8mMNqsp3SQo0ggPShaa5j0AvNnQuxqnhb6assi2EVCWmG0JzYqp8AQ_y3) - -## Component Diagram - -Source: [C4_Component Diagram Sample.puml](samples/C4model.com/C4_Component%20Diagram%20Sample.puml) - -![component](http://www.plantuml.com/plantuml/png/xLfjRziu4lxkNp7h0jS6S2xfUwwN6kiNfScUanYsizszjZ1eYRPvAv42ISVrNVU_tv2I6LcoJh3T3Ux3Aa33a3FFF3CS3b_G7vKcKY-YiFOKEY8KKc7ZIULNg_qGq2dZ5BoUT-tTZCONj_XFvxPtEu0d5_Qh8T9GhqB6PpjYZhpEvKs2EBpwfmVFNzHgwZV6Oo9912X45g4UqQ-w5R8PZoZNuEC_L6R5bfB47rcWv_3Yz3JJ7v6lrrGfCgD3zcyApr-VPhKazJNXiv32Vsg0tn1HgT2hc5u8hXED5tP4pKaWbkWSJ4ceQEttB4nBIh5C8MnOuSaR-zaU0rNipHhuVIkdy_E9MF20o5MpkUQNOr72-RHW8SVZbVriRrl8WCgoVZEZ50AYvZGmD9z2Zwp4GkysnQ50nhtMhxTtet5hE1x-mnjrBZCkJuZ_sqmQPrCUdkUrkvsCn9pmO2cPrfI3bWjQJ13ZtGs9ADGx8c8-30bNS3sirv9SWQaGvjVvL9ZyCMRUIneqFnB9CPxlpa_CG1CwaX9D0nIN433bBvHYWZU0Kneeq08c5Ev9o08ZLVk1yk31HUVlsjVHRN_SlVruWtgnrHLQ2sJCp1mZR5w-vrsCneEh3vSZ2EbK6nN9PdETqS30jvEiO7JNnPighfxHCNf0L0FeE2GJ6Xvb5aBz_VkqjmuR6KWKf7hLWAPXCd8xC7nAHh-KMq3F1ZGancKrP_6EZgBgUCtfUMCD-cA3dWlf-thz2DR2sG6d1-yCUHUMdSnewi_vGVO-yvEJSuNh-5skK3O_fV1Vpa_CUFFafBuH0-GsbI9ge9Z8p7LAkpZKWFhnSRD-L8dX72k25MKSwaRSshZadwKALhj8i3Xc69uV7nk6rL15dXL23dm3_ORY2fm8kKymqUjgh7s3kZscpiQUmKNCAiZ3WvmdtjqdkAQm5YBSFJoqvTXYoKk8bfikGbGoh7OZ5xwxVS9troyuU7TuyCgGupAAvVGB0DNSxdOAMs-Vi9ajkk1Ux_30bMFJgIuXMcww1AA2OM-dy0ts2Pyvt1Hz77o7-9M3O_4gZM2v7qMCQfBLdZoSeE6IXZ7T-GA6oguwM5XnbDPQEFuqPq50-PVkiHtOqBchqBdReZEeq1biqUbLwFHI7NjTz4LCtq4B5BCdH2McUaaaDbPAq-YlADANB29o1JIavkAdti5eNX04na4PBACnNCIna1eHCqfzAc8qG7YGrrNfsJfSWIyunnODG0lG5MQkkAOyG5co21ZbFlhXtLEvceXWrJ07_JdO6MS-2QrTBlZnGqzi2JKGKh4W8OOvOTjYkcayeFSq5B7n1249XcNVotlV6mnlRyRj3-kR--dPgnTlssxS-sNa3MvQlN51yCsP-N62mr-78-ywC_xy-PkpThS8L13yc_rsVIiekHwRvIDuixdrycuZjEMzmefM2hHpDz9SH8etvzEtBzjlBaflylGhakCa73yYPpSBbUJFMkQdb7oI_e_1sMLMATMNdRSNdTFgE3yYvsAsLyVvy7UKZrUZot7F--3TT6jpKpUKSx4MqXdbGV9sKFls7ZO-_7k4Gl2jzkqybndDL0AIBBKYphiosNN8iqgvI3IjO38bcw1Ei0pKAQ53rgtYeyjJyD92lsizj8HtU0r9FDnygQW0Cus0AbzkH_tCF_ErH8c5FD-nzrNlmDcjY6ho3dbF1ohDENj3EwixUE6MSu6y0pkGkBDGpdVVo5UJFpJobURsVpPq57TyFOHFYLxv8z_-Py2Eu9eWDQbWoVISST2FTohqdV6IS-0eTyhRvv3tTrJoGuH4maw8I7_ED99HZRK2ih2uffMybfwen5LGcaod-nyMExZfjQvkl47czFRgvLct-_exdTvS71zbatRkL9yj_joU_p-sPxVAYvNHtQUBfMVN5tF8PcAsFEt2mvNgmmdboxeZTt11BpgqUqrtgZkMTUT5MK6FOi5DErlGdL9bAS_k2C-gjmHw176uK13ljm4uiYKRmB1Oi8sDJCq-f2nVzszliE1bolBPwtRxulGxbMNdtM5b-Scf_KfgiVEXj1Q_nPjIzsoFMlndBKObjzlbSDsAib9k7d9IBWN-gBgUml_HTTtvKLBN7Oz7h-lbv6fRShQccGupV25WP6QMxLH8MtyafnhQXEDwdgN7TJY6LlyAMd4SCfya_tNWOIDJCMb0VPZKvZwPqQnW7OV-HUu94cMnjfKB7L-4H9gHlXJt3Bq04eQs7B8rWKbAOBhWli51X_JA54r_eRI8J6s-PyJeC0bBEe6954k5MqBzA4CjCioknOI5bfGn-Gk9Y6Hyqpg4B6AcAgl5HA5reGzW4rbxwIzJfvbFDsa54xJU9PfCYAA6oO269C65TJSC_JcDY1aTQY6HvGBT0qbdJ6bffP4VJbfasmsO4pMtEmUou3eDF_YI1kPF4c964j-dIa4ePYOzjMzOPUwCqKIPS164bIIYkIHmJ9BPIYyTFdQuy6Ju0C7zNBlu9CR5Wcji8NskY0ta0u_QbeC4YHaQpQLU_IZPIZ9BJh4PD-pm5wOm62Gfmf3Q7Bl-kGC3glH3Tzs0Xg5O9Z5LPY8D1FB7vlQPLqaCZdAMdLE8c3PXk8WYP5zD8vk2Bb3sp0845A88kKhZpAHbue9O8AAelv2Ob2OCQVDXr4vTB8qVRKesSZ-NqfA693sTA1HF9hK1_fmaVyH4gQMGWPkt70rCeIdnIK3_HoB1XPNOGge5YJ88div3v30s9y9OjgO7D4odFnE1EqKnGcxyOP8SlQBGWxfTdGDA0lWBBB6BWXQ6tK_TTYUZuB0iR0feAynrx-HoDEeFKHYF74RMbiY4fXFx2NTr9-U47DSIGIiPLQEXJ3NOZvG7YoZyBm00) \ No newline at end of file