added external container/component from https://github.com/stawirej/C4-PlantUML.git

pull/84/head
Adrian Lupu 5 years ago
parent a9303abebc
commit 5c21e88177

@ -93,6 +93,28 @@
],
"description": "Add Container with Description to C4 diagram"
},
"C4_Container_Ext": {
"scope": "plantuml",
"prefix": [
"External Container",
"Container (External)"
],
"body": [
"Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Container to C4 diagram"
},
"C4_Container_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Container with Description",
"Container (External) with Description"
],
"body": [
"Container_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Container with Description to C4 diagram"
},
"C4_ContainerDb": {
"scope": "plantuml",
"prefix": "Database Container",
@ -109,6 +131,28 @@
],
"description": "Add Database Container with Description to C4 diagram"
},
"C4_ContainerDb_Ext": {
"scope": "plantuml",
"prefix": [
"External Database Container",
"Database Container (External)"
],
"body": [
"ContainerDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Database Container to C4 diagram"
},
"C4_ContainerDb_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Database Container with Description",
"Database Container (External) with Description"
],
"body": [
"ContainerDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Database Container with Description to C4 diagram"
},
"C4_ContainerQueue": {
"scope": "plantuml",
"prefix": "Queue Container",
@ -125,6 +169,28 @@
],
"description": "Add Queue Container with Description to C4 diagram"
},
"C4_ContainerQueue_Ext": {
"scope": "plantuml",
"prefix": [
"External Queue Container",
"Queue Container (External)"
],
"body": [
"ContainerQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Queue Container to C4 diagram"
},
"C4_ContainerQueue_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Queue Container with Description",
"Queue Container (External) with Description"
],
"body": [
"ContainerQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add ExternalQueue Container with Description to C4 diagram"
},
"C4_Container_Boundary": {
"scope": "plantuml",
"prefix": [
@ -154,6 +220,28 @@
],
"description": "Add Component with Description to C4 diagram"
},
"C4_Component_Ext": {
"scope": "plantuml",
"prefix": [
"External Component",
"Component (External)"
],
"body": [
"Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Component to C4 diagram"
},
"C4_Component_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Component with Description",
"Component (External) with Description"
],
"body": [
"Component_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Component with Description to C4 diagram"
},
"C4_ComponentDb": {
"scope": "plantuml",
"prefix": "Database Component",
@ -170,6 +258,28 @@
],
"description": "Add Database Component with Description to C4 diagram"
},
"C4_ComponentDb_Ext": {
"scope": "plantuml",
"prefix": [
"External Database Component",
"Database Component (External)"
],
"body": [
"ComponentDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Database Component to C4 diagram"
},
"C4_ComponentDb_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Database Component with Description",
"Database Component (External) with Description"
],
"body": [
"ComponentDb_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Database Component with Description to C4 diagram"
},
"C4_ComponentQueue": {
"scope": "plantuml",
"prefix": "Queue Component",
@ -186,6 +296,28 @@
],
"description": "Add Queue Component with Description to C4 diagram"
},
"C4_ComponentQueue_Ext": {
"scope": "plantuml",
"prefix": [
"External Queue Component",
"Queue Component (External)"
],
"body": [
"ComponentQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\")"
],
"description": "Add External Queue Component to C4 diagram"
},
"C4_ComponentQueue_Ext_Descr": {
"scope": "plantuml",
"prefix": [
"External Queue Component with Description",
"Queue Component (External) with Description"
],
"body": [
"ComponentQueue_Ext(${1:alias}, \"${2:label}\", \"${3:technology}\", \"${4:description}\")"
],
"description": "Add External Queue Component with Description to C4 diagram"
},
"C4_System": {
"scope": "plantuml",
"prefix": "System",

@ -10,30 +10,55 @@
' Colors
' ##################################
!global $COMPONENT_FONT_COLOR = "#000000"
!global $COMPONENT_BG_COLOR = "#85BBF0"
!global $COMPONENT_BORDER_COLOR = "#78A8D8"
!global $EXTERNAL_COMPONENT_BG_COLOR = "#CCCCCC"
!global $EXTERNAL_COMPONENT_BORDER_COLOR = "#BFBFBF"
' Styling
' ##################################
skinparam rectangle<<component>> {
StereotypeFontColor #000000
FontColor #000000
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $COMPONENT_BG_COLOR
BorderColor #78A8D8
BorderColor $COMPONENT_BORDER_COLOR
}
skinparam database<<component>> {
StereotypeFontColor #000000
FontColor #000000
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $COMPONENT_BG_COLOR
BorderColor #78A8D8
BorderColor $COMPONENT_BORDER_COLOR
}
skinparam queue<<component>> {
StereotypeFontColor #000000
FontColor #000000
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $COMPONENT_BG_COLOR
BorderColor #78A8D8
BorderColor $COMPONENT_BORDER_COLOR
}
skinparam rectangle<<external_component>> {
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR
BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR
}
skinparam database<<external_component>> {
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR
BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR
}
skinparam queue<<external_component>> {
StereotypeFontColor $COMPONENT_FONT_COLOR
FontColor $COMPONENT_FONT_COLOR
BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR
BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR
}
' Layout
@ -49,6 +74,8 @@ legend right
|<$COMPONENT_BG_COLOR> component |
|<$EXTERNAL_PERSON_BG_COLOR> external person |
|<$EXTERNAL_SYSTEM_BG_COLOR> external system |
|<$EXTERNAL_CONTAINER_BG_COLOR> external container |
|<$EXTERNAL_COMPONENT_BG_COLOR> external component |
endlegend
!endprocedure
@ -80,4 +107,16 @@ database "$getComponent($label, $techn, $descr, $sprite)" <<component>> as $alia
!unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="")
queue "$getComponent($label, $techn, $descr, $sprite)" <<component>> as $alias
!endprocedure
!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="")
rectangle "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $alias
!endprocedure
!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="")
database "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $alias
!endprocedure
!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="")
queue "$getComponent($label, $techn, $descr, $sprite)" <<external_component>> as $alias
!endprocedure

