From 352d95ab364e58e2c9caf4eeba08b97a3171269a Mon Sep 17 00:00:00 2001 From: Ricardo Niepel Date: Wed, 5 Sep 2018 20:36:17 +0200 Subject: [PATCH] add samples --- README.md | 24 +++++++++++++++++-- ...Container Diagram Sample - bigbankplc.puml | 2 +- ...ontainer Diagram Sample - message bus.puml | 2 +- ...tainer Diagram Sample - techtribesjs.puml} | 4 ++-- 4 files changed, 26 insertions(+), 6 deletions(-) rename samples/{C4_Container Diagram Sample - techtribesje.puml => C4_Container Diagram Sample - techtribesjs.puml} (93%) diff --git a/README.md b/README.md index 7d794d9..425e009 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # C4-PlantUML +![bigbankplc](http://www.plantuml.com/plantuml/png/bLLHRzis47uNeFzmSn-Q0NAC0dqQWg2kxJLfxKIBvALx4auKRHEbI86ax0R3_lkEicHPgO5kVZ34qzrttzrzHtsm3eshImcZN6npLDygoKPXy8jGJDO5hus4dNEL_MqoCNYutWgtg_FQSiEqSbovQwRBoPDWQ0hz87Z5vMJsVXnBL6wzMavAj8uRCcKpyaUXkBckA5qOXC5o-jVZEitInpYRFpu_XC7RrZ9DikJB8ftTdNoUxzExRBduj7YO-yWmYBcnMbsnsZfTSXF1xFGqca9d1hq1j-FWwuhWGDoXQW9HDZP0ndIjd1tzwa4hPDzmos5qJwKPnHry92UXjf2yK1db26vkSl8lqBpStW9QOE_WRny9z3iLU7NWUOPLHLIUUGxJgfBK7oUq6f7fC-unWgGo7dVrvypRvboAFH5hoD94d63GzXTG5Otvn2dlECNJ8-rXSbiH_2WX3yd7iI-727I94sP4vIAOgcqjqNXpRFHU5Dm2IdavqQPMpBD7ATmBE4tjRRfhOI_GXmW3L3BaHXz869T8bJeNahTDMJM7ZjRiJGHViKJgnv0EI54AnmkmTMw9JZlB_qBF_i3lI00AlXUCNsAOq-ovAeYYy1AAxo_FRQx9pVHn0ye_eURP4F2bx0KwpD5ohuNsqICdVonXS7RQK1w_Vc3uLbXdaE11g8qsPKCrWXqv5u0rYPqPNf2614eRUQrpQq7gBHsuOzUUo3-Uor7TLxn48JFR72ZPOhoYSoTzCgJKVT6KIEkp4inegpSE5j_P3XNfx1ZfKLl0jWqz906gZS6IlrwilZQlmdRIZ0odLfwL24XBwFenHwSrZe0QeYmsJJ-hCWoUk3oxBFe5NLjkVVQxD8qJxpfqF2xJJvm6ucvykvJPKtyN7A6wJUzPDVQX-hfyQ5yKY-1pylWmEUK-Hftd_B_1sNAezZFnFN4iB6oCBfjxvs1e0UbMqXwmnPj_dBKjeEe6E3-CkwFY8oSjdw_qKJZlOxOUWhmIOK8lBF2njthX4txF9LcbST-IOMG_dbSOL4mJOZXpw2z9e19T69o7mtWTZs_R5_uVnil5xocPEjWmsD7AjnvXy85Iq5VjNm00 "bigbankplc") + 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. @@ -88,7 +90,7 @@ With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to @startuml LAYOUT_TOP_DOWN Sample !includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml -' Not needed because this is the default +/' Not needed because this is the default '/ LAYOUT_TOP_DOWN Person(admin, "Administrator") @@ -187,7 +189,25 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ## Advanced Samples -// TODO +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/). + +### techtribes.js + +Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml) + +![techtribesjs](http://www.plantuml.com/plantuml/png/ZLLTJzim57slrFzmbvU1rBKCnf2cQQ9GniVAnqWwjAV8YI-fXsDdjaEfflttNITjqgveZ0UIsEVUUyxrkUwXTSouCfSG929Bc7eeP1fqEw-4IcN9iJGIfiuLziDWODYidmatBPFIeacrSgXSFzNvu5Qap71z9R10EJX-z-P6CkKcb-D1pgn3GqlnCU6PK6Zw1PNhThgTyV3xzIIAe-kRU7HzTzNjl5wi3CCu_78I7PyrcBlpw2mUdvoUN8ryPBTpWyPgjSMKLlDSbpRsb7eG39SBCA65OBj5Pfd1Z3da3RHPsS3oN2XXdM5EQDNWrrQRc6wdOEa3on02X-dK6P6WxV-m0NpycEXISMRcdpu1iv2-XLyU3_JNT6DhXadCYe8At642mwAGr4nV8Q2b2_R8UX0MHgWCBhyTzo3IEMt3GV_9xm-br3CBdg45f-5Hu0mAr8N47jHKUh0ugHxW8preuOTEw3-wj0_tHkVWfWXIfqo2Lz03BkYOwOif3kSHM4oTNcXTvsvGnZmX7hSeAyuKD6AE9SoYftSv3x-EOR-_NxCDAGtQ3NxL4tBC4r8n5TGAAlvW_-QRC9vv-AbmPsK21WkzKF4SjNiXqSx9V3aL_amV45PVdiVdORItkqB88ZFf58JY-8JskMnAsv-I0gwq5-GbGXLRYTGgqwCZsEtlhiciMdiRXeEXevTxH6vXAv4w0oBkx7RLNZT3TC-MB0jEtlJ6czHlIp_0WKTPJPB8BK43eCOQNSdkBTAkzwggj_02a84Ps7IAl9Gq07HWecBnsnEfExNbPiBL3ABwpGCMU_KzG5jrXPKThv0g1qV-MGlhTiWV6xFQ6fz6oNeTPr5q4_gG2lxtmBw4Vsve_n5JHpM05IiplZWytx2P4RwrJbSd-tKyk1WTqHZw8uIzlPtto_9DeZNZjSasS4jBhK1Mp3GJ1lrvEfrgwSiP1xi7EsyF6khnfBN82-Ivz-jB2bRphMcuQpgm2TmKiTcq_vVKvcsjTqe-NXgR9lHUcxo-VzlfQPgtveScLsjLZrrBGVUpWw9CwCgboU1O3ugW-HNuKjgbpwkiox4ghR-eQUWhUYk3lvghrZjcy_YskK7RZbURXwWu_Kh-0G00 "techtribesjs") + +### Message Bus and Microservices + +Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml) + +![bigbankplc](http://www.plantuml.com/plantuml/png/bLN1Rjf04BqZyGzJUcWhqT14FLLHL0AeQKg0OgAe9pHUBx3AUdUrkuRIgl_UMTiOGtr8EM1xFFlUcpSpyDbvj3vB9NHYiOvHFHl9EktMAw6Op1AUMGaRxutxrEjPt5siXTzaSUQuPLfvhlm5qsblBXZQH4y4Drps1X_VpoGg__WmxgNeFBSKMWue7uNYzi8GNRlLRhbdeGnQJ65dqJo9n6_WwiE7-eiKVpvmvt3D8_6B5s_RhN7_n_HniLnCPylXz6dIRhqf8_re6NqRBGPtLSxJryNTSZpwCfeCmybsQyQjq-ejovpNARTT65HtdJuSmfrt8TSWUoPgw1nouAjQQPkY5rf1jAVIqWvSNySwKmdQ_SqDe0Ds2R_3QQ1FLVHRDAPR0-eR8ycq0DIX-3rkqJ4hZEz2NwqpYJQ4-rBgdQjKEV2QB551azzmOS5OlHAI5t9F2G-7bjIhhM2ypXuLeGDp5o9ZXLh3hTO-11SR3aOBvK6l01cZ5W0LNWa1SVIXYJijUhQaGI6qieDmcxa0FiSu5lxXUqvaKJcZhS_XAPsE4nVVqcIv9cJBGpPfhPKrFyJgTSspU1-k0ylHSmSgw9N2yGGIz9ZpLM1WCckquusKc2N2r-ZwuRbEDNZTkvYC5k5sPlLM94IdxHgLSBb3xtSKWXmcSAsG2KctpMnLsvAuth4XQOxHvNnJYqnokBnYuIdosdBtujOS3Sm9ZjxL6HxsqVTn3HmFzlqY-xOqY67-msX8UMnQPIiciD7i_zmDF4TlmrEW7uKvE3wMQceL0jBk-N9UQ2VGmmQtdBwCuOedWV5F89rpMTlvOXaVWoIwtYqMiwZGHcdBUR6h3VlpQ99ybfgyXc33Ei2XsolMXVjeEkcTGOyRjhBG4d6LkAeE7N2UU1nfzinzE5y8-_VqwQOLA9MyBDTRGtrtQiGHvdJgIf_pXehYzsbuEwZAE5tlferyeOuJdFCrUm56WT8Wu6p8p-efsSy8JmUnF5BIYNALnhYdBZGGdc3bgPz9FltF_GK0 "bigbankplc") + +### 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/bLLHRzis47uNeFzmSn-Q0NAC0dqQWg2kxJLfxKIBvALx4auKRHEbI86ax0R3_lkEicHPgO5kVZ34qzrttzrzHtsm3eshImcZN6npLDygoKPXy8jGJDO5hus4dNEL_MqoCNYutWgtg_FQSiEqSbovQwRBoPDWQ0hz87Z5vMJsVXnBL6wzMavAj8uRCcKpyaUXkBckA5qOXC5o-jVZEitInpYRFpu_XC7RrZ9DikJB8ftTdNoUxzExRBduj7YO-yWmYBcnMbsnsZfTSXF1xFGqca9d1hq1j-FWwuhWGDoXQW9HDZP0ndIjd1tzwa4hPDzmos5qJwKPnHry92UXjf2yK1db26vkSl8lqBpStW9QOE_WRny9z3iLU7NWUOPLHLIUUGxJgfBK7oUq6f7fC-unWgGo7dVrvypRvboAFH5hoD94d63GzXTG5Otvn2dlECNJ8-rXSbiH_2WX3yd7iI-727I94sP4vIAOgcqjqNXpRFHU5Dm2IdavqQPMpBD7ATmBE4tjRRfhOI_GXmW3L3BaHXz869T8bJeNahTDMJM7ZjRiJGHViKJgnv0EI54AnmkmTMw9JZlB_qBF_i3lI00AlXUCNsAOq-ovAeYYy1AAxo_FRQx9pVHn0ye_eURP4F2bx0KwpD5ohuNsqICdVonXS7RQK1w_Vc3uLbXdaE11g8qsPKCrWXqv5u0rYPqPNf2614eRUQrpQq7gBHsuOzUUo3-Uor7TLxn48JFR72ZPOhoYSoTzCgJKVT6KIEkp4inegpSE5j_P3XNfx1ZfKLl0jWqz906gZS6IlrwilZQlmdRIZ0odLfwL24XBwFenHwSrZe0QeYmsJJ-hCWoUk3oxBFe5NLjkVVQxD8qJxpfqF2xJJvm6ucvykvJPKtyN7A6wJUzPDVQX-hfyQ5yKY-1pylWmEUK-Hftd_B_1sNAezZFnFN4iB6oCBfjxvs1e0UbMqXwmnPj_dBKjeEe6E3-CkwFY8oSjdw_qKJZlOxOUWhmIOK8lBF2njthX4txF9LcbST-IOMG_dbSOL4mJOZXpw2z9e19T69o7mtWTZs_R5_uVnil5xocPEjWmsD7AjnvXy85Iq5VjNm00 "bigbankplc") ## Background diff --git a/samples/C4_Container Diagram Sample - bigbankplc.puml b/samples/C4_Container Diagram Sample - bigbankplc.puml index 5faa1f0..33cff1a 100644 --- a/samples/C4_Container Diagram Sample - bigbankplc.puml +++ b/samples/C4_Container Diagram Sample - bigbankplc.puml @@ -1,5 +1,5 @@ @startuml "bigbankplc" -!include ..\C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH diff --git a/samples/C4_Container Diagram Sample - message bus.puml b/samples/C4_Container Diagram Sample - message bus.puml index 886950c..4167e62 100644 --- a/samples/C4_Container Diagram Sample - message bus.puml +++ b/samples/C4_Container Diagram Sample - message bus.puml @@ -1,5 +1,5 @@ @startuml "bigbankplc" -!include ..\C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml skinparam wrapWidth 200 skinparam maxMessageSize 200 diff --git a/samples/C4_Container Diagram Sample - techtribesje.puml b/samples/C4_Container Diagram Sample - techtribesjs.puml similarity index 93% rename from samples/C4_Container Diagram Sample - techtribesje.puml rename to samples/C4_Container Diagram Sample - techtribesjs.puml index 4cc078f..9a65efc 100644 --- a/samples/C4_Container Diagram Sample - techtribesje.puml +++ b/samples/C4_Container Diagram Sample - techtribesjs.puml @@ -1,5 +1,5 @@ -@startuml "bigbankplc" -!include ..\C4_Container.puml +@startuml "techtribesjs" +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml LAYOUT_TOP_DOWN 'LAYOUT_AS_SKETCH