mirror of
https://github.com/plantuml-stdlib/C4-PlantUML.git
synced 2022-10-18 01:14:54 +00:00
updated readme to include custom icons
This commit is contained in:
Adrian Lupu
+33
-4
@@ -28,7 +28,8 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Using `LAYOUT_LEFT_RIGHT`
|
||||
|
||||
@@ -49,7 +50,8 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## LAYOUT_WITH_LEGEND()
|
||||
|
||||
@@ -76,7 +78,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## LAYOUT_AS_SKETCH()
|
||||
@@ -110,4 +112,31 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## HIDE_STEREOTYPE()
|
||||
|
||||
To enable a layout without `<<stereotypes>>` and legend.
|
||||
This can be enabled with `HIDE_STEREOTYPE()`.
|
||||
|
||||
```csharp
|
||||
@startuml HIDE_STEREOTYPE Sample
|
||||
!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml
|
||||
|
||||
HIDE_STEREOTYPE()
|
||||
|
||||
Person(admin, "Administrator")
|
||||
System_Boundary(c1, 'Sample') {
|
||||
Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
|
||||
}
|
||||
System(twitter, "Twitter")
|
||||
|
||||
Rel(admin, web_app, "Uses", "HTTPS")
|
||||
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
# C4-PlantUML
|
||||
|
||||
> PlantUML version 1.2020.07
|
||||
>
|
||||
> I apologize for any current breaking diagrams. It's hard to keep up with the online plantuml server version.
|
||||
>
|
||||
> For better control I recommend cloning the local branch and including the files localy with your diagrams
|
||||
|
||||
|
||||
|
||||
|
||||
C4-PlantUML combines the benefits of [PlantUML](http://en.plantuml.com/) and the [C4 model](https://c4model.com/) for providing a simple way of describing and communicate software architectures – especially during up-front design sessions – with an intuitive language using open source and platform independent tools.
|
||||
|
||||
@@ -57,7 +51,7 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
In addition to this, it is also possible to define a system or component boundary.
|
||||
|
||||
@@ -78,7 +72,38 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Entities can also be decorated with icons using the last parameter, for example:
|
||||
|
||||
```cs
|
||||
@startuml
|
||||
!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Container.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include 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", "users")
|
||||
Container(spa, "SPA", "angular", "The main interface that the customer interacts with", "angular")
|
||||
Container(api, "API", "java", "Handles all business logic", "java")
|
||||
ContainerDb(db, "Database", "Microsoft SQL", "Holds product, order and invoice information", "msql_server")
|
||||
|
||||
Rel(user, spa, "Uses", "https")
|
||||
Rel(spa, api, "Uses", "https")
|
||||
Rel_R(api, db, "Reads/Writes")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Supported Diagram Types
|
||||
|
||||
@@ -118,6 +143,7 @@ C4-PlantUML also comes with some layout options to make it easy and reuseable to
|
||||
* [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right)
|
||||
* [LAYOUT_WITH_LEGEND()](LayoutOptions.md#layout_with_legend)
|
||||
* [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch)
|
||||
* [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype)
|
||||
|
||||
## Advanced Samples
|
||||
|
||||
@@ -129,14 +155,15 @@ The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) a
|
||||
|
||||
Source: [C4_Container Diagram Sample - techtribesjs.puml](samples/C4_Container%20Diagram%20Sample%20-%20techtribesjs.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Message Bus and Microservices
|
||||
|
||||
Source: [C4_Container Diagram Sample - message bus.puml](samples/C4_Container%20Diagram%20Sample%20-%20message%20bus.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Background
|
||||
|
||||
|
||||
@@ -8,13 +8,14 @@ The following samples are reproductions with C4-PlantUML from [C4 model core dia
|
||||
|
||||
Source: [C4_Context Diagram Sample - bigbankplc.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Container Diagram
|
||||
|
||||
Source: [C4_Container Diagram Sample - bigbankplc.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Component Diagram
|
||||
@@ -22,7 +23,8 @@ Source: [C4_Container Diagram Sample - bigbankplc.puml](C4_Container%20Diagram%2
|
||||
Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%20Sample%20-%20bigbankplc.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Supplementary Diagrams
|
||||
|
||||
@@ -30,16 +32,24 @@ Source: [C4_Component Diagram Sample - bigbankplc.puml](C4_Component%20Diagram%2
|
||||
|
||||
Source: [C4_Context Diagram Sample - bigbankplc-landscape.puml](C4_Context%20Diagram%20Sample%20-%20bigbankplc-landscape.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
### Dynamic Diagram
|
||||
|
||||
Source: [C4_Dynamic Diagram Sample - bigbankplc.puml](C4_Dynamic%20Diagram%20Sample%20-%20bigbankplc.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
### Deployment Diagram
|
||||
|
||||
Source: [C4_Deployment Diagram Sample - bigbankplc.puml](C4_Deployment%20Diagram%20Sample%20-%20bigbankplc.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Icons
|
||||
|
||||
Source: [C4_Container Diagram Sample - bigbankplc-icons.puml](C4_Container%20Diagram%20Sample%20-%20bigbankplc-icons.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
@startuml
|
||||
!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/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
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Container.puml
|
||||
!include DEVICONS/angular.puml
|
||||
!include DEVICONS/dotnet.puml
|
||||
!include DEVICONS/java.puml
|
||||
!include DEVICONS/msql_server.puml
|
||||
!include FONTAWESOME/server.puml
|
||||
!include FONTAWESOME/envelope.puml
|
||||
|
||||
' LAYOUT_TOP_DOWN()
|
||||
' LAYOUT_AS_SKETCH()
|
||||
LAYOUT_WITH_LEGEND()
|
||||
|
||||
title Container diagram for Internet Banking System
|
||||
|
||||
Person(customer, Customer, "A customer of the bank, with personal bank accounts")
|
||||
|
||||
System_Boundary(c1, "Internet Banking") {
|
||||
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA", "java")
|
||||
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser", "angular")
|
||||
Container(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device", "dotnet")
|
||||
ContainerDb(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.", "msql_server")
|
||||
Container(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API", "server")
|
||||
}
|
||||
|
||||
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", "envelope")
|
||||
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
Rel(customer, web_app, "Uses", "HTTPS")
|
||||
Rel(customer, spa, "Uses", "HTTPS")
|
||||
Rel(customer, mobile_app, "Uses")
|
||||
|
||||
Rel_Neighbor(web_app, spa, "Delivers")
|
||||
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
|
||||
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
|
||||
Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "sync, JDBC")
|
||||
|
||||
Rel_Back(customer, email_system, "Sends e-mails to")
|
||||
Rel_Back(email_system, backend_api, "Sends e-mails using", "sync, SMTP")
|
||||
Rel_Neighbor(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
|
||||
@enduml
|
||||
Reference in New Issue
Block a user