@ -11,6 +11,9 @@
' ##################################
!global $CONTAINER_BG_COLOR = "#438DD5"
!global $CONTAINER_BORDER_COLOR = "#3C7FC0"
!global $EXTERNAL_CONTAINER_BG_COLOR = "#B3B3B3"
!global $EXTERNAL_CONTAINER_BORDER_COLOR = "#A6A6A6"
' Styling
' ##################################
@ -19,21 +22,42 @@ skinparam rectangle<<container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $CONTAINER_BG_COLOR
BorderColor #3C7FC0
BorderColor $CONTAINER_BORDER_COLOR
}
skinparam database<<container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $CONTAINER_BG_COLOR
BorderColor #3C7FC0
BorderColor $CONTAINER_BORDER_COLOR
}
skinparam queue<<container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $CONTAINER_BG_COLOR
BorderColor #3C7FC0
BorderColor $CONTAINER_BORDER_COLOR
}
skinparam rectangle<<external_container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR
BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR
}
skinparam database<<external_container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR
BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR
}
skinparam queue<<external_container>> {
StereotypeFontColor $ELEMENT_FONT_COLOR
FontColor $ELEMENT_FONT_COLOR
BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR
BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR
}
' Layout
@ -48,6 +72,7 @@ legend right
|<$CONTAINER_BG_COLOR> container |
|<$EXTERNAL_PERSON_BG_COLOR> external person |
|<$EXTERNAL_SYSTEM_BG_COLOR> external system |
|<$EXTERNAL_CONTAINER_BG_COLOR> external container |
endlegend
!endprocedure
@ -81,6 +106,18 @@ database "$getContainer($label, $techn, $descr, $sprite)" <<container>> as $alia
queue "$getContainer($label, $techn, $descr, $sprite)" <<container>> as $alias
!endprocedure
!unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="")
rectangle "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $alias
!endprocedure
!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="")
database "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $alias
!endprocedure
!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="")
queue "$getContainer($label, $techn, $descr, $sprite)" <<external_container>> as $alias
!endprocedure
' Boundaries
' ##################################

@ -31,7 +31,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
![LAYOUT_TOP_DOWN Sample](https://www.plantuml.com/plantuml/png/NP1DJyCm38Rl-HLc7DP9ezKG9quh0y5X7nNhc3XLQUknI6aI9IxLXFZlkDhO454aI_Rhruyz3IGzjOs6UVg-skH5ligAnzLs2MlPE8tYIfbAjpN2diY5-oJniei_5EtRiWteAsi83SMLRH9PUoNDfsvTcypkRZ8j3MqMyqHBma2SAcQibigWZnsF528Pmj8I6CGQQoYnakm9j5S1-DCUeSQTR3N1C17_0AEH41dwO4qawqQPCGpIFgf0NfBrWv5O7m9XKppOrjJI7w9gCeRXSQ_X2Bu4y3iZHHsMXNIEVRPOGkgSLfKaPSs0KxFhCQJhB5u-vTpY4MxZ2IpUPdqjrTfs0VfpCBG5leMJB6aONF4io3j5X1v8DQXvLc2sxnDTHCSY-vnaN1Ilg7-tkc1j0dToVCdpRCsgNdIkNcoUaHYZmpxil6t-japHr7pv7m00 "LAYOUT_TOP_DOWN Sample")
Using `LAYOUT_LEFT_RIGHT`
Using `LAYOUT_LEFT_RIGHT()`
```csharp
@startuml LAYOUT_LEFT_RIGHT Sample

@ -123,6 +123,9 @@ Rel_R(api, db, "Reads/Writes")
* `Container`
* `ContainerDb`
* `ContainerQueue`
* `Container_Ext`
* `ContainerDb_Ext`
* `ContainerQueue_Ext`
* `Container_Boundary`
* Component diagram
* Import: `!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Component.puml`
@ -130,6 +133,9 @@ Rel_R(api, db, "Reads/Writes")
* `Component`
* `ComponentDb`
* `ComponentQueue`
* `Component_Ext`
* `ComponentDb_Ext`
* `ComponentQueue_Ext`
* Dynamic diagram
* Import: `!include https://raw.githubusercontent.com/adrianvlupu/C4-PlantUML/latest/C4_Dynamic.puml`
* Additional Macros:

Loading…
Cancel
Save