|
|
[![release][Release Badge]][Release Page]
|
|
|
[![license MIT][License Badge]][License Page]
|
|
|
|
|
|
[![integrated in PlantUML][Integrated Badge]][Integrated Page]
|
|
|
|
|
|
[![commits since][Commits Since Badge]][Commit Page]
|
|
|
|
|
|
[Release Badge]: https://img.shields.io/badge/release-v2.13.0-blue
|
|
|
[Release Page]: https://github.com/plantuml-stdlib/C4-PlantUML/releases/v2.13.0
|
|
|
[License Badge]: https://img.shields.io/github/license/plantuml-stdlib/C4-PlantUML
|
|
|
[License Page]: https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LICENSE
|
|
|
[Integrated Badge]: https://img.shields.io/badge/C4--PlantUML%20%20v2.13.0%20integrated%20in%20PlantUML%20Standard%20Library-V1.2026.1-orange
|
|
|
[Integrated Page]: https://plantuml.com/stdlib#062f75176513a666
|
|
|
|
|
|
[Commits Since Badge]: https://img.shields.io/github/commits-since/plantuml-stdlib/C4-PlantUML/latest?label=new%20unreleased%20changes%20in%20master%20branch
|
|
|
[Commit Page]: https://github.com/plantuml-stdlib/C4-PlantUML/commits
|
|
|
|
|
|
# C4-PlantUML (v2.13.0)
|
|
|
|
|
|
[comment]: # ("image is based on percy/C4_Container Diagram Sample - bigbankplc-styles.puml with NEW_C4_STYLE")
|
|
|
[](https://www.plantuml.com/plantuml/uml/hLRRRkCs47tNLqoqALP65RjfiYy53AnZgzqiV6laRDedBoMDRM8bKajITeoY_zwXRhQIHGkqpOCZ3Zbp3eTdXdol3LEco5BdBR3Oy3qpg47W0SQte8ycHUTY7ZojnxVhSFNxD1XUEyu55t5Q90WxOtBzqs2WsA6_vMPNH8L65KjXK9X-BBD1dZ9XerzfawGy6enlhvRMz3YR3lO_zgzl-Z-GRJqc5yO5gdvkgJZXXyNJUXayX8lvUl6ucjxF0wz735Tigq4NUIwL0I51vomckbo0sI48bY5u4TEOWAnCXKXGfLnmiGLjKA4qnnor3uSTZtUGIF7Mj07hQ4mSCwcmrmT2lD-qPeMWy6k152Tf85FSeaZy-ZyOV3Pme4nKJh1Z6eo422713UqlSKP94gIOKNveBvuRiVWBERRxTtsutD1WB5EfXfV1D9W5yzNwvmNzZ1VJnGFDHzjgrdrpS_DkCdfdVVIEvJWC-7PdGfvW4jgnrwEPYjcAY0qRD8WREF3Gke2sFZstP-azO5fIO_eeOXlRRghcCtfue8FfiA7aOcVsV28qnnI74wPtc4nfxFKw41PXy3_YI6DEECx5fU6aNnY2s-ON4iwsYcMmaGhkIQTAe84x9hvOXOH7EjiClF84FrlTk_0zkElozrG1dtkkKuMk41ndYKfBuSM5DZ93vSEu_N97q9X1RahHH0JdLpB9IqUMbZOgm5WMmcWw2AVYihuZGyBKqOklATPBncuF_d20_jeDUWUCrYpFQV4JHZ3AyvJ7p70fACNkHxPdFeIvihkTVHfRsmHJlYSQ9JNg1eR7K9SmbK9IcblSgCdKSaGakyWaUGeNqdIALqksHOlUe8QnuhdnOIIsHSgipjsbadlI7LLMcduRPLE8s59dAJT7MqXD9ZNiERC-N05j628b3zHvNb7APCHJhFCnAmSDgV4R7tvZ6QDKTCb0oZDkIrmNaIOozQ7zEt8L0Qh-FO_n9Rr9v2NCCDkmx3dKdvPD-EiKEcD33Kc3xQxKWxPS6rMUARKX4d9MVlkssr2T0Ij8MB72X4wGivIQ7UaAjOPKRcc09kw_IbJT6IXJt4fsUVzjvKmaBLDmtgvEcVk73DcaKE2oqgcD3r_tlfxpPwlxuDbuc36UhdLf8A3WQaRZkaWjyegEXPUWL40p7YkfvSP0y1plc23vLPuKzYncpUqKbMAAZR8tHxSBdANTwhDMGKo6TdzdoGSMoSAS9E2tjUm3dPNGhCp4AVqEzS2pVd6gsaUDsc9_MAsM8ItihgjgxE_NT4HVBgtWrdFRx2DvrYEgS4q7g2ELnguW6i2oL_lmaUxbGGNUdcRLngi8vmp-Iw3r7JcVQ9-AfHlq0LcYOQDaLZQiW-Bs3MEa1Qfn9dVZ9WisvbcsNeWifB0QyCfQonWd8Y_qsENGzIkqRSujV3XRBUj0xMOwxgzKsUJfT4DIjw8tqujSdLsWlVhLD0r-2UOJUYrjf3JsmgF7cQWkc-Rb1Vi-V6SFd1JfzSgSdRtBxEpuzbCpxRmdblGe-mi=)
|
|
|
|
|
|
C4-PlantUML combines the benefits of [PlantUML](https://plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicating 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.
|
|
|
|
|
|
- [📄 C4-PlantUML](#c4-plantuml)
|
|
|
- [Getting Started](#getting-started)
|
|
|
- [Including the C4-PlantUML library](#including-the-c4-plantuml-library)
|
|
|
- [Now let's create a C4 Container diagram](#now-lets-create-a-c4-container-diagram)
|
|
|
- [Supported Diagram Types](#supported-diagram-types)
|
|
|
- [System Context \& System Landscape diagrams](#system-context--system-landscape-diagrams)
|
|
|
- [Container diagram](#container-diagram)
|
|
|
- [Component diagram](#component-diagram)
|
|
|
- [Dynamic diagram](#dynamic-diagram)
|
|
|
- [Deployment diagram](#deployment-diagram)
|
|
|
- [(C4 styled) Sequence diagram](#c4-styled-sequence-diagram)
|
|
|
- [Samples](#samples)
|
|
|
- [Relationship Types](#relationship-types)
|
|
|
- [Layout (arrange) elements (without relationships)](#layout-arrange-elements-without-relationships)
|
|
|
- [Compatibility mode `NO_LAY_ROTATE=1`](#compatibility-mode-no_lay_rotate1)
|
|
|
- [Global Layout Options](#global-layout-options)
|
|
|
- [Sprites and other images](#sprites-and-other-images)
|
|
|
- [Custom tags/stereotypes support and skinparam updates](#custom-tagsstereotypes-support-and-skinparam-updates)
|
|
|
- [Element specific tag definitions](#element-specific-tag-definitions)
|
|
|
- [Boundary specific tag definitions](#boundary-specific-tag-definitions)
|
|
|
- [Define a new legend title](#define-a-new-legend-title)
|
|
|
- [Comments](#comments)
|
|
|
- [Sample with different tag combinations](#sample-with-different-tag-combinations)
|
|
|
- [Sample with tag dependent sprites and custom legend text](#sample-with-tag-dependent-sprites-and-custom-legend-text)
|
|
|
- [Sample with different boundary tag combinations](#sample-with-different-boundary-tag-combinations)
|
|
|
- [Custom schema definitions (via UpdateElementStyle())](#custom-schema-definitions-via-updateelementstyle)
|
|
|
- [Element and Relationship properties](#element-and-relationship-properties)
|
|
|
- [Version information](#version-information)
|
|
|
- [Snippets for Visual Studio Code](#snippets-for-visual-studio-code)
|
|
|
- [Live Templates for IntelliJ](#live-templates-for-intellij)
|
|
|
- [Prerequisites](#prerequisites)
|
|
|
- [Install](#install)
|
|
|
- [Usage](#usage)
|
|
|
- [Advanced Samples](#advanced-samples)
|
|
|
- [techtribes.js](#techtribesjs)
|
|
|
- [Message Bus and Microservices](#message-bus-and-microservices)
|
|
|
- [(C4 styled) Sequence diagram sample](#c4-styled-sequence-diagram-sample)
|
|
|
- [Background](#background)
|
|
|
- [License](#license)
|
|
|
- [📄 Layout Options](LayoutOptions.md#layout-options)
|
|
|
- [📄 Themes (different styles and languages)](Themes.md#themes)
|
|
|
- samples
|
|
|
- [📄 C4 Model Diagrams](samples/C4CoreDiagrams.md#c4-model-diagrams)
|
|
|
|
|
|
> [!IMPORTANT]
|
|
|
> **PlantUML v2.12.0:** Layout could be changed based on bugfix.
|
|
|
If `LAYOUT_LANDSCAPE()` is combined with `Lay_*()` calls then the elements are correct positioned based on the new implementation.
|
|
|
The old implementation swapped up<->left and down<->right (details see [issue 376](https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)).
|
|
|
The old behavior can be re-activated with `!NO_LAY_ROTATE=1`. Details see [Compatibility mode `NO_LAY_ROTATE=1`](#compatibility-mode-no_lay_rotate1).
|
|
|
|
|
|
## Getting Started
|
|
|
|
|
|
### Including the C4-PlantUML library
|
|
|
|
|
|
At the top of your C4 PlantUML `.puml` file, you need to include the `C4_Context.puml`, `C4_Container.puml` or `C4_Component.puml` file found in the `root` of this repo.
|
|
|
|
|
|
To be independent of any Internet connectivity, you can download the files found in the `root` and make use of them by supplying the command line argument `-DRELATIVE_INCLUDE="."` to PlantUML:
|
|
|
|
|
|
```bash
|
|
|
java -jar plantuml.jar -DRELATIVE_INCLUDE="." ...
|
|
|
```
|
|
|
|
|
|
> For Visual Studio Code, add the following to your settings.json:
|
|
|
>
|
|
|
> ```json
|
|
|
> "plantuml.jarArgs": [
|
|
|
> "-DRELATIVE_INCLUDE=."
|
|
|
> ]
|
|
|
> ```
|
|
|
|
|
|
If you want to use the always up-to-date version of the C4-PlantUML library in this repo (which obviously requires an Internet connection every time you render a document), use the following:
|
|
|
|
|
|
[comment]: # ("!include followed with 2 spaces that it is not replaced during release based branch updates")
|
|
|
```plantuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
|
|
|
```
|
|
|
|
|
|
If you don't need the up-to-date version, PlantUML includes the last released `C4_...` files as [standard library C4](https://plantuml.com/stdlib#062f75176513a666) \(no additional files or Internet is required). You can use it with following:
|
|
|
|
|
|
```plantuml
|
|
|
!include <C4/C4_Container>
|
|
|
```
|
|
|
|
|
|
### Now let's create a C4 Container diagram
|
|
|
|
|
|
\(If you don't want run PlantUML locally you can use e.g. the [PlantUML Web Server](https://www.plantuml.com/plantuml/uml/ZKzDQy904BtlhqXpYb1thUt9aw97HQdsN3QRmInCPfUTYUA_DmaeIcdfwRrvy3vcpcAJj0sg5qyEsmgoMYJop9Xap_hefMxBbY6vG08aseN6HBJKUyOi5VhIB3_6krxwsgpDQQhVtlMaqxwNdSLwWgHZNw1sa3XG4GTOeBVyckLhMmBc7Tb6yO4iPYjWb_nmvIDr3odSZVsm7i3L530SBty4xIyiq1Gym7_RrIVWy-3VLzmZ7kQCr1oewhw_0W==) too.)
|
|
|
|
|
|
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`
|
|
|
|
|
|
```plantuml
|
|
|
@startuml C4_Elements
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
Person(personAlias, "Label", "Optional Description")
|
|
|
Container(containerAlias, "Label", "Technology", "Optional Description")
|
|
|
System(systemAlias, "Label", "Optional Description")
|
|
|
|
|
|
Rel(personAlias, containerAlias, "Label", "Optional Technology")
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/ZKzDQy904BtlhqXpYb1thUt9aw97HQdsN3QRmInCPfUTYUA_DmaeIcdfwRrvy3vcpcAJj0sg5qyEsmgoMYJop9Xap_hefMxBbY6vG08aseN6HBJKUyOi5VhIB3_6krxwsgpDQQhVtlMaqxwNdSLwWgHZNw1sa3XG4GTOeBVyckLhMmBc7Tb6yO4iPYjWb_nmvIDr3odSZVsm7i3L530SBty4xIyiq1Gym7_RrIVWy-3VLzmZ7kQCr1oewhw_0W==)
|
|
|
|
|
|
In addition to this, it is also possible to define a system or component boundary.
|
|
|
|
|
|
Take a look at the following sample of a C4 Container Diagram:
|
|
|
|
|
|
```plantuml
|
|
|
@startuml Basic Sample
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
Person(admin, "Administrator")
|
|
|
System_Boundary(c1, "Sample System") {
|
|
|
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
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/JL1DIyD04BtdLupnaaARMFNagJ687gm4a-gnR9BHBkmNknD34V-xixIsxkN1l8zviwj0mjEeLN8XJQ_60M57vC9TKNWnvP-ITcCt1lIzDOI6yjxgmYbXecSHQ52oAwhRHHr7c_LpyNMTBs_oAvvjAxO8QT3dBYv8QlJ1camCMfevf6L46SWBiZwT9Sq-4EhjlHtD8Fm-wvSiQeHs2k70fJFuJe3VAJcRiDiAvrZvZXsKpYdP2vBMf3ogBkTGDdN-yj2onIDmDrY_LP4hbR9JW7XQ0BB0Tpd14Zqgad5bEqaYz41Ie-9TWIl-74jcT20vvoXZCdb5zNVSkTOci9FngMthXbLHT6BFCOz8N6F221_Uwl-M5Pg1F_0N)
|
|
|
|
|
|
Entities can also be decorated with icons/sprites using the $sprite parameter, for example:
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
|
|
|
!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
|
|
|
!include DEVICONS/angular.puml
|
|
|
!include DEVICONS/java.puml
|
|
|
!include DEVICONS/msql_server.puml
|
|
|
!include FONTAWESOME/users.puml
|
|
|
|
|
|
LAYOUT_WITH_LEGEND()
|
|
|
|
|
|
Person(user, "Customer", "People that need products", $sprite="users")
|
|
|
Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular")
|
|
|
Container(api, "API", "java", "Handles all business logic", $sprite="java")
|
|
|
ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server")
|
|
|
|
|
|
Rel(user, spa, "Uses", "https")
|
|
|
Rel(spa, api, "Uses", "https")
|
|
|
Rel_R(api, db, "Reads/Writes")
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/hL9DZzCm4BtdLtWZ3brfcm0BbvMGjceBMwbVz8EAKpMDfwsHOmUFa_vznacw6oqWSU0KPzxCU_EU_KWUd2zp7Tqea-bIeZXxNz13cZgu92Vbp-MX97IPDHwDJpARfuK64sRwvALMXtJueRyCfUricbRlatVtoLkkxOSy0igWIueW4Dr8FFAl68s_JOQB-VeVb7nPW7JtBugAqVwHE_fKEEMHqXp8eqibLW6ZPvNFY_bci1kl5xFnVnMgQt11iZdsFxx4TdMLWZcL6bhJlyC_e8A_OJdzr7lUhCBNunqtQTYTsaodW--BxMQ_csoUzjFnb_5yrBkDeYKtMDCBZNSY7fRaULaNytc9jj0e_1cyC8XI5CxAClF4u9l6wQUu5eXle-SBx541FBnU3W97Qp0SDsSKERS8nL6w8sGjjUTwries6B26k73sNQ4hKrSA2iN4W-Kay8UmmlS9ZDH80hGMV7VSI2IqFQciIrTtTxX6XvuyyFG8F1o0C33DLEOisQCNww_JcjfgITSOxeHrabTcELwxieeDANEqBWUlhEcATUwADQCLwZRl9gijOSWqhfyUDmIyHXf_Vu3tgyPxlV8AGLAwgryUmuze9D_tBm==)
|
|
|
|
|
|
Similar to icons/sprites is it possible to add links to all elements and relationships:
|
|
|
|
|
|
```plantuml
|
|
|
@startuml Basic Sample
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
Person(admin, "Administrator", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
|
|
|
System_Boundary(c1, "Sample System", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
|
|
|
Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", $descr="Allows users to compare multiple Twitter timelines", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
|
|
|
}
|
|
|
System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML")
|
|
|
|
|
|
Rel(admin, web_app, "Uses", "HTTPS", $link="https://plantuml.com/link")
|
|
|
Rel(web_app, twitter, "Gets tweets from", "HTTPS", $link="https://plantuml.com/link")
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
> `png` itself supports no links, therefore the following image is generated as `svg` image.
|
|
|
> Github does not support `svg` links in README.md.
|
|
|
> If you click on the image a new window is opened and there you can use the links.
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/jP9VIyCm5CNV-obYviE4hNNJ9s7W7A8FcmutzR6axTK5yu_arZB4x-xDkZd41r6m3msSv9xposdF0mgFjLR9WJIbgYjWAqGNphBCYoPzbhYgYpg0Bwr1C9YMLcTE2HDd-W4h9OjiSjgVH-b-DirUX-dW93qcBP_GY906VEfYG3877wpfYafBqsDy75SPq0kqdlVOON1U8eousvmRHab9ypBYEwAMvaU4GjaYqo8W-6mgrhR6MuVIcf3gghEI5UHjGju6zgtlXvLjlghjcnybYpKPwVp2rgOIVjqj1yI-4DefOEtUNq7v4NjB63sVHNKRA7BX72KyGi76pYbPYiXE6NpIwR7nOfxUN2vfn0EZgjdiOHBpAmYb7_6nKhO9B7wmmD0o8d22JkfQeOp4oqOYzS9GQY1c2F_ICjNslYskYsqYyM-p_rvNajo1slq_-whkm-OQ_7gvd2--k-yiD_vnYuoYpwV1dl0Aa6fh82vFtkfVkfw3gKZw00==)
|
|
|
|
|
|
Elements and relationships can be decorated with tags and explained via a calculated legend, for example:
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
AddElementTag("v1.0", $borderColor="#d73027")
|
|
|
AddElementTag("v1.1", $fontColor="#d73027")
|
|
|
AddElementTag("backup", $fontColor="orange")
|
|
|
|
|
|
AddRelTag("backup", $textColor="orange", $lineColor="orange", $lineStyle = DashedLine())
|
|
|
|
|
|
Person(user, "Customer", "People that need products")
|
|
|
Person(admin, "Administrator", "People that administrates the products via the new v1.1 components", $tags="v1.1")
|
|
|
Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0")
|
|
|
Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1")
|
|
|
Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0+v1.1")
|
|
|
ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information")
|
|
|
Container(archive, "Archive", "Audit logging", "Stores 5 years", $tags="backup")
|
|
|
|
|
|
Rel(user, spa, "Uses", "https")
|
|
|
Rel(spa, api, "Uses", "https")
|
|
|
Rel_R(api, db, "Reads/Writes")
|
|
|
Rel(admin, spaAdmin, "Uses", "https")
|
|
|
Rel(spaAdmin, api, "Uses", "https")
|
|
|
Rel_L(api, archive, "Writes", "messages", $tags="backup")
|
|
|
|
|
|
SHOW_LEGEND()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/bLHTRzf047pdLrpTFXYLs92aYbG9AGXGKucq11Bb4QrzYxdsV6VTdKtpxxjdcuzGqgfFjdPdTtPsnxwr3emhSzbv9rGgIuviurnXFyUnWMsK2RSfazAYIRLog5oKwZmk92XVSs4TboA9nzSNSnzwkf_5rMKqk8hw55kDgGI4GXCLdg0pudmgCQSkZv25GJM8-a6FVKYquMZ6Mcep3Dxpcwl-vKtGFOCUUFIQcluBcq3wionEqDg0of307hr0UO9q-Ei4IK59qvyDBjsBH3Pa4x0Rv3EAX5tgF4TZjGhzldei69VMwHmD5GLpr0LLk0qufX0vAupcPUei3THM0S-58kZ8FuLr1fp-enOEIRGKmdqZLWce0mgtp6-BqQaAhMWfjXO8cHqsQ-nszgS9RG54iPoFF1D9B2NKf8_KAIS84tHtiuQq7S0pfAsm9WUUV4j6gIVONNLFrp-b6nthPEUPuNW7_pl2RW5_KGs5y1FClth27r21Vzw1ufAs2b8oyZm1hMLIPo9beVyueiDgoIoehD3ATb-B_NXADKb2db3p2JX8m7e71VSYDThgjMFBXrdDh2MtkqlsMFr1C9g6r5LQa6wXrjhau8ZnjGwJRaI5NalpvhkDIYwS7pmJAlE19IsHT7rYBmZco0oj-ycuz3sqhctyy6JHuuBwNq00dwyppUBEf5UBPgcrs0K2j_6p4MJIjhfrzz7zt-1eqsyJpHgYW_IMXzvokXXaU5RYykxxyses_JBzDWcxdLjKd7vAlm4=)
|
|
|
|
|
|
## Supported Diagram Types
|
|
|
|
|
|
> - `arg`: argument required (e.g. `alias`)
|
|
|
> - `?arg`: argument optional (e.g. `?tags`); an optional argument can be directly set via its keyword `$arg=...` (e.g. `$tags="specificTag"`) without the other optional arguments
|
|
|
|
|
|
### System Context & System Landscape diagrams
|
|
|
|
|
|
- Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Context.puml`
|
|
|
- Macros:
|
|
|
- `Person(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)`
|
|
|
- `Person_Ext(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)`
|
|
|
- `System(alias, label, ?descr, ?sprite, ?tags, ?link, ?type, ?baseShape)`
|
|
|
- `SystemDb(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)`
|
|
|
- `SystemQueue(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)`
|
|
|
- `System_Ext(alias, label, ?descr, ?sprite, ?tags, ?link, ?type, ?baseShape)`
|
|
|
- `SystemDb_Ext(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)`
|
|
|
- `SystemQueue_Ext(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)`
|
|
|
- `Boundary(alias, label, ?type, ?tags, ?link, ?descr)`
|
|
|
- `Enterprise_Boundary(alias, label, ?tags, ?link, ?descr)`
|
|
|
- `System_Boundary(alias, label, ?tags, ?link, ?descr)`
|
|
|
- Sprites:
|
|
|
- `person`
|
|
|
- `person2`
|
|
|
- `robot`
|
|
|
- `robot2`
|
|
|
|
|
|
- C4 Model extension: Person() and System() support `$type` argument too. Is uses the same notation as `$techn`, e.g. `$type="characteristic A"` is displayed as `[characteristic A]`
|
|
|
|
|
|
### Container diagram
|
|
|
|
|
|
- Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml`
|
|
|
- Additional Macros (based on context diagram macros):
|
|
|
- `Container(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)`
|
|
|
- `ContainerDb(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `ContainerQueue(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `Container_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)`
|
|
|
- `ContainerDb_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `ContainerQueue_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `Container_Boundary(alias, label, ?tags, ?link, ?descr)`
|
|
|
|
|
|
### Component diagram
|
|
|
|
|
|
- Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Component.puml`
|
|
|
- Additional Macros (based on container diagram macros):
|
|
|
- `Component(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)`
|
|
|
- `ComponentDb(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `ComponentQueue(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `Component_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)`
|
|
|
- `ComponentDb_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `ComponentQueue_Ext(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
|
|
|
### Dynamic diagram
|
|
|
|
|
|
- Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Dynamic.puml`
|
|
|
- Additional Macros (based on component diagram macros):
|
|
|
- (lowercase) `increment($offset=1)`: increase current index (procedure which has no direct output)
|
|
|
- (lowercase) `setIndex($new_index)`: set the new index (procedure which has no direct output)
|
|
|
- `LastIndex()`: return the last used index (function which can be used as argument)
|
|
|
|
|
|
following 2 macros requires V1.2020.24Beta4 (can be already tested with <https://www.plantuml.com/plantuml/>)
|
|
|
- `Index($offset=1)`: returns current index and calculates next index (function which can be used as argument)
|
|
|
- `SetIndex($new_index)`: returns new set index and calculates next index (function which can be used as argument)
|
|
|
|
|
|
- All relationship macros are extended with `?index= `:
|
|
|
|
|
|
> All `RelIndex...()` calls are obsolete and can be replaced with calls like Rel($index=..., ...) or Rel(..., $index=).
|
|
|
> A full sample see [samples/C4_Dynamic Diagram Sample - message bus.puml](samples/C4_Dynamic%20Diagram%20Sample%20-%20message%20bus.puml)
|
|
|
|
|
|
### Deployment diagram
|
|
|
|
|
|
- Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Deployment.puml`
|
|
|
- Additional Macros (based on **container** diagram macros):
|
|
|
- `Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `Node(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: short name of Deployment_Node()
|
|
|
- `Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: left aligned Node()
|
|
|
- `Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: right aligned Node()
|
|
|
|
|
|
### (C4 styled) Sequence diagram
|
|
|
|
|
|
C4-PlantUML **does not offer** a full sequence diagram support,
|
|
|
but existing elements and relationships can be reused as participants and calls in the corresponding styles.
|
|
|
|
|
|
> **!!! Contrary to all other diagrams, please define boundaries without `{` and `}` and mark a boundary end with `Boundary_End()` !!!**
|
|
|
|
|
|
- Import: `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Sequence.puml`
|
|
|
- Macros (based on **component** diagram macros):
|
|
|
- Basically all element specific macros (Person, System, Container...) can be reused with following differences:
|
|
|
- element descriptions are typically not displayed (can be activated via SHOW_ELEMENT_DESCRIPTIONS())
|
|
|
- **boundaries have to be defined without `{` and `}`** and instead of `}` the **`Boundary_End()`** macro has to be called
|
|
|
- Additional (element specific) Macros:
|
|
|
- `Boundary_End()`
|
|
|
- Additional Layout Options:
|
|
|
- `SHOW_ELEMENT_DESCRIPTIONS(?show)`
|
|
|
- `SHOW_FOOT_BOXES(?show)`
|
|
|
- `SHOW_INDEX(?show)`
|
|
|
- Only following (extended) relationship specific macros is supported:
|
|
|
- `Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="", $rel="")`
|
|
|
`$index` enables the definition of active/next index with e.g. the related index macros below
|
|
|
`$rel` enables the definition of all PlantUML specific arrow types, details see e.g.
|
|
|
[All arrow types](https://plantuml.com/sequence-diagram#4764f83f72ed032f) and
|
|
|
[Slanted or odd arrows](https://plantuml.com/sequence-diagram#5bd6712206960fab)
|
|
|
- The index related macros (like the dynamic diagram)
|
|
|
- `Index($offset=1)`: returns current index and calculates next index (function which can be used as argument)
|
|
|
- `SetIndex($new_index)`: returns new set index and calculates next index (function which can be used as argument)
|
|
|
- `LastIndex()`: return the last used index (function which can be used as argument)
|
|
|
- (lowercase) `increment($offset=1)`: increase current index (procedure which has no direct output)
|
|
|
- (lowercase) `setIndex($new_index)`: set the new index (procedure which has no direct output)
|
|
|
|
|
|
- (Typically additional used) PlantUML statements:
|
|
|
- [Grouping message](https://plantuml.com/sequence-diagram#425ba4350c02142c)
|
|
|
- [Divider or separator](https://plantuml.com/sequence-diagram#d4b2df53a72661cc)
|
|
|
- [Reference](https://plantuml.com/sequence-diagram#63d5049791d9d79d)
|
|
|
- [Delay](https://plantuml.com/sequence-diagram#8f497c1a3d15af9e)
|
|
|
|
|
|
### Samples
|
|
|
|
|
|
Take a look at each of the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md).
|
|
|
|
|
|
## Relationship Types
|
|
|
|
|
|
- `Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, ?link)`
|
|
|
- `BiRel` (bidirectional relationship)
|
|
|
|
|
|
You can force the direction of a relationship by using:
|
|
|
|
|
|
- `Rel_U`, `Rel_Up`
|
|
|
- `Rel_D`, `Rel_Down`
|
|
|
- `Rel_L`, `Rel_Left`
|
|
|
- `Rel_R`, `Rel_Right`
|
|
|
|
|
|
In following sample a person uses different systems, and a group of persons which have bidirectional relationships
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
HIDE_STEREOTYPE()
|
|
|
|
|
|
Person(a, "A")
|
|
|
Person(b, "B")
|
|
|
Person(c, "C")
|
|
|
Person(d, "D")
|
|
|
Person(e, "E")
|
|
|
|
|
|
BiRel_U(a, b, "talk with")
|
|
|
BiRel_R(a, c, "talk with")
|
|
|
BiRel_D(a, d, "talk with")
|
|
|
BiRel_L(a, e, "talk with")
|
|
|
|
|
|
Person(x, "X")
|
|
|
System(s1, "S1")
|
|
|
System(s2, "S2")
|
|
|
System(s3, "S3")
|
|
|
System(s4, "S4")
|
|
|
|
|
|
Rel_U(x, s1, "uses")
|
|
|
Rel_R(x, s2, "uses")
|
|
|
Rel_D(x, s3, "uses")
|
|
|
Rel_L(x, s4, "uses")
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/RP1DQuD048Rl_WgRau5chH-ddjAeq8AbeWcq9rbtbqIohkAkJVllEwC4JSdnULxcdM6ssj3U38sq7ch5vC25VJAcqy-kszCBETRcD5I35ZrhbH7A4DOsRYUfmfcDDbpMbHk5cmpLuJrrlttY1UG9N1d12AsLw4c72rxVugGizacUVEo_iiHPMrOcUjqgXpxQgvVL-eeLu6v61XZDo07Z6GLW0cZjwbp8ye1bM62eFDiNE1-oASenOdUZ62D-Dqen4l-Yw_8Vy9_0nQysed6q1rnu2-6Zy1SYG14iH8WYnCxfVAWSQ-3d6knqE4h_LiQZ36vbEifmbbkXEFp-3m==)
|
|
|
|
|
|
## Layout (arrange) elements (without relationships)
|
|
|
|
|
|
In rare cases, you can force the layout of elements which have no relationships by using:
|
|
|
|
|
|
- `Lay_U(from, to)`, `Lay_Up(from, to)`
|
|
|
- `Lay_D(from, to)`, `Lay_Down(from, to)`
|
|
|
- `Lay_L(from, to)`, `Lay_Left(from, to)`
|
|
|
- `Lay_R(from, to)`, `Lay_Right(from, to)`
|
|
|
|
|
|
In following sample a person uses different systems, and a group of persons which have no relationships
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
HIDE_STEREOTYPE()
|
|
|
|
|
|
Person(a, "A")
|
|
|
Person(b, "B")
|
|
|
Person(c, "C")
|
|
|
Person(d, "D")
|
|
|
Person(e, "E")
|
|
|
|
|
|
Lay_U(a, b)
|
|
|
Lay_R(a, c)
|
|
|
Lay_D(a, d)
|
|
|
Lay_L(a, e)
|
|
|
|
|
|
Person(x, "X")
|
|
|
System(s1, "S1")
|
|
|
System(s2, "S2")
|
|
|
System(s3, "S3")
|
|
|
System(s4, "S4")
|
|
|
|
|
|
Rel_U(x, s1, "uses")
|
|
|
Rel_R(x, s2, "uses")
|
|
|
Rel_D(x, s3, "uses")
|
|
|
Rel_L(x, s4, "uses")
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/LP1DQuD048Rl_eeq9uLcjtwSUagZ2orOAff0UvBLNH9XNMLtRPj_tnb3qTpUvu5vPvYzTTougLVUGwTRDGcvkJWtscTA3VyXvyvTfcQoqhI3Tb8xqWuz7HNNEBEpJgYkeMcoAr2TtdFw7P4m9a_WwXH6UAUb8ICkU7tBM5qTMSa-Zby5ymFFAwInW_RvusRxiWt-iG4yBDW2fWiAm6n12SW0lPnVwnDMDS6SIypjBMUOnItdcEMo_1SAFg6WkbedUz-6m5Mu4X6AQ2LY5F5A92WIFAAK2ew0oha6_cR1eYnd6TtBR9RnlSndcInoBxM0__q1)
|
|
|
|
|
|
(In combination with [SHOW_FLOATING_LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-details-and-legend)) a greater distance between an element and the
|
|
|
e.g. floating legend could be required that all e.g. corners of the drawing area can be reached.
|
|
|
|
|
|
- `Lay_Distance(from, to, ?distance)`: Sets the distance between `from` and `to` with down alignment (Lay_Distance(from,to,0) equals Lay_D(from, to)). The default alias of the floating legend is LEGEND().
|
|
|
|
|
|
In following sample the floating legend should be in the left bottom corner of the drawing are.
|
|
|
(The normal SHOW_LEGEND() call requires no extra Lay_Distance() call and the legend is automatically drawn below the diagram on the right side)
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
|
|
|
!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
|
|
|
!include DEVICONS/angular.puml
|
|
|
!include DEVICONS/java.puml
|
|
|
!include DEVICONS/msql_server.puml
|
|
|
!include FONTAWESOME/users.puml
|
|
|
|
|
|
Person(user, "Customer", "People that need products", $sprite="users")
|
|
|
Container(spa, "SPA", "angular", "The main interface that the customer interacts with", $sprite="angular")
|
|
|
Container(api, "API", "java", "Handles all business logic", $sprite="java")
|
|
|
ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", $sprite="msql_server")
|
|
|
|
|
|
Rel(user, spa, "Uses")
|
|
|
Rel(spa, api, "Uses")
|
|
|
Rel_R(api, db, "Reads/Writes")
|
|
|
|
|
|
SHOW_FLOATING_LEGEND()
|
|
|
Lay_Distance(LEGEND(), db, 1)
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/hLDDRzf04BtxLsnG3o05t3Jj9LAb82094Xyka7Aq1ky0MwrttPqrgF--ixO9LgDAFVJazPkPz-QzjH_9W_DbhgCRPJ9TIXH7xmjwY6C7vy51-MEvAmbTPer7umUPpUD2WmapVV9Igrqy-jnF0lGwdyMdJuEx-y57nj8HZu0ow0P548Xk9ExvLOmdtwUZvMBz3qg-B42w-wkYucf_pnrzAfpoI74EvD754a-XHcygJyl5PhYTh9VpoNyLgZ0u8zaS-r-kiLrSnM0EfOR6zFlo3pZ1tsev_TGfRtR2FyTRRkAmEpMP9doqfXkWMz4PbUHvBTVXSuAsq2Zy4RmmY58KpieoyyJ53xMdhvsAgjEBtgwgImNmy3eP1ex6IZXkZYXoRX6AGtDxo1fgptZMoDOrO0rnvfJRGXUcjXGKYec7oJJmXrZ2ymMCr4W2j1PyIzn89BGzgAnDLtMtkCQxhjpnz1Wyx80mCCrLvYpPlHVhRxEAscf9bnXkXNMILsOvNlja5HjIPczT3bvPqnPhtGfhHYlKJTvrLg-48S80Lq1jwugcgzffjU0AGLAyhRweGBP-MMxJfzbok9akdjFPv7co67TxqGn-fMF5_wR9i7j1QugxNlI8HlBj_mO=)
|
|
|
|
|
|
### Compatibility mode `NO_LAY_ROTATE=1`
|
|
|
|
|
|
Based on the bugfix of [issue 376](https://github.com/plantuml-stdlib/C4-PlantUML/issues/376)
|
|
|
the layout of old diagrams could be changed if they contain a combination of
|
|
|
`LAYOUT_LANDSCAPE()` and `Lay_*()` commands like below.
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
LAYOUT_LANDSCAPE()
|
|
|
|
|
|
Person(a, "A")
|
|
|
System(sUp, "B up\nbefore bugfix left")
|
|
|
System(sRight, "C right\nbefore bugfix down")
|
|
|
System(sDown, "D down\nbefore bugfix right")
|
|
|
System(sLeft, "E left\nbefore bugfix up")
|
|
|
|
|
|
Lay_U(a, sUp)
|
|
|
Lay_R(a, sRight)
|
|
|
Lay_D(a, sDown)
|
|
|
Lay_L(a, sLeft)
|
|
|
|
|
|
HIDE_STEREOTYPE()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/NP1BRuCm48Jl_0et9v0QwEkKKoWWjPBR80A7I9MG0GEMm5X-DCs_xzgv86uxesztHdjKcaXjvibxOBoTJ4VHgBLGXoYIv1eEJ8-cCOhATk6QSXssono9YN2xirUwcrWJ9M_xt5hL5uv-NyBdr_09l3g15S8ubQ6m0JY-dAgonl5tUaxYFFC3pykfL0ltoIFQnRl0Ez-KfhElAW76EpBYXpUqNoH5ZHbwzeScskiLLx1Xr80cIDffItVBbQ_e52J0gVEth3kmWZ4a0Povo2ri190U9hUwijsXR-1KuPHhTJTIPzZWkyPEszkm__6PPlMvp8hiL5xSFuwKT_2gVm==)
|
|
|
|
|
|
The new repositioning of the elements could damage old diagrams.
|
|
|
Therefore a compatibility mode NO_LAY_ROTATE is introduced.
|
|
|
This mode can be directly activated in the old diagrams with `!NO_LAY_ROTATE=1`
|
|
|
or with the additional command line argument `-DNO_LAY_ROTATE=1` (like `java -jar plantuml.jar -DNO_LAY_ROTATE=1 ...`)
|
|
|
|
|
|
If this value is set then non of the Lay_*() calls itself has to be updated like below.
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
' the bugfix is deactivated with following statement
|
|
|
!NO_LAY_ROTATE = 1
|
|
|
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
LAYOUT_LANDSCAPE()
|
|
|
|
|
|
Person(a, "A")
|
|
|
System(sUp, "B up\nbefore bugfix left")
|
|
|
System(sRight, "C right\nbefore bugfix down")
|
|
|
System(sDown, "D down\nbefore bugfix right")
|
|
|
System(sLeft, "E left\nbefore bugfix up")
|
|
|
|
|
|
Lay_U(a, sUp)
|
|
|
Lay_R(a, sRight)
|
|
|
Lay_D(a, sDown)
|
|
|
Lay_L(a, sLeft)
|
|
|
|
|
|
HIDE_STEREOTYPE()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/NP1HQuCm58NVyolIlgo5LTTjJuD1dGeRk5giFXG64ZLg84qaYNNzzxj9OHJVSWxVlUVaxhGXoendZXumDZt5rTYrx1SpZHjAQiCknD06Jypqk9MSouc93iEGeMSg35hiqp89JcMMva4UutUyHMZ1HCt7XkBUc46_-RuYazV1Xh4QDLMr50P6lLgU_O4JOTCtsZISLNxukZbOg_XE_Ckpjttndi0hGnWXJ53b3ROg1AP53hdxw1W6XtYrHkX0bPPYHHxnCbYkqV6geU5A5mCO7tWSVaH5Mwd-FyXfQ-wuZ7Mz0JJ4ohxcT2CdSKT7806Ed3zdtO8xE84aW6CNEOV70KYKa6jPsExGT-rKvfHhTJCYPzZWcqwSjhjX_lChYijZ7cTncf_SFNPKD72gFm==)
|
|
|
|
|
|
## Global Layout Options
|
|
|
|
|
|
C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams:
|
|
|
|
|
|
- [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT() or LAYOUT_LANDSCAPE()](LayoutOptions.md#layout_top_down-or-layout_left_right-or-layout_landscape)
|
|
|
- [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype, ?details)](LayoutOptions.md#layout_with_legend-or-show_legend)
|
|
|
- [SHOW_FLOATING_LEGEND(?alias, ?hideStereotype, ?details) and LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-and-legend)
|
|
|
- [LAYOUT_AS_SKETCH() and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)](LayoutOptions.md#layout_as_sketch)
|
|
|
- [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype)
|
|
|
|
|
|
C4-PlantUML also comes with some person sprite/portrait options:
|
|
|
|
|
|
- [HIDE_PERSON_SPRITE()](LayoutOptions.md#hide_person_sprite)
|
|
|
- [SHOW_PERSON_SPRITE(?sprite)](LayoutOptions.md#show_person_sprite)
|
|
|
- [SHOW_PERSON_PORTRAIT()](LayoutOptions.md#show_person_portrait)
|
|
|
- [SHOW_PERSON_OUTLINE()](LayoutOptions.md#show_person_outline) (requires PlantUML version >= 1.2021.4)
|
|
|
|
|
|
## Sprites and other images
|
|
|
|
|
|
C4-PlantUML offers predefined person and robot sprites which can be directly used:
|
|
|
|
|
|
- `person`,`person2`
|
|
|
- `robot`, `robot2`
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Component.puml
|
|
|
|
|
|
Person(pB, "Sam", $sprite="person2")
|
|
|
Person_Ext(pA, "Bob", $sprite="person")
|
|
|
|
|
|
System_Ext(robB, "Robot A", $sprite="robot2")
|
|
|
System_Ext(robA, "Robot B", $sprite="robot")
|
|
|
|
|
|
SHOW_LEGEND()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/PS_B2i8m40NGVR-Y5XSLQk9h9GYsMdJX2ukuB4qRjD1aGZBryVSsHKHnU-VC7MPkCDDOYyhfb3AlweAxLqHbffJgx4uk9LvhLXkkSv389P8S15LL9krEts1HbOmk9ls3ZKxR3RsDo71C1asMBa0ea7P9sGFEWMi3qbTHu7f99hp0xHgbI-GpJxMZaTTxepH-eA_21aR0_c7ZdEHfa8iMQc2symWCq0s_kRQHhVtLuKT7VxhjNk_FwIPUnRkbttFcN1RD0oy=)
|
|
|
|
|
|
Additional `$sprite` (images) can be defined with following PlantUML supported options:
|
|
|
|
|
|
- included (standard library) sprites via their `{SpriteName}`; details see [sprites](https://plantuml.com/sprite)
|
|
|
- images via `img:{File or Url}`
|
|
|
- OpenIconic via `&{OpenIconicName}`; details see [openiconic](https://plantuml.com/openiconic)
|
|
|
|
|
|
Size of the displayed images can be changed with `,scale={factor}`.
|
|
|
Color of the displayed images can be changed with `,color={color}`.
|
|
|
|
|
|
(If sprites are defined via $tags then the calculated legend is updated too)
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
'stdlib users.puml defines sprite "users"
|
|
|
!include <office/users/users.puml>
|
|
|
|
|
|
|
|
|
AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:https://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered")
|
|
|
|
|
|
Person(user, "user group displayed with a sprite", $sprite="users")
|
|
|
|
|
|
|
|
|
Container(container, "Container with scaled and colored OpenIconic", $sprite="&folder,scale=5.0,color=gray")
|
|
|
|
|
|
System(system, "System with an image", $sprite="img:https://plantuml.com/logo3.png")
|
|
|
|
|
|
Rel(user, system, "Rel with image (via tags)", $tags="plantuml")
|
|
|
Rel(user, container, "Rel with OpenIconinc", $sprite="&folder")
|
|
|
|
|
|
SHOW_LEGEND()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/bPB1JiCm38RlUOfG8UYaqGu65qGHQ2106WmD44SK6Yz4IfCgIO49yUuuwTRr00TEJUtui__VENEUMTzKYcn9NQg60ttpldR7UMxPHoQaVsjU6mUsDDg3zbbfghnMJ8UQFUUvag_vv73lFeIURgVv-q6sFyv667kPO0cJ6cnMXmPajxrE0yx56EMmm0kEkjfA3pI9gMGpoubPB6G9UOpdcy9JGiWvvtDGZqoaoNgWP4YtFNpwYL765ids-Nm-UtwPpAQpUKWfxFL7gXsWI6GbZjS6hAbHipB2ZBDQYozNCWN5A1j_HoO8qFpX_-NxlV97dBb8q69d551lfH1WWIS3GkvHij5fa3vi_Q72cgQcN3hii0HEFt19bAqyx8jftKG8wLQHbkiJqhfeYuYJSSeqfsLm2S-p6lGDbiYopzrP6CMHq4evoaR3UByGbYr3kuUbyr2bBdwmJ_k_cbDJMJ41_pCzK77PAniwC8PQQaJIz5qowfbmW_WGy51idiQW1-YRq34whVetiL7NDJwPwUNLvTr5EY1dk3W4_m0=)
|
|
|
|
|
|
Relationship specific sprites are typically smaller and therefore following options are possible:
|
|
|
|
|
|
- use smaller icons (like the $triangle in the following sample)
|
|
|
- use an additional scale factor (direct as part of the argument, or via a variable)
|
|
|
- if sprite argument starts with `&` an OpenIconic name can be used too (details see <https://useiconic.com/open>)
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Context.puml
|
|
|
|
|
|
Person(user, "User")
|
|
|
Person(user1, "User 1")
|
|
|
Person(user2, "User 2")
|
|
|
Person(user3, "User 3")
|
|
|
|
|
|
System(system, "System")
|
|
|
|
|
|
' normal sprites are too big
|
|
|
Rel_L(user, user2, "informs", "courier", "normal sprites are too big", $sprite="person2")
|
|
|
|
|
|
' scaled sprites are ok
|
|
|
Rel_R(user, user3, "informs", "courier", "scaled sprites are OK", $sprite="person2,scale=0.5")
|
|
|
|
|
|
' combine sprite and scale to a new sprite
|
|
|
!$combinedSprite="person2,scale=0.5"
|
|
|
Rel_R(user, user3, "informs", "courier", "combined sprites are OK", $sprite=$combinedSprite)
|
|
|
|
|
|
' special smaller sprites can be used
|
|
|
sprite $triangle {
|
|
|
00000000000
|
|
|
00000F00000
|
|
|
0000FBF0000
|
|
|
0000FBF0000
|
|
|
000F999F000
|
|
|
000F999F000
|
|
|
00F66666F00
|
|
|
00F66666F00
|
|
|
0F3333333F0
|
|
|
0F3333333F0
|
|
|
0FFFFFFFFF0
|
|
|
00000000000
|
|
|
}
|
|
|
Rel_R(user1, system, "orders", "http", "small sprites, like the small triangle", $sprite="triangle")
|
|
|
|
|
|
' if sprite starts with &, sprite defines a OpenIconic, details see https://useiconic.com/open/
|
|
|
Rel_D(user, user1, "requests", "async message", "if sprite starts with &, it defines a OpenIconic like &envelope-closed", $sprite = "&envelope-closed")
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/bLHjQzim4FxkNt4reMl1iPDu7MGGAEimZ7MqjFHpaUrB8YfBdYGtAsF_VIVPRfms7anVx7jET_VScowDPTesbGXEk2n4Ko9ihQtDvoJHR1TlkDqsUMDG5qfQb3OkL9NKWabdCpMs53nFhZvERntqyECwULx4ypIU4VPuvKn-sRXsxeDRr4R9C-ShWl21Fk7v49ntACmFyKMFBmxnjCTJmeFx5sEnEZF-GvfMTfeF89Mkc01JQsxH0DC8LYd8-GQ2EnIFrnsfFXgNQx8m8VqMgj6ScDBlk1VIJbfu5TQUuA8DR0eci3mmKKy-vDqWP3eQyeZzpVSZqI9_SJMBBzgurAESI-mCWScofKA4WO74NQS9JYRTrV9-rED_yEsTZJD-4u_OkZBLM71NMggle8RsrWMJaAEBMGPTAXEhEPCRIkLt07Hc-xENiqCv-vBzIywMosKsBcUVtCd6v2njJpOczsVsZk-VGMLf-5z7L-cIck3gwJRHpu4hJ5-M20H_ebPkiIqOz2KP3iOhvkU1h_jHyDjkO4Th3QTHZvQuffvGk-2cHlcDLfqN4Q6MSM70uFvD8AxSg_qxeEXsuhFuEfWFjyWQVpPehC-2cHTPG8N6i8qZ6OxIuVOebJRXKvJFA2Zaj12AHcAVBgmWVASz3ovHblJo_0K=)
|
|
|
|
|
|
## Custom tags/stereotypes support and skinparam updates
|
|
|
|
|
|
Additional tags/stereotypes can be added to the existing element stereotypes (component, ...) and highlight,... specific aspects:
|
|
|
|
|
|
- `AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`:
|
|
|
Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
|
|
|
- `AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite, ?lineThickness)`:
|
|
|
Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
|
|
|
- `AddBoundaryTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)`:
|
|
|
Introduces a new Boundary tag. The styles of the tagged boundaries are updated and the tag is displayed in the calculated legend.
|
|
|
- `UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`:
|
|
|
This call updates the default style of the elements (component, ...) and creates no additional legend entry.
|
|
|
- `UpdateRelStyle(textColor, lineColor)`:
|
|
|
This call updates the default relationship colors and creates no additional legend entry.
|
|
|
- `UpdateBoundaryStyle(?elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)`:
|
|
|
This call updates the default style of the existing boundaries and creates no additional legend entry.
|
|
|
If the element name is "" then it updates generic, enterprise, system and container boundary style in on call.
|
|
|
- `SharpCornerShape()`: This call returns the name of the sharp corner shape and can be used as ?shape argument (default).
|
|
|
- `RoundedBoxShape()`: This call returns the name of the rounded box shape and can be used as ?shape argument.
|
|
|
- `EightSidedShape()`: This call returns the name of the eight sided shape and can be used as ?shape argument.
|
|
|
- `DashedLine()`: This call returns the name of the dashed line and can be used as ?lineStyle or ?borderStyle argument.
|
|
|
- `DottedLine()`: This call returns the name of the dotted line and can be used as ?lineStyle or ?borderStyle argument.
|
|
|
- `BoldLine()`: This call returns the name of the bold line and can be used as ?lineStyle or ?borderStyle argument.
|
|
|
- `SolidLine()`: This call returns the name of the solid line and can be used as ?lineStyle or ?borderStyle argument (enables e.g. a reset of dashed boundaries).
|
|
|
|
|
|
Each element can be extended with one or multiple custom tags via the keyword argument `$tags="..."`, like `Container(spaAdmin, "Admin SPA", $tags="v1.1")`.
|
|
|
Multiple tags can be combined with `+`, like `Container(api, "API", $tags="v1.0+v1.1")`.
|
|
|
|
|
|
### Element specific tag definitions
|
|
|
|
|
|
Sometimes an added element tag is element specific and all element specific colors should be used, e.g. a specific user role should be defined as element tag with the specific colors `...PERSON_...` like
|
|
|
|
|
|
```plantuml
|
|
|
AddElementTag("admin", $fontColor=$PERSON_FONT_COLOR, $bgColor=$PERSON_BG_COLOR, $borderColor=$PERSON_BORDER_COLOR, $sprite="osa_user_audit", $legendText="administration user")
|
|
|
```
|
|
|
|
|
|
Therefore element Add...Tag() shortcuts are added which use the specific colors as default values and the call can be simplified like
|
|
|
|
|
|
```plantuml
|
|
|
AddPersonTag("admin", $sprite="osa_user_audit", $legendText="administration user")
|
|
|
```
|
|
|
|
|
|
Following calls introduces new element tags with element specific default colors:
|
|
|
|
|
|
- `AddPersonTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite, ?type, ?borderStyle, ?borderThickness)`
|
|
|
- `AddExternalPersonTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite, ?type, ?borderStyle, ?borderThickness)`
|
|
|
- `AddSystemTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite, ?type, ?borderStyle, ?borderThickness)`
|
|
|
- `AddExternalSystemTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?legendText, ?legendSprite, ?type, ?borderStyle, ?borderThickness)`
|
|
|
- `AddComponentTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`
|
|
|
- `AddExternalComponentTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`
|
|
|
- `AddContainerTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`
|
|
|
- `AddExternalContainerTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?techn, ?sprite, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`
|
|
|
- `AddNodeTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite, ?borderStyle, ?borderThickness)`
|
|
|
(node specific: $type reuses $techn definition of $tags)
|
|
|
|
|
|
### Boundary specific tag definitions
|
|
|
|
|
|
Like the element specific tag definitions exist boundary specific calls with their default colors **and type**:
|
|
|
|
|
|
- `UpdateContainerBoundaryStyle(?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)`
|
|
|
- `UpdateSystemBoundaryStyle(?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)`
|
|
|
- `UpdateEnterpriseBoundaryStyle(?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?type, ?legendText, ?borderStyle, ?borderThickness, ?sprite, ?legendSprite)`
|
|
|
|
|
|
### Define a new legend title
|
|
|
|
|
|
All the above described `Update....(..., ?legendText, ...)` calls can define a new legend text.
|
|
|
Only the legend title cannot be changed. Therefore, the following call is added to allow it to be changed as well:
|
|
|
|
|
|
- `UpdateLegendTitle(newTitle)`
|
|
|
|
|
|
### Comments
|
|
|
|
|
|
- `SHOW_LEGEND()` supports the customized stereotypes
|
|
|
(`LAYOUT_WITH_LEGEND()` cannot be used, if the custom tags/stereotypes should be displayed in the legend).
|
|
|
- `SHOW_LEGEND()` has to be last line in diagram.
|
|
|
- Don't use space between `$tags` and `=` (PlantUML does not support it).
|
|
|
- Don't use `,` as part of the tag names (PlantUML does not support it in combination with keyword arguments).
|
|
|
- If 2 tags define the same skinparam, the first definition is used.
|
|
|
- If specific skinparams have to be merged (e.g. 2 tags change the font color) an additional combined tag has to be defined. Use `&` as part of combined tag names.
|
|
|
|
|
|
- Automatically merging colors of relationship tags is not supported in PlantUML before v.1.2022
|
|
|
If an older version is used and one tag modifies the line color and the other the text color, an additional combined tag has to be defined and used.
|
|
|
|
|
|
### Sample with different tag combinations
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
UpdateElementStyle(person, $fontColor="green")
|
|
|
AddElementTag("v1.0", $fontColor="#d73027", $borderColor="#d73027")
|
|
|
AddElementTag("v1.1", $fontColor="#ffffbf", $borderColor="#ffffbf")
|
|
|
AddElementTag("v1.0&v1.1", $fontColor="#fdae61", $borderColor="#fdae61")
|
|
|
AddElementTag("fallback", $bgColor="#444444")
|
|
|
|
|
|
' If spaces are requested in the legend, legend text with space has to be defined (incl. all other additional details)
|
|
|
AddElementTag("microService", $shape=EightSidedShape(), $legendText="micro service (eight sided) (no text, no back color)")
|
|
|
' If no special tag names should be displayed in legend, no explicit legend text definition is required (all additional details are automatically calculated)
|
|
|
AddElementTag("storage", $shape=RoundedBoxShape())
|
|
|
|
|
|
UpdateRelStyle(black, black)
|
|
|
AddRelTag("service1", $textColor="red")
|
|
|
AddRelTag("service2", $lineColor="red")
|
|
|
AddRelTag("service1&service2", $textColor="red", $lineColor="red")
|
|
|
|
|
|
Container(spa, "SPA", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0")
|
|
|
Container(spaAdmin, "Admin SPA", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="v1.1")
|
|
|
Container(api, "API", "java", "Handles all business logic (incl. new v1.1 extensions)", $tags="v1.0&v1.1+v1.0+v1.1")
|
|
|
Container(spa2, "SPA2", "angular", "The main interface that the customer interacts with via v1.0", $tags="v1.0+fallback")
|
|
|
Container(spaAdmin2, "Admin SPA2", "angular", "The administrator interface that the customer interacts with via new v1.1", $tags="fallback+v1.1")
|
|
|
|
|
|
Container(services, "Services", "techn", $tags="microService")
|
|
|
Container(fileStorage, "File storage", "techn", $tags="storage")
|
|
|
|
|
|
Rel(spa, api, "Uses", "https")
|
|
|
Rel(spaAdmin, api, "Uses", "https")
|
|
|
Rel_L(spa, spa2, "Updates", "https")
|
|
|
Rel_R(spaAdmin, spaAdmin2, "Updates", "https")
|
|
|
|
|
|
Rel_D(api, services, "uses service1 via this call", $tags="service1")
|
|
|
Rel_D(api, services, "uses service2 via this call", $tags="service2")
|
|
|
Rel_D(services, fileStorage, "both services stores via this call", $tags="service1&service2+service1+service2")
|
|
|
|
|
|
SHOW_LEGEND(false)
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/jLPXRzCm4FtUNt4KD1grj6k7G4AQnDW6cpHWMZVnSNBZQs9mx60xtVRlETj9bxP10mdwOKxiy_ExvtUNlRUE6LSLilTCg5HM725thhJl9XF3xiQPS7crg2oQL2k7oerJNKnAoPJVyyewBiLYSlpwrQMVklbyCLdDnjE3yJxDtHxJ5YOKcd7f3-ZTb9mvF9LO4D3SFKWSb6YiLYDuiQJOOosrEUnd1b7razuHvtNiDSi6_TLqlD_VZ7pEtnxipzxwsOKs7CtMV1V6T1jZIR_5SXUZdk_aiTS9n1c-cNO0nVaTe2MJSi7I7s57raI_3Z-Axhs4yoNOagLeWHa4Wpyhj0uv20KkHv2OeUAZUWI7zmxkwCBY9iYP1QTXWS1nITV0OU2lU0nqBcW2CC0u5qvenIJ5q5r9kyEo4AdHSpGhaQ9dQdDMuk6fo78t5npvtByF4bg9DAw9nM7S1JPkWm7wSB0-Fe61qe7h2EZ12m2fppsXd4FAD6jBJ0MHSYm3nGeImEQwaZma8opvxo7Aq4X0U_2-b28LRaEEa7b84OGD2WhZXV0Ix2OVP6QLqmLp8gMO1w2_QIN9jaHyMnhhj65PIvKhNIbAyOE-hrL96jDVeOo6NqXAU0HX25hJIWIBMWN_UEgr7uXjlojkvkCatUeJSTEzzeOju2w8thfg1sIZ4VJdbqSKs6Sg8nsCVxmcxnKKGXVWq2ozrrpENF1aMf4g1LahhB7KsMZ9bM3GL33TgZsCzPni7dV42q7Te1z6w3wP-JLXdM4a_zzIK7W7JUskQKmtQB1IU0QNv_x0xsp5_7Z659U-3iatr0ufq5gGEXDfKrGDClcG-gGbNzbaCzdGD8R-QRXpAEK-YrhF_flOmtN3wL9zrfQzYyG_rhqXqsZHfXGTQxqWzQCduJ3DrIF0HcDgPxGK4kUnD6dNHtg3nqhTHcbMY01LJhHyTC2DZSU6po6jrykrHNyRStiHGUeRZUM_4tJLWchVG4TuY3-9jcmfGzzasxnFWyOkfnRdkrOhkwQf97-0Cdi2PRP6UGJOr7gX_SUdNWoYq_04jNL_6ZOpmzPvlVdPrs-t5wUVJh-S3CWo5fFUU-hkzF_4Bm==)
|
|
|
|
|
|
### Sample with tag dependent sprites and custom legend text
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master
|
|
|
!include osaPuml/Common.puml
|
|
|
!include osaPuml/User/all.puml
|
|
|
|
|
|
!include <office/Servers/database_server>
|
|
|
!include <office/Servers/file_server>
|
|
|
!include <office/Servers/application_server>
|
|
|
!include <office/Concepts/service_application>
|
|
|
!include <office/Concepts/firewall>
|
|
|
|
|
|
AddExternalPersonTag("anonymous_ext", $sprite="osa_user_black_hat", $legendText="anonymous user")
|
|
|
AddPersonTag("customer", $sprite="osa_user_large_group", $legendText="aggregated user")
|
|
|
AddPersonTag("admin", $sprite="osa_user_audit,color=red", $legendSprite="osa_user_audit,scale=0.25,color=red", $legendText="administration user")
|
|
|
|
|
|
AddContainerTag("webApp", $sprite="application_server", $legendText="web app container")
|
|
|
AddContainerTag("db", $sprite="database_server", $legendText="database container")
|
|
|
AddContainerTag("files", $sprite="file_server", $legendText="file server container")
|
|
|
AddContainerTag("conApp", $sprite="service_application", $legendText="console app container")
|
|
|
|
|
|
AddRelTag("firewall", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="firewall,scale=0.3,color=red", $legendText="firewall")
|
|
|
|
|
|
Person_Ext(anonymous_user, "Bob", $tags="anonymous_ext")
|
|
|
Person(aggregated_user, "Sam, Ivone", $tags="customer")
|
|
|
Person(administration_user, "Bernd", $tags="admin")
|
|
|
|
|
|
System_Boundary(c1, "techtribes.js"){
|
|
|
Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", $tags="webApp")
|
|
|
ContainerDb(rel_db, "Relational Database", "MySQL 5.5.x", $tags="db")
|
|
|
Container(filesystem, "File System", "FAT32", $tags="files")
|
|
|
ContainerDb(nosql, "NoSQL Data Store", "MongoDB 2.2.x", $tags="db")
|
|
|
Container(updater, "Updater", "Java 7 Console App", $tags="conApp")
|
|
|
}
|
|
|
|
|
|
Rel(anonymous_user, web_app, "Uses", "HTTPS", $tags="firewall")
|
|
|
Rel(aggregated_user, web_app, "Uses", "HTTPS", $tags="firewall")
|
|
|
Rel(administration_user, web_app, "Uses", "HTTPS", $tags="firewall")
|
|
|
|
|
|
Rel(web_app, rel_db, "Reads from and writes to", "SQL/JDBC, port 3306")
|
|
|
Rel(web_app, filesystem, "Reads from")
|
|
|
Rel(web_app, nosql, "Reads from", "MongoDB wire protocol, port 27017")
|
|
|
|
|
|
Rel_U(updater, rel_db, "Reads from and writes data to", "SQL/JDBC, port 3306")
|
|
|
Rel_U(updater, filesystem, "Writes to")
|
|
|
Rel_U(updater, nosql, "Reads from and writes to", "MongoDB wire protocol, port 27017")
|
|
|
|
|
|
Lay_R(rel_db, filesystem)
|
|
|
|
|
|
SHOW_LEGEND()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/bLRRSjem47ttLoYUFi0CiHDecfbEwPH0qZH3BWNIF7faInYtikHASWZJwRztvJk6NCfJaFQSFRjxLkIBqbZgD6RMGSG3bXAALbedwgFhIhnsmaYlKZzLL0Q2Qygr4uZOJHZc1dEeD66HxuxV7zwPe_lhgVlOTuu7pX6SUME0u8XJwIGcWNL0w1A-8g7m7Hoy8T5OOhMY98uuSSiCXoAXND4WbP7UO1ci8aq3dKhQFum0gzmOAqrbNK-HpXsBE1Oyrx9pUG-PNSnOARMy_oIMooYWxfpAHogLIx36FbRKKzd1v-SZbn5xGnHE4XO5M4U2FnyCZGneefLh8k30Qw1U2bz6agwXgC-MDIBa_0dQmZ6xWxo2Bt3OiJ4NV1EBL7dqITizz4ubq5KwjA4jdXc6vpCS_F9MEBjbDAISB21sM4EHYREx9aE3EKYL5Z5Sx2DbM8RK2wL8antQC9Gqn9gI_RpOc64lAKv9f7k1O48E9IKryNn_f0emeyCZft-o3rIeCTaYfMNMwbAHaLHvErErflueIPgoTkVQvWOCWYWKb4nvhTl4n6-IjipNPYolNwOqlbHDrePHsupc2kLNBvF2PQi1UwpQPZVRAY11kmk6VaPPeJQtiC5gG8spKTdlHhFPxOCtlftUpZ9QW3vpLPUPCrM37pm_zoehYCdDvy7sTEfrCKxe8VjCPFFHE5J3rZ9r2s2dTdI9ckEuXxuz2avhSBKlDMxBUrL6M67Io9cj0wYSR-3HYxqpaNA2vQOJ74CmF8mhBIEVAkUdihj_B0IVQd0TSA0P3mG-W1T7MuEoh_0ZxY6pEpn4rp_6FRGGCLoZK-UfpbyOlxlDFF4xaZAF-C03WymuCKEJmf-6_dep_pv59yv9amtStcBgP6xDQWFGXR5ZNgdXk1Wj1lqQdHjxLmeNwZU3y1jXKXeHQAw5p6K87eh96Uex_LU4f0ciLpQ2-_oliader4HbHYvMe9XelX9TwwzbGHDsp5Dt7tvxp4BQbul5tRnPJsN23D_sqNyJx3FK_v1aB1MWCM5C55fA4IFC2LgRTLD82qC67NUl9cVWdaH8ZGQ3em-5cefdQy8rLpkid68ZeZ6_DQX4YHHQm4uNoVgdHyUdXMpllXxWAyBDA_gQ-YRTblw7glYTkDq2TjlrfdAcUEFDgWMhqvjNu19Ulkdvr_ERIQThVO7t3FwR-GS=)
|
|
|
|
|
|
### Sample with different boundary tag combinations
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Component.puml
|
|
|
|
|
|
' Update the generic boundary style and the "system", "enterprise", "container" boundaries styles too
|
|
|
UpdateBoundaryStyle($bgColor="gold", $fontColor="brown", $borderColor="brown")
|
|
|
' (Re-)Updates the system boundary styles; re-set $bgColor avoids '(no back color)' in legend too
|
|
|
UpdateSystemBoundaryStyle($bgColor="gold", $fontColor="white", $borderColor="white")
|
|
|
|
|
|
Boundary(b, "A Boundary") {
|
|
|
}
|
|
|
|
|
|
Container_Boundary(cb, "A Container Boundary") {
|
|
|
}
|
|
|
|
|
|
System_Boundary(sb, "A System Boundary") {
|
|
|
}
|
|
|
|
|
|
' defines a new border style incl. new border type
|
|
|
AddBoundaryTag("repository", $bgColor="green", $fontColor="white", $borderColor="white", $shadowing="true", $shape = RoundedBoxShape(), $type="GitHub repository")
|
|
|
|
|
|
Boundary(c4Respository, "plantuml-stdlib/C4-PlantUML", $tags="repository") {
|
|
|
Component(readMe, "README.md", "Markdown")
|
|
|
}
|
|
|
|
|
|
' boundary tags are internally extended with '_boundary' that it uses a different name space
|
|
|
' this enables different element and boundary styles for the same tag name
|
|
|
AddBoundaryTag("v1", $bgColor="lightgreen", $fontColor="green", $borderColor="green")
|
|
|
AddElementTag("v1", $bgColor="lightred", $fontColor="red", $borderColor="red")
|
|
|
|
|
|
Boundary(anotherBoundary, "Another Boundary", $type="BOUNDARY TYPE", $tags="v1") {
|
|
|
Component(anotherComponent, "Another Component", $techn="COMPONENT TYPE", $tags="v1", $descr="Component and boundary use different tag name spaces that both v1 tags can use different styles")
|
|
|
}
|
|
|
|
|
|
Lay_R(b, cb)
|
|
|
Lay_R(cb, sb)
|
|
|
|
|
|
Lay_D(b, c4Respository)
|
|
|
|
|
|
Lay_R(c4Respository, anotherBoundary)
|
|
|
|
|
|
SHOW_LEGEND()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/bLHHRzem47xFhxX5bKYa0klMfqr8fO3QXm8Lj9hwX9pu25Q37Ta6XgRzzvrZ4W9ia_e4_dpttUVxxd9dBDDsiyw3JqAc-OOZhAmjpBTkLxDT9nDsjKas1dMgf4LfEwbQTukSIPVJDfRd8kaERjlF3deTFtMtNpetNpkV2LiCrBfGqYKLha3GWjU2CujWLmWPIjGYXKHj96Tw3yRkSmGcUNaTchsnk0wl8IG2r8KM1jt9wM22SiCgLQ3noGQiKe6lSN-WdRkBw2h91YfNkXTcAkT4SxKacWEKQBMJ3akKvgXFq9X4HpDinvxLbDgyj3FbvZjeR1kqK1K3jbM26sX5Ka72qdT87HotG4Z8aHh06uBd9Ua7PEzMmkA5R8_6GL0nHGarhG_LCOpXL_0x20PL6nTrOEeZwvkB72_nc61yWeSlebl0SKay1XX8t86NUR3PpLgd2TjzWK6VyuhbXMLHgB5GHbX5fDVGQ8P6b1_e1g5cnRZQ2PdrGgit5LGWz63cAY8L_ZbtI1JJdLFJ2n-4VTmaq53Hx6jwEqDJtL0Z_hCKhfnbcUarN-JQ153lIAIHyJ4IqMpK7uv7dRKpF1mp_Sxz99OzhOVEyG7JhfMq7fBb-Hxm9wqelGLsjBRGMbJ1BHfRPa5Oe4rsVd2nNAAcgY3PcWQwO2a6BaeOGCaIjql76CnnxNxTRfuDFInfpikTS3oagIIyC79xSs9WBhAL_PkBDNRYeaTZnphoKlv9gl5yJGx82Q73cbOogUWDkZgxgVR8SQZheRYVlaw6_TaRlBmzZux6afXpGm-iDT2WhR6I0DELx8M3wVXvEXbDNYwPwJz7avBoEl7K3BAruLTbW_VLUFCJgWpR6pytAPDdETvEFsLFRB-OkUz6ciI7W_is63gLns5vrnp_k4ewMugpnbBO_77wO_4qUXXDXb4StD6uqihy0G==)
|
|
|
|
|
|
### Custom schema definitions (via UpdateElementStyle())
|
|
|
|
|
|
Via `UpdateElementStyle()` calls, it is possible to change the default colors, sprites, legend text, tags, ...
|
|
|
It automatically updates the legend too.
|
|
|
If the corresponding section is stored in a separate file then it can be reused as default of all diagrams.
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Context.puml
|
|
|
|
|
|
' <<<<< this section could be stored in a separate file and reused in all other diagrams too
|
|
|
' it defines new default colors, different default sprites and legend
|
|
|
!$COLOR_A_5 = "#7f3b08"
|
|
|
!$COLOR_A_4 = "#b35806"
|
|
|
!$COLOR_A_3 = "#e08214"
|
|
|
!$COLOR_A_2 = "#fdb863"
|
|
|
!$COLOR_A_1 = "#fee0b6"
|
|
|
!$COLOR_NEUTRAL = "#f7f7f7"
|
|
|
!$COLOR_B_1 = "#d8daeb"
|
|
|
!$COLOR_B_2 = "#b2abd2"
|
|
|
!$COLOR_B_3 = "#8073ac"
|
|
|
!$COLOR_B_4 = "#542788"
|
|
|
!$COLOR_B_5 = "#2d004b"
|
|
|
!$COLOR_REL_LINE = "#8073ac"
|
|
|
!$COLOR_REL_TEXT = "#8073ac"
|
|
|
|
|
|
UpdateElementStyle("person", $bgColor=$COLOR_A_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_1, $shadowing="true", $legendText="Internal user")
|
|
|
UpdateElementStyle("external_person", $bgColor=$COLOR_B_5, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_1, $legendText="External user")
|
|
|
UpdateElementStyle("system", $bgColor=$COLOR_A_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_A_2, $sprite="robot", $legendText="Our chatbot based system")
|
|
|
UpdateElementStyle("external_system", $bgColor=$COLOR_B_4, $fontColor=$COLOR_NEUTRAL, $borderColor=$COLOR_B_2, $legendText="External system")
|
|
|
UpdateRelStyle($lineColor=$COLOR_REL_LINE, $textColor=$COLOR_REL_TEXT)
|
|
|
' >>>>> end of section
|
|
|
|
|
|
Person(customer, "Personal Banking Customer")
|
|
|
System(banking_system, "Internet Banking System")
|
|
|
|
|
|
System_Ext(mail_system, "E-mail system")
|
|
|
System_Ext(mainframe, "Mainframe Banking System")
|
|
|
|
|
|
Rel(customer, banking_system, "Uses")
|
|
|
Rel_Back(customer, mail_system, "Sends e-mails to")
|
|
|
Rel_Neighbor(banking_system, mail_system, "Sends e-mails")
|
|
|
Rel(banking_system, mainframe, "Uses")
|
|
|
|
|
|
SHOW_LEGEND()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/dLLTRvj047pdLrnff3fIOcFinAYggmGNjP4SE_A7sZTqS8j1EJZhxcYIVzyzm35Ed4OAVZ2UsLrcvvRrbT9KwZBdrgUiY7d9WAHQRzNNNa_IX-ucqsaPbGfaB0eDXUx68kzjEIrCphdIZ6THRp8ylpFG-dRQ--js-uEkWrWuCIcFkhirvQqlv9kvY4upHHJ4EXC5YKN96Oc0A2qaC98LX2AvfP9g84d6WT224GaeeMOv9qAd80dBw4RIN14j11RFD66GP0KeKi23kQSbr_W0BgGwm-Wa0OaDF3DgApEDqQO-XmtWb_NfP3AVpXVXTNX1niJ-F4e6aUFPBNnOuT7WmdCks_YWmi7ntFwmZRiLdh38knoqyNwD0pXHgyuiMAyMrzEQ6vdFdlER7EOn2b4RhvyHkJHYRXklDNdEQ43ZDbxtS35qHvxNnkkUNUOumrRzHJ0DfpUpu6WnGww2Fwi3qbfl6HvVm257mvVwYKF7te9Keh3Fo4cqcPX36U-zHZ31MJc06ojCl90Cv8kSFX8gfKmyPCLcR6jPWgbT7-GAfsvit-3qoO9oOiRNFZsg2WEhcF1DUVu7vFcLlBQMuF5zBUf9QSYFEZJyW4EkSQYQyR4jHIJqIt_cfIHnIZLI9ABc_MeKl6FLcphz3-ZqAvr7hNgXPW6yLdB2yIq_AB8RKQna5iuhpapeAUw8x-OYvaqNoMu5MTPTTVITkCGTb8Cy8tQDe0IV5lSuNsJIS2XcMQdgH3NJc84vzRI1VivPxkGtAI4sribfnlSvmRdvlM_qCB18SBq1Xjtkxe_KHbTQob-fMYjG68PHeK_Z-rReeP8bcg88L7hCHcroPf1jKZorL-t-9xjEFPRnt52Zobh-clyEfy7FOFQZSsfTOHNyf_W7)
|
|
|
|
|
|
## Element and Relationship properties
|
|
|
|
|
|
A model can be extended with (a table of) properties that concrete deployments or more detailed concepts can be documented:
|
|
|
|
|
|
- `SetPropertyHeader(col1Name, ?col2Name, ?col3Name, ?col4Name)`
|
|
|
The properties table can have up to 4 columns. The default header uses the column names "Name", "Description".
|
|
|
- `WithoutPropertyHeader()`
|
|
|
If no header is used, then the second column is bold.
|
|
|
- `AddProperty(col1, ?col2, ?col3, ?col4)`
|
|
|
(All columns of) a property which will be added to the next element.
|
|
|
|
|
|
Following sample uses all 3 different property definitions (and the aligned deployment node).
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Deployment.puml
|
|
|
|
|
|
' default header Property, Value
|
|
|
AddProperty("Name", "Flash")
|
|
|
AddProperty("Organization", "Zootopia")
|
|
|
AddProperty("Tool", "Internet Explorer 7.0")
|
|
|
Person(personAlias, "Label", "Optional Description (with default property header)")
|
|
|
|
|
|
SetPropertyHeader("Property","Value", "Description")
|
|
|
AddProperty("Prop1", "Value1", "Details1")
|
|
|
AddProperty("Prop2", "Value2", "Details2")
|
|
|
Deployment_Node_L(nodeAlias, "Label", "Optional Type", "Optional Description (with custom property header)") {
|
|
|
|
|
|
WithoutPropertyHeader()
|
|
|
AddProperty("PropC1", "ValueC1")
|
|
|
AddProperty("PropC2", "ValueC2")
|
|
|
Container(containerAlias, "Label", "Technology", "Optional Description (without property header)")
|
|
|
}
|
|
|
|
|
|
System(systemAlias, "Label", "Optional Description (without properties)")
|
|
|
|
|
|
' starting with v.2.5.0 relationships support properties too
|
|
|
WithoutPropertyHeader()
|
|
|
AddProperty("PropC1", "ValueC1")
|
|
|
AddProperty("PropC2", "ValueC2")
|
|
|
Rel(personAlias, containerAlias, "Label", "Optional Technology", "Optional Description")
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/bLDHRzCm47xFhp1vMIfrIHj0I3njoa0WbQs20X8lbPiSZIN7PzcNZO3uxvpDkdPTIyMJxVDttztt-NpXIJhgEvqyKwRMVGEY9RB-TL4uUPUl5RNzglVWQZG4Xl8Qky9gQKBEkQT6grLHlJYVXz3d3xFYjiodp_C9nvPNO3KENSYoeK9o9XhuBdjDeWNPW1DpXnOS3MFnHUeUaikcsOIoz5fsa8v5-bPBtwQZnvStRYsD-Yb9eGcWRuY4Libzt09HX_lttBqpGEBD3sxASUrN-OJ1St0UJMRZSgcLz0oUoHN4h1iR-AKML-1hf-99P7TioeCIUr_gNjA8EPDFG9iEtiLebcxEwJYDKWFx3kb-ss4t3PW8dlv5arJQJmz1omTekGCj6RfzW-KrDh2SPOQNuq8NWuKJoklU4tO7X8jVIIB4LyPWls_0Y6-Uj5rj9LP1ro78LbfLHaZ5WoYLOSvwitiYPm5rQr3ZUlYt5kxpq0F-vYSSF46N-RZynrpiC2hmSHhEHFnZogn5zEysB_EN-KGuq75ylV2zjUXs4mKX9iUSFEdZIHS_WduyyiUjt4x6IK-P-09Cmr_z3m==)
|
|
|
|
|
|
## Version information
|
|
|
|
|
|
C4-PlantUML offers version information like PlantUML with its `%version()` call.
|
|
|
|
|
|
- `C4Version()`: Current C4-PlantUML version (e.g. `2.4.0beta1`).
|
|
|
- `C4VersionDetails()`: (Floating) version details with the current PlantUML and C4-PlantUML version. (It can be referenced via the alias `C4VersionDetailsArea`.)
|
|
|
|
|
|
```plantuml
|
|
|
@startuml
|
|
|
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/v2.13.0/C4_Container.puml
|
|
|
|
|
|
' existing plantuml version as text
|
|
|
%version()
|
|
|
|
|
|
' new C4-Plantuml version as text
|
|
|
C4Version()
|
|
|
|
|
|
' new C4-Plantuml version details (incl. PlantUML version) as table
|
|
|
C4VersionDetails()
|
|
|
|
|
|
' version functions used in e.g. footer
|
|
|
footer drawn with PlantUML v. %version() and C4-PlantUML v. C4Version()
|
|
|
@enduml
|
|
|
```
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/ZL0nRW8n4EpzYaqH0GKsIQXI8LtA8D64DlATbyEIMP_iDSVpOtEnk295AbkpCxCxiuki0wUB4q-MEfSCmfbvYEzA1JtAtl8vjIbYw3mn4ilENzJWD1NDEh9njbNDTdqeqDV-KrrVvSkRt6JikyaIRGc37Ce2iG2ysSYMUgWESCKGhIVG4HXlB9v_WUMgy0b7gEP_i44qs-D_-0Rp8Ix2icIKK8-jyzNTKBSE7uOVasJohJwdH1tdJuHSYG5BWBANSFAUCOZf0PEB8nXpSxD54Xx9G9E1MMTbEW-oGpBv-Xy=)
|
|
|
|
|
|
## 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).
|
|
|
|
|
|
Project level snippets are now supported in [VSCode 1.28](https://code.visualstudio.com/updates/v1_28#_project-level-snippets).
|
|
|
Just include the `C4.code-snippets` file in the `.vscode` folder of your project.
|
|
|
|
|
|
It is possible to save them directly inside VS Code: [Creating your own snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_creating-your-own-snippets).
|
|
|
|
|
|
|
|
|
|
|
|
## Live Templates for IntelliJ
|
|
|
|
|
|
### Prerequisites
|
|
|
|
|
|
Download and install [Graphviz](https://graphviz.gitlab.io/download/) plus the [PlantUML Integration for IntelliJ](https://plugins.jetbrains.com/plugin/7017-plantuml-integration).
|
|
|
|
|
|
OR
|
|
|
|
|
|
Install the [AsciiDoc plugin for IntelliJ](https://plugins.jetbrains.com/plugin/7391-asciidoc) if you work with AsciiDoc files rather than `.puml` files.
|
|
|
|
|
|
### Install
|
|
|
|
|
|
1. Download [IntelliJ live template](intellij/c4_live_template.zip).
|
|
|
2. Select `File | Manage IDE Settings | Import Settings` from the IntelliJ IDEA menu.
|
|
|
3. Specify the path to the downloaded ZIP file: `c4_live_template.zip`.
|
|
|
4. In the Import Settings dialog, select the Live templates checkbox and click OK.
|
|
|
5. Restart IntelliJ.
|
|
|
|
|
|
Alternatively
|
|
|
|
|
|
1. Download [IntelliJ live template](intellij/c4_live_template.zip) ZIP file.
|
|
|
2. Unzip it and copy its `c4.xml` to the `/template` directory in the [IntelliJ settings directory](https://intellij-support.jetbrains.com/hc/en-us/articles/206544519-Directories-used-by-the-IDE-to-store-settings-caches-plugins-and-logs).
|
|
|
3. Restart IntelliJ.
|
|
|
|
|
|
### Usage
|
|
|
|
|
|
- Create new PlantUML file (.puml).
|
|
|
- Type `c4_` for displaying artifacts templates for C4-PlantUML
|
|
|
- Live template create correct C4 model artifact with stubbed arguments.
|
|
|
- E.g. alias, label, type, technology, description
|
|
|
- Replace stubbed arguments with desired values.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Advanced Samples
|
|
|
|
|
|
The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](https://simonbrown.je/).
|
|
|
|
|
|
The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4CoreDiagrams.md).
|
|
|
|
|
|
### techtribes.js
|
|
|
|
|
|
Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml)
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/ZLNVSviu47xdhzZpIyaCnObpRMRkgKwS9kqvFnhmPVh425ZRQWNY9177StF_UrS2OuZRIVrWn6gr-tsxtueFsZ1bwaB0o62sDegdgB_faVS7BpDHvmXhOohzrtYis2PSSREkqrgZocHfi3HX9ejn9LXfGxpL9XSy7L_y-VRUcXOty_7J93mv3O_9bbpG4SPBL655pjuRg4iwNL0KC6k4fHH2RdYv0a5EmCeS1jjSQLf9eEmWPCQ4s5AC3kPX0cy-_NgtY9FuxZwPtJtU-aVUczOqZPBexyluuffihUdnKtoTp2-lBczdPFIyUrHQbidbi_5PASjj8MkTMEO1ZAOx0op8C3fgdNssMYbSCODvvzbPNhhc1I-vDeePJcbsxWFhxeWNRRN18ZcNTPapjVMpaw3Vhf3wTVIV1_HpVrqT_0sc2Qigydx45APL9NZcGe_8z9aziG2YIjcQt_np4K0i2zg6i_3PxazjFxIjjzAsy4ySDr2Xh0G6q6GEeDL10FX43p9yaodzeyb2M2fPkDwvTe45743EIKJqPllxAGQDcP6Ev03vBFKLYYHF2SS32eUP3isOOIdJQE7TRAClStWNlclGHXG6zG4-zuG2YvHOh3cLWf9_ro_nfYnVMVShRgxh51HMicLn0CrVSe7QTOJIVgGNQFfZKNoSngUJ7XoDJ6Lhu6MEpwX_HhEK-bz11swbfMC9WZlhACfo9MVdC0ad0vAki0zHD9uQMYmHSmr-AkGA2BRHHwwuPeDe3bFwTPMJ7gtQ5irgfmKuirvQ4Y5IogXpeA8gwKW7RT1XdTfHTJe0KYq3dQqnhmM9dfh5BOR_En7RWJ8RRXe8SRCYZzvsSylGRfDbk6bf4e3HkNrQTXxfus14zyAd6TAMotKStqVaxxnVpkahxZ-RrLyVSMUwxPwCMTwspXPiexWjhP6khr_cuy-pSnh1IYe3fwV7xzlSNPo1wlQnNhhjvDJpw0bfmnNQRXgPIT4ccvmTdvori9F5NXwl0C-jKbz1tmytmF_OaJ_mEoHmMAxVfREFkbVS5Ubt9sYQowLKHNFPxcUcArjV15selJgjwo12Aci3LPtIBKi3GHybDn-SXfRZAr5tidP1TyDKQtirqw0xSBrXxuUoNETicpnqD-Q-rBJr0SkSleO_00==)
|
|
|
|
|
|
### Message Bus and Microservices
|
|
|
|
|
|
Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml)
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/ZLNRRjiu47ttLynw5rW7SEnDswS20UeRjYsSnBLizAM0CQ9ecIX52YJbn2tsttT8sRBaA4ZyOd74EUVCLP-iG-EAJ7R-48h98k6mSowt7uT3Wu-3LBXT4HUM6wQLuyeDcCw6kKJbVQwjIwI8XvCFrmjlMj_DX_jtWvltWt_8jfcG2mh5pI3t17z3eSWx8nHmEmvRBQL-52e5IPS0LGADry9OUj90x20rGoaFX579V4xG6IN9J7AFiCAqryq4CphYPYyOx_RXBxl3dD_EHBfpaKXu4lbpxuhUnEb4IsrkknDjr9PKSJEMHN3Q4iVnvUDEk62JFEKgMV4dTrkIW2rPVYZkqS5w-ExLfI3hjC6qfcMf2qKtn_gfHOiCGdyUNbHorUb4dn--RnQpPVHmltbOh-PVxcSzCY-uiLhrM46C6JTzc5HFtH6Sp07WO1tFDcCl1CsXnsxeokasV55RRJ9qGglk5Vpk0FsgfFSmp-kNHtak1Iila_qhxj4o8tBNXv5A2ud6cqU-wBRIO7s5CrIK5bzrOI0tUYkaZwx9TlBO77DTfpuNET3s8SgDRwonriuRLzHFkHRKMNeBo1YtbjhFL2f0r0AbL3jCBTn2iuCk1MM4Gh8tD1v4SLUUO5nOpxZ4E1RkxbjWDwXiheqBd7ITt4a0trDVs6UmXlkhfBuMwF9agqUwBEA3_vyOZevRK3u2AInF8467WQm2WxmmkRRSlZayB1BXQXf6_bpdd_mv7DpFLlvnOVIUMjw2DYagOKCYhn_910762zWY4v8UtovX6f-BdiJrUayflXXjaF5Wa4aED--OFqKqOjo-MjZJ93vdFAS_K9upN-UyEqJVvZKwF2N_5oL_JrrDTA7Lf3pNkoeA9h3Jx9NQlA3mL1RFUowAFtavCzzIv-DHNIq7WB4ktB7rQE3GmGxtjFDfbhcYdTMguBzEPydbPbfRAENihqlHtS-hrIBowwIy5bwspEiwJqAdjbK7V9fI3uRse5WVlj9E6pQ0roqxeDGHqJgsLLJQetpdSQJPJ-x8-oNdvWIN89Ms8eYjWGQS5fHcZnvp7eejoaKu7K-E8JHtHjkalqr40-PoK5-721Wjx1UzVn5AINt1rcp7eyUHA_XqvdZOBDlO6aYdRzbyzk_iVahVi4yK1NtK_mS=)
|
|
|
|
|
|
### (C4 styled) Sequence diagram sample
|
|
|
|
|
|
TODO: better sample is missing ...
|
|
|
|
|
|
Source: [C4_Sequence Diagram Sample - complex.puml](samples/C4_Sequence%20Diagram%20Sample%20-%20complex.puml)
|
|
|
|
|
|
[](https://www.plantuml.com/plantuml/uml/hL9TRzGm47pthzZsgPLeSeNoKkca7cq5IALKTw0-LZvdGrRTs26xFYH-FUjSFuGe1IGi9LOcEpExOv-8-b5ppsv7E-mHJezkSYJ51jenzT2f3d9SrwF_LdqXxV8w2uuXHSMeLKXzFR2FHU10j65QrwT71rS5-lpXejwyh0vVLRDwaXQtGp5mRl0_gLghA_oQCGQiXZA2ky9HKjnRC0Ly0RlJlhj_3xz9QmFjRP3pGMdZ5S6-dLiYtxEsLOjiFKUbu9LIX6Nn4Ps8h20v11HfCqFmWWvi5Oc9--3-iyJ2A8FbQXh8WY39qhwbs41geVN4UTmASKe37CvcCr0ggS7T-gN7iyiLB5Hzk3NDKe6nSULn8xQGDZZ2OpqS0zcvFZ5gXyofJFR0Af40VEf8RBm8QuGK3H2qdvw1ALfRPWJ6S6u-X_UcJ9xf-tRK-VnV4lrJS4kK8KKf1rcybZYWqZC-CHbz1F_NVlvtZ4VVgghWDVGKiw80sxqPmR0dx8Dd5jYGXw5BSIAltdsylhauVtj-URQtxquiEBkiFm0=)
|
|
|
|
|
|
## Background
|
|
|
|
|
|
[PlantUML](https://plantuml.com/) is an open source project that allows you to create UML diagrams.
|
|
|
Diagrams are defined using a simple and intuitive language.
|
|
|
Images can be generated in PNG, in SVG or in LaTeX format.
|
|
|
|
|
|
PlantUML was created to allow the drawing of UML diagrams, using a simple and human readable text description.
|
|
|
Because it does not prevent you from drawing inconsistent diagrams, it is a drawing tool and not a modeling tool.
|
|
|
It is the most used text-based diagram drawing tool with [extensive support into wikis and forums, text editors and IDEs, use by different programming languages and documentation generators](https://plantuml.com/running).
|
|
|
|
|
|
The [C4 model](https://c4model.com/) for software architecture is an "abstraction-first" approach to diagramming, based upon abstractions that reflect how software architects and developers think about and build software.
|
|
|
The small set of abstractions and diagram types makes the C4 model easy to learn and use.
|
|
|
C4 stands for context, containers, components, and code — a set of hierarchical diagrams that you can use to describe your software architecture at different zoom levels, each useful for different audiences.
|
|
|
|
|
|
The C4 model was created as a way to help software development teams describe and communicate software architecture, both during up-front design sessions and when retrospectively documenting an existing codebase.
|
|
|
|
|
|
More information can be found here:
|
|
|
|
|
|
- [The C4 model for software architecture](https://c4model.com/)
|
|
|
- [REAL WORLD PlantUML - Sample Gallery](https://real-world-plantuml.com/)
|
|
|
- [Visualising and documenting software architecture cheat sheets](https://www.codingthearchitecture.com/2017/04/27/visualising_and_documenting_software_architecture_cheat_sheets.html)
|
|
|
- [PlantUML and Structurizr - Create models not diagrams](https://www.codingthearchitecture.com/2016/12/08/plantuml_and_structurizr.html)
|
|
|
|
|
|
## License
|
|
|
|
|
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
|