mirror of
https://github.com/plantuml-stdlib/C4-PlantUML.git
synced 2022-10-18 01:14:54 +00:00
Merge pull request #1 from adrianvlupu/master
Added C4 Context and Component Diagrams, split all abstractions into different files
This commit is contained in:
Ricardo Niepel
Vendored
+206
@@ -0,0 +1,206 @@
|
||||
{
|
||||
"C4_Person": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Person",
|
||||
"body": [
|
||||
"Person(${1:alias}, \"${2:label}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Person to C4 diagram"
|
||||
},
|
||||
"C4_Person_Descr": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Person with Description",
|
||||
"body": [
|
||||
"Person(${1:alias}, \"${2:label}\", \"${3:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Person with Description to C4 diagram"
|
||||
},
|
||||
"C4_Person_Ext": {
|
||||
"scope": "diagram",
|
||||
"prefix": [
|
||||
"External Person",
|
||||
"Person (External)"
|
||||
],
|
||||
"body": [
|
||||
"Person_Ext(${1:alias}, \"${2:label}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add External Person to C4 diagram"
|
||||
},
|
||||
"C4_Person_Ext_Descr": {
|
||||
"scope": "diagram",
|
||||
"prefix": [
|
||||
"External Person with Description",
|
||||
"Person (External) with Description"
|
||||
],
|
||||
"body": [
|
||||
"Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add External Person with Description to C4 diagram"
|
||||
},
|
||||
"C4_Container": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Container",
|
||||
"body": [
|
||||
"Container(${1:alias}, \"${2:label}\", \"${3:technology}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Container to C4 diagram"
|
||||
},
|
||||
"C4_Container_Descr": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Container with Description",
|
||||
"body": [
|
||||
"Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Container with Description to C4 diagram"
|
||||
},
|
||||
"C4_Container_Boundary": {
|
||||
"scope": "diagram",
|
||||
"prefix": [
|
||||
"Container Boundary",
|
||||
"Boundary for Container"
|
||||
],
|
||||
"body": [
|
||||
"Container_Boundary(${1:alias}, \"${2:label}\"){",
|
||||
"\t$0",
|
||||
"}"
|
||||
],
|
||||
"description": "Add a Container Boundary to C4 diagram"
|
||||
},
|
||||
"C4_Component": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Component",
|
||||
"body": [
|
||||
"Component(${1:alias}, \"${2:label}\", \"${3:technology}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Component to C4 diagram"
|
||||
},
|
||||
"C4_Component_Descr": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Component with Description",
|
||||
"body": [
|
||||
"Component(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Component with Description to C4 diagram"
|
||||
},
|
||||
"C4_System": {
|
||||
"scope": "diagram",
|
||||
"prefix": "System",
|
||||
"body": [
|
||||
"System(${1:alias}, \"${2:label}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add System to C4 diagram"
|
||||
},
|
||||
"C4_System_Descr": {
|
||||
"scope": "diagram",
|
||||
"prefix": "System with Description",
|
||||
"body": [
|
||||
"System(${1:alias}, \"${2:label}\", \"${3:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add System with Description to C4 diagram"
|
||||
},
|
||||
"C4_System_Ext": {
|
||||
"scope": "diagram",
|
||||
"prefix": [
|
||||
"External System",
|
||||
"System (External)"
|
||||
],
|
||||
"body": [
|
||||
"System_Ext(${1:alias}, \"${2:label}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add External System to C4 diagram"
|
||||
},
|
||||
"C4_System_Ext_Descr": {
|
||||
"scope": "diagram",
|
||||
"prefix": [
|
||||
"External System with Description",
|
||||
"System (External) with Description"
|
||||
],
|
||||
"body": [
|
||||
"System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add External System with Description to C4 diagram"
|
||||
},
|
||||
"C4_System_Boundary": {
|
||||
"scope": "diagram",
|
||||
"prefix": [
|
||||
"System Boundary",
|
||||
"Boundary for System"
|
||||
],
|
||||
"body": [
|
||||
"System_Boundary(${1:alias}, \"${2:label}\"){",
|
||||
"\t$0",
|
||||
"}"
|
||||
],
|
||||
"description": "Add a System Boundary to C4 diagram"
|
||||
},
|
||||
"C4_Relationship": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Relationship",
|
||||
"body": [
|
||||
"Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add unidirectional Relationship to C4 diagram"
|
||||
},
|
||||
"C4_Relationship_Techn": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Relationship with Technology",
|
||||
"body": [
|
||||
"Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add unidirectional Relationship with Technology to C4 diagram"
|
||||
},
|
||||
"C4_Layout_Right": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Layout to Right side",
|
||||
"body": [
|
||||
"Lay_R(${1:from_alias}, ${2:to_alias})",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add hidden layout line to put {to} to the right of {from}"
|
||||
},
|
||||
"C4_Layout_Left": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Layout to Left side",
|
||||
"body": [
|
||||
"Lay_L(${1:from_alias}, ${2:to_alias})",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add hidden layout line to put {to} to the left of {from}"
|
||||
},
|
||||
"C4_Boundary": {
|
||||
"scope": "diagram",
|
||||
"prefix": "Boundary",
|
||||
"body": [
|
||||
"Boundary(${1:alias}, \"${2:label}\"){",
|
||||
"\t$0",
|
||||
"}"
|
||||
],
|
||||
"description": "Add a generic boundary to C4 diagram."
|
||||
},
|
||||
"C4_Boundary_Type": {
|
||||
"scope": "diagram",
|
||||
"prefix": [
|
||||
"Boundary with type"
|
||||
]
|
||||
"body": [
|
||||
"Boundary(${1:alias}, \"${2:label}\", \"${3:type}\"){",
|
||||
"\t$0",
|
||||
"}"
|
||||
],
|
||||
"description": "Add a generic boundary to C4 diagram."
|
||||
}
|
||||
}
|
||||
Vendored
-86
@@ -1,86 +0,0 @@
|
||||
{
|
||||
"C4_Person": {
|
||||
"prefix": "Person",
|
||||
"body": [
|
||||
"Person(${1:alias}, \"${2:label}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Person to C4 diagram"
|
||||
},
|
||||
"C4_Person_Descr": {
|
||||
"prefix": "Person with Description",
|
||||
"body": [
|
||||
"Person(${1:alias}, \"${2:label}\", \"${3:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Person with Description to C4 diagram"
|
||||
},
|
||||
|
||||
"C4_Container": {
|
||||
"prefix": "Container",
|
||||
"body": [
|
||||
"Container(${1:alias}, \"${2:label}\", \"${3:technology}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Container to C4 diagram"
|
||||
},
|
||||
"C4_Container_Descr": {
|
||||
"prefix": "Container with Description",
|
||||
"body": [
|
||||
"Container(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add Container with Description to C4 diagram"
|
||||
},
|
||||
|
||||
"C4_System": {
|
||||
"prefix": "System",
|
||||
"body": [
|
||||
"System(${1:alias}, \"${2:label}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add System to C4 diagram"
|
||||
},
|
||||
"C4_System_Descr": {
|
||||
"prefix": "System with Description",
|
||||
"body": [
|
||||
"System(${1:alias}, \"${2:label}\", \"${3:description}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add System with Description to C4 diagram"
|
||||
},
|
||||
|
||||
"C4_Relationship": {
|
||||
"prefix": "Relationship",
|
||||
"body": [
|
||||
"Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add unidirectional Relationship to C4 diagram"
|
||||
},
|
||||
"C4_Relationship_Techn": {
|
||||
"prefix": "Relationship with Technology",
|
||||
"body": [
|
||||
"Rel(${1:from_alias}, ${2:to_alias}, \"${3:label}\", \"${4:technology}\")",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add unidirectional Relationship with Technology to C4 diagram"
|
||||
},
|
||||
|
||||
"C4_Layout_Right": {
|
||||
"prefix": "Layout to Right side",
|
||||
"body": [
|
||||
"Lay_R(${1:from_alias}, ${2:to_alias})",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add hidden layout line to put {to} to the right of {from}"
|
||||
},
|
||||
"C4_Layout_Left": {
|
||||
"prefix": "Layout to Left side",
|
||||
"body": [
|
||||
"Lay_L(${1:from_alias}, ${2:to_alias})",
|
||||
"$0"
|
||||
],
|
||||
"description": "Add hidden layout line to put {to} to the left of {from}"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
' Colors
|
||||
' ##################################
|
||||
|
||||
!define ELEMENT_FONT_COLOR #FFFFFF
|
||||
|
||||
' Styling
|
||||
' ##################################
|
||||
|
||||
!define TECHN_FONT_SIZE 12
|
||||
|
||||
skinparam defaultTextAlignment center
|
||||
|
||||
skinparam wrapWidth 200
|
||||
skinparam maxMessageSize 150
|
||||
|
||||
skinparam rectangle {
|
||||
StereotypeFontSize 12
|
||||
shadowing false
|
||||
}
|
||||
|
||||
skinparam Arrow {
|
||||
Color #666666
|
||||
FontColor #666666
|
||||
FontSize 12
|
||||
}
|
||||
|
||||
skinparam rectangle<<boundary>> {
|
||||
Shadowing false
|
||||
StereotypeFontSize 0
|
||||
FontSize 12
|
||||
FontColor #444444
|
||||
BorderColor #444444
|
||||
BorderStyle dashed
|
||||
}
|
||||
|
||||
' Layout
|
||||
' ##################################
|
||||
|
||||
!definelong LAYOUT_AS_SKETCH
|
||||
skinparam backgroundColor #EEEBDC
|
||||
skinparam handwritten true
|
||||
skinparam defaultFontName "Comic Sans MS"
|
||||
center footer <font color=red>Warning:</font> Created for discussion, needs to be validated
|
||||
!enddefinelong
|
||||
|
||||
!define LAYOUT_TOP_DOWN top to bottom direction
|
||||
!define LAYOUT_LEFT_RIGHT left to right direction
|
||||
|
||||
' Boundaries
|
||||
' ##################################
|
||||
|
||||
!define Boundary(e_alias, e_label) rectangle "==e_label" <<boundary>> as e_alias
|
||||
!define Boundary(e_alias, e_label, e_type) rectangle "==e_label [e_type]" <<boundary>> as e_alias
|
||||
|
||||
' Relationship
|
||||
' ##################################
|
||||
|
||||
!define Rel_(e_alias1, e_alias2, e_label, e_direction="") e_alias1 e_direction e_alias2 : "===e_label"
|
||||
!define Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") e_alias1 e_direction e_alias2 : "===e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//"
|
||||
|
||||
!define Rel(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-->")
|
||||
!define Rel(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-->")
|
||||
|
||||
!define Rel_Back(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<--")
|
||||
!define Rel_Back(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<--")
|
||||
|
||||
!define Rel_Neighbor(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "->")
|
||||
!define Rel_Neighbor(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "->")
|
||||
|
||||
!define Rel_Back_Neighbor(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<-")
|
||||
!define Rel_Back_Neighbor(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<-")
|
||||
|
||||
!define Rel_D(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-DOWN->")
|
||||
!define Rel_D(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-DOWN->")
|
||||
!define Rel_Down(e_from,e_to, e_label) Rel_D(e_from,e_to, e_label)
|
||||
!define Rel_Down(e_from,e_to, e_label, e_techn) Rel_D(e_from,e_to, e_label, e_techn)
|
||||
|
||||
!define Rel_U(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-UP->")
|
||||
!define Rel_U(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-UP->")
|
||||
!define Rel_Up(e_from,e_to, e_label) Rel_U(e_from,e_to, e_label)
|
||||
!define Rel_Up(e_from,e_to, e_label, e_techn) Rel_U(e_from,e_to, e_label, e_techn)
|
||||
|
||||
!define Rel_L(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-LEFT->")
|
||||
!define Rel_L(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-LEFT->")
|
||||
!define Rel_Left(e_from,e_to, e_label) Rel_L(e_from,e_to, e_label)
|
||||
!define Rel_Left(e_from,e_to, e_label, e_techn) Rel_L(e_from,e_to, e_label, e_techn)
|
||||
|
||||
!define Rel_R(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-RIGHT->")
|
||||
!define Rel_R(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-RIGHT->")
|
||||
!define Rel_Right(e_from,e_to, e_label) Rel_R(e_from,e_to, e_label)
|
||||
!define Rel_Right(e_from,e_to, e_label, e_techn) Rel_R(e_from,e_to, e_label, e_techn)
|
||||
|
||||
' Layout Helpers
|
||||
' ##################################
|
||||
|
||||
!define Lay_D(e_from, e_to) e_from -[hidden]D- e_to
|
||||
!define Lay_U(e_from, e_to) e_from -[hidden]U- e_to
|
||||
!define Lay_R(e_from, e_to) e_from -[hidden]R- e_to
|
||||
!define Lay_L(e_from, e_to) e_from -[hidden]L- e_to
|
||||
@@ -0,0 +1,45 @@
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Container.puml
|
||||
|
||||
' Scope: A single container.
|
||||
' Primary elements: Components within the container in scope.
|
||||
' Supporting elements: Containers (within the software system in scope) plus people and software systems directly connected to the components.
|
||||
' Intended audience: Software architects and developers.
|
||||
|
||||
' Colors
|
||||
' ##################################
|
||||
|
||||
!define COMPONENT_BG_COLOR #85BBF0
|
||||
|
||||
' Styling
|
||||
' ##################################
|
||||
|
||||
skinparam rectangle<<component>> {
|
||||
StereotypeFontColor ELEMENT_FONT_COLOR
|
||||
FontColor #000000
|
||||
BackgroundColor COMPONENT_BG_COLOR
|
||||
BorderColor #78A8D8
|
||||
}
|
||||
|
||||
' Layout
|
||||
' ##################################
|
||||
|
||||
!definelong LAYOUT_WITH_LEGEND
|
||||
hide stereotype
|
||||
legend right
|
||||
|= |= Type |
|
||||
|<PERSON_BG_COLOR> | person |
|
||||
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|
||||
|<SYSTEM_BG_COLOR> | system |
|
||||
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|
||||
|<CONTAINER_BG_COLOR> | container |
|
||||
|<COMPONENT_BG_COLOR> | component |
|
||||
endlegend
|
||||
!enddefinelong
|
||||
|
||||
' Elements
|
||||
' ##################################
|
||||
|
||||
!define Component(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<component>> as e_alias
|
||||
!define Component(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<component>> as e_alias
|
||||
+14
-100
@@ -1,38 +1,20 @@
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Context.puml
|
||||
|
||||
' Scope: A single software system.
|
||||
' Primary elements: Containers within the software system in scope.
|
||||
' Supporting elements: People and software systems directly connected to the containers.
|
||||
' Intended audience: Technical people inside and outside of the software development team; including software architects, developers and operations/support staff.
|
||||
|
||||
' Colors
|
||||
' ##################################
|
||||
|
||||
!define PERSON_BG_COLOR #08427B
|
||||
!define CONTAINER_BG_COLOR #438DD5
|
||||
!define SYSTEM_BG_COLOR #999999
|
||||
!define ELEMENT_FONT_COLOR #FFFFFF
|
||||
|
||||
' Styling
|
||||
' ##################################
|
||||
|
||||
!define TECHN_FONT_SIZE 12
|
||||
|
||||
skinparam defaultTextAlignment center
|
||||
|
||||
skinparam wrapWidth 200
|
||||
skinparam maxMessageSize 150
|
||||
|
||||
skinparam rectangle {
|
||||
StereotypeFontSize 12
|
||||
}
|
||||
|
||||
skinparam Arrow {
|
||||
Color #666666
|
||||
FontColor #666666
|
||||
FontSize 12
|
||||
}
|
||||
|
||||
skinparam rectangle<<person>> {
|
||||
StereotypeFontColor ELEMENT_FONT_COLOR
|
||||
FontColor ELEMENT_FONT_COLOR
|
||||
BackgroundColor PERSON_BG_COLOR
|
||||
BorderColor #073B6F
|
||||
}
|
||||
|
||||
skinparam rectangle<<container>> {
|
||||
StereotypeFontColor ELEMENT_FONT_COLOR
|
||||
FontColor ELEMENT_FONT_COLOR
|
||||
@@ -40,96 +22,28 @@ skinparam rectangle<<container>> {
|
||||
BorderColor #3C7FC0
|
||||
}
|
||||
|
||||
skinparam rectangle<<system>> {
|
||||
StereotypeFontColor ELEMENT_FONT_COLOR
|
||||
FontColor ELEMENT_FONT_COLOR
|
||||
BackgroundColor SYSTEM_BG_COLOR
|
||||
BorderColor #8A8A8A
|
||||
}
|
||||
|
||||
skinparam package<<boundary>> {
|
||||
StereotypeFontSize 0
|
||||
FontColor #999999
|
||||
BorderColor #cccccc
|
||||
}
|
||||
|
||||
' Layout
|
||||
' ##################################
|
||||
|
||||
!definelong LAYOUT_AS_SKETCH
|
||||
skinparam backgroundColor #EEEBDC
|
||||
skinparam handwritten true
|
||||
skinparam defaultFontName "Comic Sans MS"
|
||||
center footer <font color=red>Warning:</font> Created for discussion, needs to be validated
|
||||
!enddefinelong
|
||||
|
||||
!definelong LAYOUT_WITH_LEGEND
|
||||
hide stereotype
|
||||
legend right
|
||||
|= |= Type |
|
||||
|<PERSON_BG_COLOR> | person |
|
||||
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|
||||
|<SYSTEM_BG_COLOR> | system |
|
||||
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|
||||
|<CONTAINER_BG_COLOR> | container |
|
||||
|<SYSTEM_BG_COLOR> | external system |
|
||||
endlegend
|
||||
!enddefinelong
|
||||
|
||||
!define LAYOUT_TOP_DOWN top to bottom direction
|
||||
!define LAYOUT_LEFT_RIGHT left to right direction
|
||||
|
||||
' Elements
|
||||
' ##################################
|
||||
|
||||
!define Person(e_alias, e_label) rectangle "==e_label" <<person>> as e_alias
|
||||
!define Person(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<person>> as e_alias
|
||||
|
||||
!define Container(e_alias, e_label, e_techn) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//" <<container>> as e_alias
|
||||
!define Container(e_alias, e_label, e_techn, e_descr) rectangle "==e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//\n\n e_descr" <<container>> as e_alias
|
||||
|
||||
!define System(e_alias, e_label) rectangle "==e_label" <<system>> as e_alias
|
||||
!define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<system>> as e_alias
|
||||
|
||||
' Relationship
|
||||
' Boundaries
|
||||
' ##################################
|
||||
|
||||
!define Rel_(e_alias1, e_alias2, e_label, e_direction="") e_alias1 e_direction e_alias2 : "===e_label"
|
||||
!define Rel_(e_alias1, e_alias2, e_label, e_techn, e_direction="") e_alias1 e_direction e_alias2 : "===e_label\n//<size:TECHN_FONT_SIZE>[e_techn]</size>//"
|
||||
|
||||
!define Rel(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-->")
|
||||
!define Rel(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-->")
|
||||
|
||||
!define Rel_Back(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<--")
|
||||
!define Rel_Back(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<--")
|
||||
|
||||
!define Rel_Neighbor(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "->")
|
||||
!define Rel_Neighbor(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "->")
|
||||
|
||||
!define Rel_Back_Neighbor(e_to, e_from, e_label) Rel_(e_to, e_from, e_label, "<-")
|
||||
!define Rel_Back_Neighbor(e_to, e_from, e_label, e_techn) Rel_(e_to, e_from, e_label, e_techn, "<-")
|
||||
|
||||
!define Rel_D(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-DOWN->")
|
||||
!define Rel_D(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-DOWN->")
|
||||
!define Rel_Down(e_from,e_to, e_label) Rel_D(e_from,e_to, e_label)
|
||||
!define Rel_Down(e_from,e_to, e_label, e_techn) Rel_D(e_from,e_to, e_label, e_techn)
|
||||
|
||||
!define Rel_U(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-UP->")
|
||||
!define Rel_U(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-UP->")
|
||||
!define Rel_Up(e_from,e_to, e_label) Rel_U(e_from,e_to, e_label)
|
||||
!define Rel_Up(e_from,e_to, e_label, e_techn) Rel_U(e_from,e_to, e_label, e_techn)
|
||||
|
||||
!define Rel_L(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-LEFT->")
|
||||
!define Rel_L(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-LEFT->")
|
||||
!define Rel_Left(e_from,e_to, e_label) Rel_L(e_from,e_to, e_label)
|
||||
!define Rel_Left(e_from,e_to, e_label, e_techn) Rel_L(e_from,e_to, e_label, e_techn)
|
||||
|
||||
!define Rel_R(e_from,e_to, e_label) Rel_(e_from,e_to, e_label, "-RIGHT->")
|
||||
!define Rel_R(e_from,e_to, e_label, e_techn) Rel_(e_from,e_to, e_label, e_techn, "-RIGHT->")
|
||||
!define Rel_Right(e_from,e_to, e_label) Rel_R(e_from,e_to, e_label)
|
||||
!define Rel_Right(e_from,e_to, e_label, e_techn) Rel_R(e_from,e_to, e_label, e_techn)
|
||||
|
||||
' Layout Helpers
|
||||
' ##################################
|
||||
|
||||
!define Lay_D(e_from, e_to) e_from -[hidden]D- e_to
|
||||
!define Lay_U(e_from, e_to) e_from -[hidden]U- e_to
|
||||
!define Lay_R(e_from, e_to) e_from -[hidden]R- e_to
|
||||
!define Lay_L(e_from, e_to) e_from -[hidden]L- e_to
|
||||
!define Container_Boundary(e_alias, e_label) rectangle "==e_label [Container]" <<boundary>> as e_alias
|
||||
@@ -0,0 +1,81 @@
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4.puml
|
||||
|
||||
' Scope: A single software system.
|
||||
' Primary elements: The software system in scope.
|
||||
' Supporting elements: People and software systems directly connected to the software system in scope.
|
||||
' Intended audience: Everybody, both technical and non-technical people, inside and outside of the software development team.
|
||||
|
||||
' Colors
|
||||
' ##################################
|
||||
|
||||
!define PERSON_BG_COLOR #08427B
|
||||
!define EXTERNAL_PERSON_BG_COLOR #686868
|
||||
!define SYSTEM_BG_COLOR #1168BD
|
||||
!define EXTERNAL_SYSTEM_BG_COLOR #999999
|
||||
|
||||
' Styling
|
||||
' ##################################
|
||||
|
||||
skinparam rectangle<<person>> {
|
||||
StereotypeFontColor ELEMENT_FONT_COLOR
|
||||
FontColor ELEMENT_FONT_COLOR
|
||||
BackgroundColor PERSON_BG_COLOR
|
||||
BorderColor #073B6F
|
||||
}
|
||||
|
||||
skinparam rectangle<<external_person>> {
|
||||
StereotypeFontColor ELEMENT_FONT_COLOR
|
||||
FontColor ELEMENT_FONT_COLOR
|
||||
BackgroundColor EXTERNAL_PERSON_BG_COLOR
|
||||
BorderColor #8A8A8A
|
||||
}
|
||||
|
||||
skinparam rectangle<<system>> {
|
||||
StereotypeFontColor ELEMENT_FONT_COLOR
|
||||
FontColor ELEMENT_FONT_COLOR
|
||||
BackgroundColor SYSTEM_BG_COLOR
|
||||
BorderColor #3C7FC0
|
||||
}
|
||||
|
||||
skinparam rectangle<<external_system>> {
|
||||
StereotypeFontColor ELEMENT_FONT_COLOR
|
||||
FontColor ELEMENT_FONT_COLOR
|
||||
BackgroundColor EXTERNAL_SYSTEM_BG_COLOR
|
||||
BorderColor #8A8A8A
|
||||
}
|
||||
|
||||
' Layout
|
||||
' ##################################
|
||||
|
||||
!definelong LAYOUT_WITH_LEGEND
|
||||
hide stereotype
|
||||
legend right
|
||||
|= |= Type |
|
||||
|<PERSON_BG_COLOR> | person |
|
||||
|<EXTERNAL_PERSON_BG_COLOR> | external person |
|
||||
|<SYSTEM_BG_COLOR> | system |
|
||||
|<EXTERNAL_SYSTEM_BG_COLOR> | external system |
|
||||
endlegend
|
||||
!enddefinelong
|
||||
|
||||
' Elements
|
||||
' ##################################
|
||||
|
||||
!define Person(e_alias, e_label) rectangle "==e_label" <<person>> as e_alias
|
||||
!define Person(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<person>> as e_alias
|
||||
|
||||
!define Person_Ext(e_alias, e_label) rectangle "==e_label" <<external_person>> as e_alias
|
||||
!define Person_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<external_person>> as e_alias
|
||||
|
||||
!define System(e_alias, e_label) rectangle "==e_label" <<system>> as e_alias
|
||||
!define System(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<system>> as e_alias
|
||||
|
||||
!define System_Ext(e_alias, e_label) rectangle "==e_label" <<external_system>> as e_alias
|
||||
!define System_Ext(e_alias, e_label, e_descr) rectangle "==e_label\n\n e_descr" <<external_system>> as e_alias
|
||||
|
||||
' Boundaries
|
||||
' ##################################
|
||||
|
||||
!define System_Boundary(e_alias, e_label) rectangle "==e_label [System]" <<boundary>> as e_alias
|
||||
@@ -1,6 +1,6 @@
|
||||
# C4-PlantUML
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
@@ -18,21 +18,23 @@ C4-PlantUML includes macros, stereotypes, and other goodies (like VSCode Snippet
|
||||
|
||||
## Getting Started
|
||||
|
||||
At the top of your C4-PlantUML `.puml` file, you need to include the `C4_Container.puml` file found in the `root` of this repo.
|
||||
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 also download `C4_Container.puml` and reference it locally with
|
||||
To be independent of any internet connectifity, you can also download the files found in the `root` and reference it locally with
|
||||
|
||||
```c#
|
||||
!include path/to/C4_Container.puml
|
||||
```
|
||||
|
||||
Just remember to change the `!include` statements inside the top of the files.
|
||||
|
||||
If you want to use the always up-to-date version in this repo, use the following:
|
||||
|
||||
```c#
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
||||
```
|
||||
|
||||
After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `System`, `Container`, `Relationship`.
|
||||
After you have inlcluded `C4_Container.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`, `Boundary`, `System_Boundary`, `Container_Boundary`.
|
||||
|
||||
```csharp
|
||||
@startuml C4_Elements
|
||||
@@ -46,9 +48,9 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
In addition to this, it is also possible to define a system boundary.
|
||||
In addition to this, it is also possible to define a system or component boundary.
|
||||
|
||||
Take a look a look at the following sample of a C4 Container Diagram:
|
||||
|
||||
@@ -57,7 +59,7 @@ Take a look a look at the following sample of a C4 Container Diagram:
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
||||
|
||||
Person(admin, "Administrator")
|
||||
package "Sample System" <<boundary>> as c1 {
|
||||
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")
|
||||
@@ -67,17 +69,17 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Snippets for Visual Studio Code
|
||||
|
||||
Because the PlantUML support inside of Visual Studio Code is excellend with the [PlantUML extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml), you can also find VS Code snippets for C4-PlantUML at [.vscode/snippets/diagram.json](.vscode/snippets/diagram.json).
|
||||
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).
|
||||
|
||||
Or you can use the [Project Snippets extension](https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets).
|
||||
Now it is possible to have workspace/project level code snippets.
|
||||
|
||||
|
||||
|
||||
## Layout Options
|
||||
@@ -100,7 +102,7 @@ With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to
|
||||
LAYOUT_TOP_DOWN
|
||||
|
||||
Person(admin, "Administrator")
|
||||
package "Sample System" <<boundary>> as c1 {
|
||||
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")
|
||||
@@ -110,7 +112,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Using `LAYOUT_LEFT_RIGHT`
|
||||
|
||||
@@ -121,7 +123,7 @@ Using `LAYOUT_LEFT_RIGHT`
|
||||
LAYOUT_LEFT_RIGHT
|
||||
|
||||
Person(admin, "Administrator")
|
||||
package "Sample System" <<boundary>> as c1 {
|
||||
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")
|
||||
@@ -131,7 +133,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### LAYOUT_WITH_LEGEND
|
||||
|
||||
@@ -148,7 +150,7 @@ This can be enabled with `LAYOUT_WITH_LEGEND`.
|
||||
LAYOUT_WITH_LEGEND
|
||||
|
||||
Person(admin, "Administrator")
|
||||
package "Sample System" <<boundary>> as c1 {
|
||||
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")
|
||||
@@ -158,7 +160,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### LAYOUT_AS_SKETCH
|
||||
|
||||
@@ -181,7 +183,7 @@ With `LAYOUT_AS_SKETCH` you can make a difference.
|
||||
LAYOUT_AS_SKETCH
|
||||
|
||||
Person(admin, "Administrator")
|
||||
package "Sample System" <<boundary>> as c1 {
|
||||
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")
|
||||
@@ -191,29 +193,31 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
|
||||
@enduml
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Advanced Samples
|
||||
|
||||
The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](http://simonbrown.je/).
|
||||
|
||||
The core diagram samples from [c4model.com](https://c4model.com/#coreDiagrams) are available [here](samples/C4model.com/README.md).
|
||||
|
||||
### techtribes.js
|
||||
|
||||
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)
|
||||
|
||||
|
||||
|
||||
|
||||
### Big Bank plc
|
||||
|
||||
Source: [C4_Container Diagram Sample - bigbankplc.puml](samples/C4_Container%20Diagram%20Sample%20-%20bigbankplc.puml)
|
||||
|
||||
|
||||
|
||||
|
||||
## Background
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@startuml "bigbankplc"
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Container.puml
|
||||
|
||||
LAYOUT_TOP_DOWN
|
||||
'LAYOUT_AS_SKETCH
|
||||
@@ -8,7 +10,7 @@ LAYOUT_WITH_LEGEND
|
||||
|
||||
Person(customer, Customer, "A customer of the bank, with personal bank accounts")
|
||||
|
||||
package "Internet Banking System" <<boundary>> as c1 {
|
||||
System_Boundary(c1, "Internet Banking") {
|
||||
|
||||
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
|
||||
|
||||
@@ -21,8 +23,8 @@ package "Internet Banking System" <<boundary>> as c1 {
|
||||
Container(database, "Database", "SQL Database", "Stores user registraion information, hased auth credentials, access logs, etc.")
|
||||
}
|
||||
|
||||
System(email_system, "E-Mail System", "The internal Microsoft Exchange system")
|
||||
System(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
|
||||
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")
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@startuml "bigbankplc"
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Container.puml
|
||||
|
||||
skinparam wrapWidth 200
|
||||
skinparam maxMessageSize 200
|
||||
@@ -11,7 +13,7 @@ LAYOUT_WITH_LEGEND
|
||||
|
||||
Person(customer, Customer, "A customer")
|
||||
|
||||
package "Customer Information System" <<boundary>> as c1 {
|
||||
System_Boundary(c1, "Customer Information") {
|
||||
|
||||
Container(app, "Customer Application", "Javascript, Angular", "Allows customers to manage their profile")
|
||||
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
@startuml "techtribesjs"
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Container.puml
|
||||
|
||||
LAYOUT_TOP_DOWN
|
||||
'LAYOUT_AS_SKETCH
|
||||
LAYOUT_WITH_LEGEND
|
||||
|
||||
|
||||
Person(anonymous_user, "Anonymous User")
|
||||
Person_Ext(anonymous_user, "Anonymous User")
|
||||
Person(aggregated_user, "Aggregated User")
|
||||
Person(administration_user, "Administration User")
|
||||
|
||||
package "techtribes.js" <<boundary>> as c1 {
|
||||
|
||||
System_Boundary(c1, "techtribes.js"){
|
||||
|
||||
Container(web_app, "Web Application", "Java, Spring MVC, Tomcat 7.x", "Allows users to view people, tribes, content, events, jobs, etc. from the local tech, digital and IT sector")
|
||||
|
||||
Container(rel_db, "Relational Database", "MySQL 5.5.x", "Stores people, tribes, tribe membership, talks, events, jobs, badges, GitHub repos, etc.")
|
||||
@@ -23,9 +25,9 @@ package "techtribes.js" <<boundary>> as c1 {
|
||||
Container(updater, "Updater", "Java 7 Console App", "Updates profiles, tweets, GitHub repos and content on a scheduled basis")
|
||||
}
|
||||
|
||||
System(twitter, "Twitter")
|
||||
System(github, "GitHub")
|
||||
System(blogs, "Blogs")
|
||||
System_Ext(twitter, "Twitter")
|
||||
System_Ext(github, "GitHub")
|
||||
System_Ext(blogs, "Blogs")
|
||||
|
||||
|
||||
Rel(anonymous_user, web_app, "Uses", "HTTPS")
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
@startuml
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Component.puml
|
||||
|
||||
LAYOUT_WITH_LEGEND
|
||||
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
Container_Boundary(api, "API Application") {
|
||||
Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system")
|
||||
Component(accounts, "Accounts Summary Controller", "MVC Rest Controlle", "Provides customers with a summory of their bank accounts")
|
||||
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
|
||||
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
|
||||
|
||||
Rel(sign, security, "Uses")
|
||||
Rel(accounts, mbsfacade, "Uses")
|
||||
Rel(security, db, "Read & write to", "JDBC")
|
||||
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
|
||||
}
|
||||
|
||||
Rel(spa, sign, "Uses", "JSON/HTTPS")
|
||||
Rel(spa, accounts, "Uses", "JSON/HTTPS")
|
||||
|
||||
Rel(ma, sign, "Uses", "JSON/HTTPS")
|
||||
Rel(ma, accounts, "Uses", "JSON/HTTPS")
|
||||
@enduml
|
||||
@@ -0,0 +1,32 @@
|
||||
@startuml
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Container.puml
|
||||
|
||||
LAYOUT_WITH_LEGEND
|
||||
|
||||
title Container diagram for Internet Banking System
|
||||
|
||||
Person(pbc, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
|
||||
System_Ext(es, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
System_Boundary(ibs, "Internet Banking") {
|
||||
Container(wa, "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 the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
Container(api, "API Application", "java and String MVC", "Provides internet banking functionality via a JSON/HTTP API.")
|
||||
|
||||
Rel(api, es, "Sends e-mails", "SMTP")
|
||||
Rel(api, mbs, "Uses", "XML/HTTPS")
|
||||
Rel(api, db, "Reads & writes to", "JDBC")
|
||||
Rel(wa, spa, "Delivers")
|
||||
Rel(spa, api, "Uses", "JSON/HTTPS")
|
||||
Rel(ma, api, "Uses", "JSON/HTTPS")
|
||||
}
|
||||
|
||||
Rel(pbc, wa, "Uses", "HTTPS")
|
||||
Rel(pbc, spa, "Uses")
|
||||
Rel(pbc, ma, "Uses")
|
||||
Rel(es, pbc, "Sends e-mails to")
|
||||
@enduml
|
||||
@@ -0,0 +1,20 @@
|
||||
@startuml
|
||||
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml
|
||||
' uncomment the following line and comment the first to use locally
|
||||
' !include C4_Context.puml
|
||||
|
||||
LAYOUT_WITH_LEGEND
|
||||
|
||||
title System Context diagram for Internet Banking System
|
||||
|
||||
Person(pbc, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
|
||||
System(ibs, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
System_Ext(es, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
Rel(pbc, ibs, "Uses")
|
||||
Rel(es, pbc, "Sends e-mails to")
|
||||
Rel(ibs, es, "Sends e-mails", "SMTP")
|
||||
Rel(ibs, mbs, "Uses")
|
||||
@enduml
|
||||
@@ -0,0 +1,21 @@
|
||||
# C4Model Core Diagrams
|
||||
|
||||
The following samples are reproductions with C4-PlantUML from [C4 model core diagrams](http://c4model.com/#coreDiagrams) created by [Simon Brown](http://simonbrown.je/).
|
||||
|
||||
## System Context Diagram
|
||||
|
||||
Source: [C4_Context Diagram Sample.puml](samples/C4model.com/C4_Context%20Diagram%20Sample.puml)
|
||||
|
||||
|
||||
|
||||
## Container Diagram
|
||||
|
||||
Source: [C4_Container Diagram Sample.puml](samples/C4model.com/C4_Container%20Diagram%20Sample.puml)
|
||||
|
||||
|
||||
|
||||
## Component Diagram
|
||||
|
||||
Source: [C4_Component Diagram Sample.puml](samples/C4model.com/C4_Component%20Diagram%20Sample.puml)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user