From 933a4fe883aac49c50441ba8be3124f14ff6a4bf Mon Sep 17 00:00:00 2001 From: tmorin Date: Tue, 16 Apr 2019 14:19:53 +0200 Subject: [PATCH] feat(c4model): add library --- .gitignore | 1 + README.md | 5 +- c4model/README.md | 247 ++++++++++++++++++++++++++++++++++++ c4model/c4-all.puml | 10 ++ c4model/c4-constants.puml | 27 ++++ c4model/c4-macros.puml | 46 +++++++ c4model/c4-styles.puml | 94 ++++++++++++++ c4model/example-all.puml | 55 ++++++++ c4model/example-simple.puml | 35 +++++ 9 files changed, 519 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 c4model/README.md create mode 100644 c4model/c4-all.puml create mode 100644 c4model/c4-constants.puml create mode 100644 c4model/c4-macros.puml create mode 100644 c4model/c4-styles.puml create mode 100644 c4model/example-all.puml create mode 100644 c4model/example-simple.puml diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000000..62c893550ad --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/ \ No newline at end of file diff --git a/README.md b/README.md index 5b96abc1684..fc98c2b7dd2 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ # plantuml-libs -Libraries for plantuml + +Set of libraries for [PlantUML](http://plantuml.com). + +- [C4 Model](c4model/README.md) diff --git a/c4model/README.md b/c4model/README.md new file mode 100644 index 00000000000..41c3f8a5287 --- /dev/null +++ b/c4model/README.md @@ -0,0 +1,247 @@ +# C4 Model + +Library implementing elements respecting the [C4 Model](https://c4model.com). + +## Install + +To include every thing: +```plantuml +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +@enduml +``` + +To override constants (font size, colors): +```plantuml +@startuml +' load the macros and constants +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-macros.puml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-constants.puml +' user override of the constants +!define TITLE_FONT_SIZE 14 +!define TECH_FONT_SIZE 10 +!define DESC_FONT_SIZE 12 +!define CONTAINER_COLOR_BG Orange +!define CONTAINER_COLOR_BORDER DarkOrange +' load the styles +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-styles.puml +container(container, The container name, Java, The description of the system.) +@enduml +``` + +![override of constants](http://plantuml.com/plantuml/png/jP6xJiCm58Ptdk8m1QGs1jI93H83GLKZfPbO8jS-RInyYModg6-FYo7jmjZ9b-y_vp-N39Hb0aAFe1btrWCp0hWrFZ0J_DMrD5oD0aUde0zXy8-4EFQLxsJenyteqKLjG1DoRZK9sZffoA1YxAZLNCcD9vhvW8xmXRO2LJpdoIaVekGo1bFzoIE3OnwmUtHE2WIx_Mduh4k1MsaGsgfTqkwbNhNTklgWSByu8LgydPExYPHqNPoJXuaKyVEfMj6cA-fbtNJFhr0xPdRulw9kIjf0oTpdhp8xBSY7Wy8BhIJbJkCwXhDOdRkPRZDeqy3I4mpJE8DtjcU92FJSoI58Q_wcwm_HG-Uttm00) + +## Elements + +The `person` and `external person`: +```plantuml +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +person(person1, A person) +person(person2, A person, An optional descrition.) +person_ext(person_ext1, An external person) +person_ext(person_ext2, An external person, An optional description.) +@enduml +``` + +![person and external person](http://plantuml.com/plantuml/png/ROt12i8m44JlVaMyLR09BPwy-IMIfeiDR3PXiw5-lgb5IgMdUSlCx9mzEImZ54OrYQHyDuRjh5zUfZAK3EmY2P1e5uEH4DcJIMX9Ii0M_P1Di5c0ZRk5E09MRIsYJjK_9U0SgLcbkwg7Ml6oT_hDgKGg9l6HBAeHicE_7FfNUS9RcWsxRw42y5BOl__BzaVPey6qBdu0) + +The `system` and `external system`: +```plantuml +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +system(person1, A system) +system(person2, A system, An optional descrition.) +system_ext(system_ext1, An external system) +system_ext(system_ext2, An external system, An optional description.) +@enduml +``` + +![system and system person](http://plantuml.com/plantuml/png/ROr12y8m38Nl_efwc-1QDZnvyvT8rmLNIDEIfgZ_tiuXOx9JNlAzbtVqvB2CK1ZL99BorHYsJ_tmCfMXP60NIO14knYCXCYUJ49BKWAsw8TiWiq2RDmbn16mpjOYwbJv8Ryh2aq2pf6wixgfvNBQadubLP6AINmaYsg4xDZFY_v5xl2IPfNTDr05y1pOll_pzdlUlSAqD7u0) + +The `container` and `database`: +```plantuml +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +container(container1, A container) +container_t(container2, A container, Java) +container_d(container3, A container, An optional description.) +container(container4, A container, Java, An optional description.) + +database(database1, A database) +database_t(database2, A database, MariaDB) +database_d(database3, A database, An optional description.) +database(database4, A database, Java, An optional description.) +@enduml +``` + +![container and database](http://plantuml.com/plantuml/png/XO_D2i8m48JlVOfuQw5jK7loLl4a-0ooJO8DR9AIRFJrhKB__3rbXlqsExFILc2KAdfaBL4NTfnxk9KNJMriOb1UE4lAKYcSuMISrvPt29QYmG9r4xY1GCfpKHad5VPl0OXbry-JnovegtmwgdNEQZQwR4BED46R1PIp8rnXZie9tRwWjMMk8-qi89Cg2A-Vhim-XQa-tFdrHIA1e86Wqa4ywmmc6-TzcK5kvaJEJk0r7FOpL8xeTeb-p_4Merfk_kbn1m00) + +The `component`: +```plantuml +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +component(component1, A component) +component_t(component2, A component, Controller) +component_d(component3, A component, An optional description.) +component(component4, A component, Controller, An optional description.) +@enduml +``` + +![component](http://plantuml.com/plantuml/png/VOwn3i8m34HtlY9iL6eR0PtOAZu4fKb48pbsv3ZYzuaOseA0oJxvdk_s0IqKvmk3caLIlcZDvj7VWynbAjcp9HIFqbkAMY9nG9t0e9G87OGfwsYoUDPsYEGyrDaPW3xL-wuoYR3IXsKxjcfKYsfMosrZEhsPMdMj7PW0F6y1jmBd3s14HKa2eG7bVBOSNgfllbKQVgRzUVG4) + +The `boundaries`: +```plantuml +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +enterprise(enterprise1, An enterprise) { + system_boundary(system1, A system) { + container_boundary(container1, A container) { + component(component1, A component) + } + } +} +@enduml +``` + +![boundaries](http://plantuml.com/plantuml/png/JOx13eCW38RlFWMxQJ8bItRQRK-o83QJf1HIIXQp-Ex3wNGzqFzl_myuERAO1yYCQXI9wQOrcrVtT3BcFYTW6qY0fBF1Q_617Uc8XYHxRD7rINkJ15ZRgmy3OEcjGUnYsLU50uxi4jI7l9pLdTJX6_MkLAaqbNlyem-P1iDJlVeblQr-mQMMNnb7m4T-7tsHtVrJA-bZeF9ylQiDs5opn-TgFUSF) + +The `relations`: +```plantuml +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +person(person1, A person) +system(system1, System1) +system(system2, System2) +system(system3, System3) +system(system4, System4) +system(system6, System6) +system(system5, System5) +person1 -l-> system1 +person1 -u-> system3: format_name(uses, HTTPS) +person1 -u-> system2: format_name(uses) +person1 -r-> system4: format_tech(HTTPS) +person1 -d-> system6: format_desc(uses, HTTPS) +person1 -d-> system5: format_desc(uses) +@enduml +``` + +![boundaries](http://plantuml.com/plantuml/png/TP0zYyCm38Rt_WhVba0JqtmD7GvkwrXezyDrr4j0jeCjSzo_FqDgjxZjz0ezZsJXZrbBz2DuYsmYMjoUSoj-wv-P9d_n3gmqca1JBOtYf8oTDLzGQF8AAvmlZYlX22oNdJ8ZOCXA8DPBu9i5h3EwM6EtPLziBSkD-mj3gbWZaDDQPA29eCb06q6RWIw2BWD314C6-WZwydRlZbLOVRBRRVUcJyrspwx6Aa7VMYWemZUvBJkSpyTJ-KfldlK7poQlInw1d8fyuPZ48OaZEFdc_RlUF-lbFm00) + +## System Context diagram + +```plantuml +@startuml +title +System Context diagram for Internet Banking System +endtitle +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml + +hide stereotype +LAYOUT_WITH_LEGEND + +person(customer, Personal Banking Customer, "A customer of the bank, with personal bank accounts.") +system(ebanking, Internet Banking System, "Allows customers to view information about their bank accounts, and make payments.") + +system_ext(email, 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.") + +customer --> ebanking: format_name("Views accounts balances, and make payments using") +ebanking --> mainframe: format_name("Gets accounts information from and makes payment using") +ebanking -> email: format_name("Sends e-mail using") +email -u-> customer: format_name("Sends e-mail to") + +@enduml +``` + +![System context diagram](http://plantuml.com/plantuml/png/VPDDRzim38Rl_XLSJXbWnvUTUXZGjK5NeDq69DkmKo3BT2nK4Ws9Mff_Fzg9xQxBUfBDZuTyNzbis6AsEKP61pVa6PyPQgFsGJbeAC2zX897Xa_AFnc_XrDjXhxceVUTyTgc6bEmq39tyQeiWpgizeRRLAM8GVTOpojDhcH7mVYoiyfpShQmfegbKu8CfVxWg4OhPw6iNNMIpxBMr0Xz6ecF7MOFrx--Vj_kVjvlF-yUrdVhBxTPrc68v9SwHIQ78OTlGq3PQUcRARMuXh4Eg05k4Iefok4W-q8tDlOnK5fJyXnNY_TP76GliJeHy_yPqq-mbWvn6XE12NuRF83nugXJRCY3gYXnFzw4luVbe7mDJZqXTEhey3p_lC1ExcU9JXcRmxheptdkLhIOOIiHy6Xqe4WDm_fPjyhl4V1KVmBDcWQaP7mZTuuvF8wF_ohRC0MC8BSpUgSb06TFBkYRFPZbSL0-AjrNHK3MWxhfJehY8umcNy69j_EopNBnGpoSGJ9LFYADbmo35ALTk2Dfm4uQNt7la5zWNufe0hc97aVy1Rhit7lx2hoHdoIEjazDmrkHf6SK_LORa_Jy0G00) + +## Container diagram + +```plantuml +@startuml +title +Container diagram for Internet Banking System +endtitle +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml + +hide stereotype +LAYOUT_WITH_LEGEND + +person(customer, Personal Banking Customer, "A customer of the bank, with personal bank accounts.") +system_ext(email, 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.") + +system_boundary(ebanking, Internet Banking System) { + container(web, 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 of the Internet banking functionality to customers via their web browser.") + container(mobile, Mobile App, Xamarin, "Provides a limited subset of the Internet banking functionality to customers via their mobile device.") + database(db, Database, Relational Database Schema, "Stores user registration information, hashed authentication credentials, access logs, etc.") + container(api, API Application, Java and Spring MVC, "Provides Internet banking functionalit via a JSON/HTTPS API.") +} + +customer --> web: format_name(Visits, HTTPS) +customer --> spa: format_name("Views accounts balances, and make payments using") +customer --> mobile: format_name("Views accounts balances, and make payments using") + +spa --> api: format_name(Makes API calls to, JSON/HTTPS) +mobile --> api: format_name(Makes API calls to, JSON/HTTPS) +api -l-> db: format_name(Reads from and writes to, JDBC) +api -u-> email: format_name(Sends e-mail using, SMTP) +api -> mainframe: format_name(Makes API calls to, XML/HTTPS) +email -u-> customer: format_name(Sends e-mails to) + +@enduml +``` + +![Container diagram](http://plantuml.com/plantuml/png/fLLDJnin4BtlhvXoIgGDkVJ4eL8QK04HYDWKw2cQzKuI2w-zihq9KTN_th7t0mAYhKeESMpFctdp_EnuwHKbKwCzIaqM2ebhYoMiZ8KBxSbgyl0LzQFKQyZspbEPa2vyX7sIMgYweDegs7XVkPFnsEBkU2tzfivhHrPmOjB-M9Xox4jZfHvN2hMlIpLICdVZ4Zcb7OlFfIb8yJX2fOuhta-IZIm8mZOPlwyekPhykFc-MDvVBCwNLsVVpgvFawGYwumUYDfvKv9DOHuNKFMaf_tMqGIwE30hy1k2d8DIs35Vg3fWM0CKmjJQk-EZOU9YsqjwyWCgKQeKpaPXRFNWn0jE9QDQZ9z9OOqpAmzdJsA3Uar0JNoJw5LAtj4hbfnIc7K_NodE5J9lB3bWSJhgWXSYrn37E6DBzD9emDpKlk_KzQsau2rgXo94EI0l0fEE2eDqWNO_e3Pd-jxv3-5d0lmHdMa6EyfJkASS9bMbf8WqKhZ4BGBg0hBA1lJiRigDd9AIsq0hzE0ynmfeNHA3mt9Vk6lFyPSYg92rnESQWVyX4rTX2baJFG_HRnXbmiggAJNHwrfXCCRScYsRxK3VDoHMjOxIeP9-3zwya7WhCM2a1PO2ScjsxFstx4gJInNEEOw1MmeFM2BBSq02b2obfm9SdJjcy256JL4eQ2i5TPmAz9YZeq719tVQJbAu9OLDmduHCh5XrpzRC5nhiBIMZkqK3VV2V2biq6sOETPSNVjMUX2MYZ15nJPaGv9peCoQ9wqD3uN2IgOmcL_yYw5wsVwiJrG4uJAxkHwVBnRpBEGFbNybIVygZ4PVmWcUGDFGKlDT7Dn99yFjYQZXOJ3xxJ3uw4xIxldECHL-xhZTD18lyJ6uU5zIsAk3hOzUPMoEw-D94wOM4xAMXzbc7E-YkeBjpXVHf2za6IQjOVuBom0OAKOMhqIy9ImShAmf8-UTPN-tyDElqnPOCp2-i8VOZFzmNFU6nlxuZiyMynR5cdNlvj_9FiokEgwnKbEqEu7twmRqCFaD) + +## Component diagram + +```plantuml +@startuml +title +Component diagram for Internet Banking System - API Application +endtitle +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml + +hide stereotype +LAYOUT_WITH_LEGEND + +system_ext(email, 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.") + +container(spa, Single Page Application, JavaScript and Angular, "Provides all of the Internet banking functionality to customers via their web browser.") +container(mobile, Mobile App, Xamarin, "Provides a limited subset of the Internet banking functionality to customers via their mobile device.") +database(db, Database, Relational Database Schema, "Stores user registration information, hashed authentication credentials, access logs, etc.") + +container_boundary(api, API Application) { + component(api_signin, Sign In Controller, Spring MVC Rest Controller, Allows users to sign in to the Internet Banking System.) + component(api_password, Reset Password Controller, Spring MVC Rest Controller, Allows users to reset their passwords with a single URL.) + component(api_summary, Account Summary Controller, Spring MVC Rest Controller, Provides customers with a summary of their bank accounts.) + component(api_security, Security Component, Spring Bean, "Provides functionality related to signing in, changing passwords, etc.") + component(api_email, E-mail Component, Spring Bean, "Sends e-mails to users.") + component(api_maiframe, Mainframe Banking System Facade, Spring Bean, "A facade onto the mainframe banking system.") +} + +spa --> api_signin: format_name(Makes API calls to, JSON/HTTPS) +spa --> api_password: format_name(Makes API calls to, JSON/HTTPS) +spa --> api_summary: format_name(Makes API calls to, JSON/HTTPS) + +mobile --> api_signin: format_name(Makes API calls to, JSON/HTTPS) +mobile --> api_password: format_name(Makes API calls to, JSON/HTTPS) +mobile --> api_summary: format_name(Makes API calls to, JSON/HTTPS) + +api_signin --> api_security: format_name(Uses) +api_password --> api_security: format_name(Uses) +api_password --> api_email: format_name(Uses) +api_summary --> api_maiframe: format_name(Uses) + +api_maiframe --> mainframe: format_name(Uses, XML/HTTPS) +api_email --> email: format_name(Sends e-mail using) +api_security --> db: format_name(Reads from and writes to, JDBC) + +@enduml +``` + +![Component diagram](http://plantuml.com/plantuml/png/fLLBZzis4BxhLqnpiW7PlkIKGm3leyqMwyHOUTlaP8oeiKs48WMIMiSe-jyxf1wsl0wIEhvGbERnpNpVZBtqYf9RKrP6a_PGIDnQB65ZB3neJrQJXnlKNwNUGdPmdagOm7pv0FEgKbAWbqOdf0iV0_qcjL1rGRLLiFE-SkzcCulxwLRwNPtNZgmm75NxgJ3bp9V6IZsh56fVbsgYPEvc9N8IEnDlIrEGudE2Iaqh_fuaEraGXCza_A6Yv77-vTFpQlttm-h3-l7-Z_kFTqdY8iWrVVCZAb6g5EuduMpHf_1cjIEGiJPKi9326cSs7kw_YHtgBG4rzasWwPlnQKZ-eZVS84fXqJsUzOSpPDvOSi30mMp0Spx1Bo1lxTZFs3As3Z0tjGTHEszAikmZXAcrTobuYzgX25OEo8k090djuxnaHwx2538EfmYMoB1F24dXJtp1J5XPUK1Tm5nlQuMMeIsjUU4k3i3rH7S0DxMEUL59Vm1lJl2zI0m-qiAUSiYjsJEf0TeHMMbogKA3uXbmfV0PIsIk1m10oL9wAi3LkUFiluIcIGe5lKX10K-17dDqD2ho5ExQImfFfB09rh-4JEnOAaVUWax1qbOwvY2oTC9O2ZjqEqQDDMVMlcqv24j5kA9YxfX5SWwKsVBb5NThvbmNQ0yZh6HwFarZ-2S1_ebkA8FLsicj3ltB-EGMmIq7iqOfObApoeO-BVwwvVAS7toRAyKKnP9Sw5s8m-M4nq6pXngUZYz0gD2vlR55Q6BWQzdUhyPYOvY6lowuWptl2XQ7QwJz_FHu4OohIrRKWOCs0mDPy-AdmVGwFAgfozn6QlJ8s88G-y6yZ8P4RLcTdB9zWdwdzZ1k20S3CDIr3S9aMRKSDNiYXRYJmgLlK2-erp262--x23BUrwvTSv68oCZba6ppWtq7lwF0WiwJp64JtmFtlD5QlplxoJwks7zvSLS8aybxEAhz7JHJjzRiD5hWLsvQ61R1kolWvZMNVVeu-x1QBRFnmBzhrlKHMX7ylm19kuL-fOop4DTLSexZgcAE5Hm3jUeUHdfsvCR9AThh7QA4lsVTJMPdt8dpadroQX0zUlszDkS_gCLZLtWF8tfT07GwFpmxhEGMNZVxmQ_8XqvFXEoqiQQC_yXxDgIswNStj-FaFm00) diff --git a/c4model/c4-all.puml b/c4model/c4-all.puml new file mode 100644 index 00000000000..a4164cbd835 --- /dev/null +++ b/c4model/c4-all.puml @@ -0,0 +1,10 @@ +' remote inclusions +!define C4_LIB_BASE_URL https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model +!includeurl C4_LIB_BASE_URL/c4-macros.puml +!includeurl C4_LIB_BASE_URL/c4-constants.puml +!includeurl C4_LIB_BASE_URL/c4-styles.puml + +' local inclusions +'!include c4-macros.puml +'!include c4-constants.puml +'!include c4-styles.puml diff --git a/c4model/c4-constants.puml b/c4model/c4-constants.puml new file mode 100644 index 00000000000..d8afa3e1496 --- /dev/null +++ b/c4model/c4-constants.puml @@ -0,0 +1,27 @@ +!define TITLE_FONT_SIZE 12 +!define TECH_FONT_SIZE 11 +!define DESC_FONT_SIZE 12 + +!define ARROW_COLOR #747A80 +!define ELEMENT_COLOR_TEXT White + +!define BOUNDARY_COLOR_TEXT #46494D +!define BOUNDARY_COLOR_BORDER #46494D + +!define PERSON_COLOR_BG #08427B +!define PERSON_COLOR_BORDER #05284A + +!define SYSTEM_COLOR_BG #396895 +!define SYSTEM_COLOR_BORDER #223E59 + +!define CONTAINER_COLOR_BG #6B8EB0 +!define CONTAINER_COLOR_BORDER #40556A + +!define COMPONENT_COLOR_BG #9CB3CA +!define COMPONENT_COLOR_BORDER #5E6B79 + +!define PERSON_EXT_COLOR_BG #747A80 +!define PERSON_EXT_COLOR_BORDER #46494D + +!define SYSTEM_EXT_COLOR_BG #747A80 +!define SYSTEM_EXT_COLOR_BORDER #46494D diff --git a/c4model/c4-macros.puml b/c4model/c4-macros.puml new file mode 100644 index 00000000000..0ce1d42eb1d --- /dev/null +++ b/c4model/c4-macros.puml @@ -0,0 +1,46 @@ + +!define format_tech(iTech) [iTech] +!define format_name(iName) iName +!define format_name(iName, iTech) format_name(iName)\n format_tech(iTech) +!define format_desc(iDesc) iDesc +!define format_desc(iDesc, iTech) iDesc\n format_tech(iTech) + +!define item(iShape, iId, iName, iStereotype) iShape "format_name(iName)" as iId <> +!define item(iShape, iId, iName, iDesc, iType, iStereotype) iShape "format_name(iName, iType)\n\n format_desc(iDesc)" as iId <> +!define item_t(iShape, iId, iName, iType, iStereotype) iShape "format_name(iName, iType)" as iId <> +!define item_d(iShape, iId, iName, iDesc, iStereotype) iShape "format_name(iName)\n\n format_desc(iDesc)" as iId <> + +!define box(iId, iName, iStereotype) item(rectangle, iId, iName, iStereotype) +!define box(iId, iName, iDesc, iType, iStereotype) item(rectangle, iId, iName, iDesc, iType, iStereotype) +!define box_t(iId, iName, iType, iStereotype) item_t(rectangle, iId, iName, iType, iStereotype) +!define box_d(iId, iName, iDesc, iStereotype) item_d(rectangle, iId, iName, iDesc, iStereotype) + +!define person(iId, iName) item_t(rectangle, iId, iName, Person, Person) +!define person(iId, iName, iDesc) item(rectangle, iId, iName, iDesc, Person, Person) +!define person_ext(iId, iName) item_t(rectangle, iId, iName, Person, ExternalPerson) +!define person_ext(iId, iName, iDesc) item(rectangle, iId, iName, iDesc, Person, ExternalPerson) + +!define system(iId, iName) item_t(rectangle, iId, iName, Software System, System) +!define system(iId, iName, iDesc) item(rectangle, iId, iName, iDesc, Software System, System) +!define system_ext(iId, iName) item_t(rectangle, iId, iName, Software System, ExternalSystem) +!define system_ext(iId, iName, iDesc) item(rectangle, iId, iName, iDesc, Software System, ExternalSystem) +!define system_boundary(iId, iName) item_t(rectangle, iId, iName, System, Boundary) + +!define container(iId, iName) item_t(rectangle, iId, iName, Container, Container) +!define container(iId, iName, iTech, iDesc) item(rectangle, iId, iName, iDesc, "Container: iTech", Container) +!define container_t(iId, iName, iTech) item_t(rectangle, iId, iName, "Container: iTech", Container) +!define container_d(iId, iName, iDesc) item(rectangle, iId, iName, iDesc, Container, Container) +!define container_boundary(iId, iName) item_t(rectangle, iId, iName, "Container", Boundary) +!define container_boundary(iId, iName, iTech) item_t(rectangle, iId, iName, "Container: iTech", Boundary) + +!define database(iId, iName) item_t(database, iId, iName, Container, Container) +!define database(iId, iName, iTech, iDesc) item(database, iId, iName, iDesc, "Container: iTech", Container) +!define database_t(iId, iName, iTech) item_t(database, iId, iName, "Container: iTech", Container) +!define database_d(iId, iName, iDesc) item(database, iId, iName, iDesc, Container, Container) + +!define component(iId, iName) item_t(rectangle, iId, iName, Component, Component) +!define component(iId, iName, iTech, iDesc) item(rectangle, iId, iName, iDesc, "Component: iTech", Component) +!define component_t(iId, iName, iTech) item_t(rectangle, iId, iName, "Component: iTech", Component) +!define component_d(iId, iName, iDesc) item(rectangle, iId, iName, iDesc, Component, Component) + +!define enterprise(iId, iName) item_t(rectangle, iId, iName, Enterprise, Boundary) diff --git a/c4model/c4-styles.puml b/c4model/c4-styles.puml new file mode 100644 index 00000000000..b4c1d4bc35a --- /dev/null +++ b/c4model/c4-styles.puml @@ -0,0 +1,94 @@ +' LAYOUT +!definelong LAYOUT_WITH_LEGEND +legend right +|= |= Type | +| | external person | +| | external system | +| | person | +| | system | +| | container | +| | component | +endlegend +!enddefinelong + +' DEFAULT STYLES +skinparam defaultTextAlignment center +skinparam wrapWidth 200 +skinparam maxMessageSize 150 + +' ELEMENT STYLES +skinparam Arrow { + Color ARROW_COLOR + FontColor ARROW_COLOR + FontSize DESC_FONT_SIZE +} + +skinparam rectangle { + StereotypeFontSize TECH_FONT_SIZE + shadowing false +} + +skinparam database { + StereotypeFontSize TECH_FONT_SIZE + shadowing false +} + +skinparam rectangle<> { + StereotypeFontColor BOUNDARY_COLOR_BORDER + FontColor BOUNDARY_COLOR_BORDER + FontStyle none + BorderColor BOUNDARY_COLOR_BORDER + BorderStyle dashed + BackgroundColor transparent +} + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_COLOR_TEXT + FontColor ELEMENT_COLOR_TEXT + BorderColor PERSON_COLOR_BORDER + BackgroundColor PERSON_COLOR_BG + roundCorner 40 +} + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_COLOR_TEXT + FontColor ELEMENT_COLOR_TEXT + BorderColor PERSON_EXT_COLOR_BORDER + BackgroundColor PERSON_EXT_COLOR_BG + roundCorner 40 +} + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_COLOR_TEXT + FontColor ELEMENT_COLOR_TEXT + BorderColor SYSTEM_COLOR_BORDER + BackgroundColor SYSTEM_COLOR_BG +} + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_COLOR_TEXT + FontColor ELEMENT_COLOR_TEXT + BorderColor SYSTEM_EXT_COLOR_BORDER + BackgroundColor SYSTEM_EXT_COLOR_BG +} + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_COLOR_TEXT + FontColor ELEMENT_COLOR_TEXT + BorderColor CONTAINER_COLOR_BORDER + BackgroundColor CONTAINER_COLOR_BG +} + +skinparam database<> { + StereotypeFontColor ELEMENT_COLOR_TEXT + FontColor ELEMENT_COLOR_TEXT + BorderColor CONTAINER_COLOR_BORDER + BackgroundColor CONTAINER_COLOR_BG +} + +skinparam rectangle<> { + StereotypeFontColor ELEMENT_COLOR_TEXT + FontColor ELEMENT_COLOR_TEXT + BorderColor COMPONENT_COLOR_BORDER + BackgroundColor COMPONENT_COLOR_BG +} diff --git a/c4model/example-all.puml b/c4model/example-all.puml new file mode 100644 index 00000000000..d10b1bc7776 --- /dev/null +++ b/c4model/example-all.puml @@ -0,0 +1,55 @@ +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +'!include c4-all.puml + +hide stereotype +LAYOUT_WITH_LEGEND + +person(person1, Internal Person1) +person(person2, Internal Person2, A person consuming services from other systems.) +person_ext(person3, External Person3) +person_ext(person4, External Person3, A person consuming services from other systems.) +enterprise(toto, Toto) { +system(system1, Internal System1) +system(system2, Internal System2, A system providing support to other systems.) +system_ext(system3, External System3) +system_ext(system4, External System3, A system providing support to other systems.) +system_boundary(system5, "The system") { + container_t(container1, Container1, jaxrs) + container_d(container2, Container2, A container doing something.) + container(container3, Container3, java, A container doing something.) + container(container4, Container4) + container_boundary(container5, Container5, java) { + component_t(component1, Component1, controller) + component_d(component2, Component2, A component computing data.) + component(component3, Component3, java, Another component computing data.) + component(component4, Component4) + } + + database_t(database1, Database1, MariaDB) + database_d(database2, Database2, A database to store data.) + database(database3, Database3, MySQL, Another database.) + database(database4, Database4) +} +} + +person1 --> system1 +person2 --> system2: format_name(HTTP, uses) +person3 --> system3: format_tech(HTTP) +person4 --> system4: format_name(uses) + +system1 --> container1 +system2 --> container2 +system3 --> container3 +system4 --> container4 + +container1 --> database1 +container2 --> database2 +container3 --> database3 +container4 --> database4 + +component1 -> component2 +component2 -> component3 +component3 -> component4 + +@enduml \ No newline at end of file diff --git a/c4model/example-simple.puml b/c4model/example-simple.puml new file mode 100644 index 00000000000..7af4daf915e --- /dev/null +++ b/c4model/example-simple.puml @@ -0,0 +1,35 @@ +@startuml +!includeurl https://raw.githubusercontent.com/tmorin/plantuml-libs/master/c4model/c4-all.puml +'!include c4-all.puml + +LAYOUT_WITH_LEGEND +hide stereotype + +person(person1, A person, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.") +person_ext(person_ext1, An external person, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.") + +enterprise(enterprise1, An enterprise) + +enterprise(enterprise2, Another enterprise) { + system(system1, A system, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.") + system_ext(system_ext1, An external system, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.") +} + +system_boundary(system2, "A system boundary") { + container(container1, A container, Java, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.") + database(database1, An external system, Mysql, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.") + container_boundary(container2, "A container", "Java") { + component(component1, "A component", "controller", "Lorem ipsum dolor sit amet, consectetur adipiscing elit.") + } +} + +enterprise1 --> person1: format_name(A text, HTTP) +enterprise1 --> person_ext1: format_name(Another text, HTTP) + +person1 --> system1 +person_ext1 --> system_ext1 + +system1 --> container1 +system_ext1 --> database1 + +@enduml \ No newline at end of file