add samples

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
 

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

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

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