diff --git a/.vscode/C4.code-snippets b/.vscode/C4.code-snippets index b12bf4c..843c86f 100644 --- a/.vscode/C4.code-snippets +++ b/.vscode/C4.code-snippets @@ -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", diff --git a/C4_Component.puml b/C4_Component.puml index 7e1e224..d97f67b 100644 --- a/C4_Component.puml +++ b/C4_Component.puml @@ -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<> { - StereotypeFontColor #000000 - FontColor #000000 + StereotypeFontColor $COMPONENT_FONT_COLOR + FontColor $COMPONENT_FONT_COLOR BackgroundColor $COMPONENT_BG_COLOR - BorderColor #78A8D8 + BorderColor $COMPONENT_BORDER_COLOR } skinparam database<> { - StereotypeFontColor #000000 - FontColor #000000 + StereotypeFontColor $COMPONENT_FONT_COLOR + FontColor $COMPONENT_FONT_COLOR BackgroundColor $COMPONENT_BG_COLOR - BorderColor #78A8D8 + BorderColor $COMPONENT_BORDER_COLOR } skinparam queue<> { - StereotypeFontColor #000000 - FontColor #000000 + StereotypeFontColor $COMPONENT_FONT_COLOR + FontColor $COMPONENT_FONT_COLOR BackgroundColor $COMPONENT_BG_COLOR - BorderColor #78A8D8 + BorderColor $COMPONENT_BORDER_COLOR +} + +skinparam rectangle<> { + StereotypeFontColor $COMPONENT_FONT_COLOR + FontColor $COMPONENT_FONT_COLOR + BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR + BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR +} + +skinparam database<> { + StereotypeFontColor $COMPONENT_FONT_COLOR + FontColor $COMPONENT_FONT_COLOR + BackgroundColor $EXTERNAL_COMPONENT_BG_COLOR + BorderColor $EXTERNAL_COMPONENT_BORDER_COLOR +} + +skinparam queue<> { + 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)" <> as $alia !unquoted procedure ComponentQueue($alias, $label, $techn, $descr="", $sprite="") queue "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure Component_Ext($alias, $label, $techn, $descr="", $sprite="") +rectangle "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure ComponentDb_Ext($alias, $label, $techn, $descr="", $sprite="") +database "$getComponent($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure ComponentQueue_Ext($alias, $label, $techn, $descr="", $sprite="") +queue "$getComponent($label, $techn, $descr, $sprite)" <> as $alias !endprocedure \ No newline at end of file diff --git a/C4_Container.puml b/C4_Container.puml index a468d76..801f0df 100644 --- a/C4_Container.puml +++ b/C4_Container.puml @@ -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<> { StereotypeFontColor $ELEMENT_FONT_COLOR FontColor $ELEMENT_FONT_COLOR BackgroundColor $CONTAINER_BG_COLOR - BorderColor #3C7FC0 + BorderColor $CONTAINER_BORDER_COLOR } skinparam database<> { StereotypeFontColor $ELEMENT_FONT_COLOR FontColor $ELEMENT_FONT_COLOR BackgroundColor $CONTAINER_BG_COLOR - BorderColor #3C7FC0 + BorderColor $CONTAINER_BORDER_COLOR } skinparam queue<> { StereotypeFontColor $ELEMENT_FONT_COLOR FontColor $ELEMENT_FONT_COLOR BackgroundColor $CONTAINER_BG_COLOR - BorderColor #3C7FC0 + BorderColor $CONTAINER_BORDER_COLOR +} + +skinparam rectangle<> { + StereotypeFontColor $ELEMENT_FONT_COLOR + FontColor $ELEMENT_FONT_COLOR + BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR + BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR +} + +skinparam database<> { + StereotypeFontColor $ELEMENT_FONT_COLOR + FontColor $ELEMENT_FONT_COLOR + BackgroundColor $EXTERNAL_CONTAINER_BG_COLOR + BorderColor $EXTERNAL_CONTAINER_BORDER_COLOR +} + +skinparam queue<> { + 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)" <> as $alia queue "$getContainer($label, $techn, $descr, $sprite)" <> as $alias !endprocedure +!unquoted procedure Container_Ext($alias, $label, $techn, $descr="", $sprite="") +rectangle "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure ContainerDb_Ext($alias, $label, $techn, $descr="", $sprite="") +database "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure + +!unquoted procedure ContainerQueue_Ext($alias, $label, $techn, $descr="", $sprite="") +queue "$getContainer($label, $techn, $descr, $sprite)" <> as $alias +!endprocedure + ' Boundaries ' ################################## diff --git a/LayoutOptions.md b/LayoutOptions.md index e077609..07b5dd5 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -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 diff --git a/README.md b/README.md index 8a7a04b..c7c90e0 100644 --- a/README.md +++ b/README.md @@ -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: