diff --git a/.vscode/snippets/diagram.json b/.vscode/snippets/diagram.json index 1cbf8d7..f71395c 100644 --- a/.vscode/snippets/diagram.json +++ b/.vscode/snippets/diagram.json @@ -15,7 +15,22 @@ ], "description": "Add Person with Description to C4 diagram" }, - + "C4_Person_Ext": { + "prefix": "External Person", + "body": [ + "Person_Ext(${1:alias}, \"${2:label}\")", + "$0" + ], + "description": "Add External Person to C4 diagram" + }, + "C4_Person_Ext_Descr": { + "prefix": "External Person with Description", + "body": [ + "Person_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", + "$0" + ], + "description": "Add External Person with Description to C4 diagram" + }, "C4_Container": { "prefix": "Container", "body": [ @@ -32,7 +47,31 @@ ], "description": "Add Container with Description to C4 diagram" }, - + "C4_Container_Boundary": { + "prefix": "Container Boundary", + "body": [ + "Container_Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a Container Boundary to C4 diagram" + }, + "C4_Component": { + "prefix": "Component", + "body": [ + "Component(${1:alias}, \"${2:label}\", \"${3:technology}\")", + "$0" + ], + "description": "Add Component to C4 diagram" + }, + "C4_Component_Descr": { + "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": { "prefix": "System", "body": [ @@ -49,7 +88,31 @@ ], "description": "Add System with Description to C4 diagram" }, - + "C4_System_Ext": { + "prefix": "External System", + "body": [ + "System_Ext(${1:alias}, \"${2:label}\")", + "$0" + ], + "description": "Add External System to C4 diagram" + }, + "C4_System_Ext_Descr": { + "prefix": "External System with Description", + "body": [ + "System_Ext(${1:alias}, \"${2:label}\", \"${3:description}\")", + "$0" + ], + "description": "Add External System with Description to C4 diagram" + }, + "C4_System_Boundary": { + "prefix": "System Boundary", + "body": [ + "System_Boundary(${1:alias}, \"${2:label}\"){", + "\t$0", + "}" + ], + "description": "Add a System Boundary to C4 diagram" + }, "C4_Relationship": { "prefix": "Relationship", "body": [ @@ -66,7 +129,6 @@ ], "description": "Add unidirectional Relationship with Technology to C4 diagram" }, - "C4_Layout_Right": { "prefix": "Layout to Right side", "body": [ diff --git a/README.md b/README.md index 37b7958..6a812a2 100644 --- a/README.md +++ b/README.md @@ -17,29 +17,32 @@ 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.puml` file found in the `root` of this repo. -To be independent of any internet connectifity, you can also download `C4_Container.puml` and reference it locally with +To be independent of any internet connectifity, you can also download `C4.puml` and reference it locally with ```c# -!include path/to/C4_Container.puml +!include path/to/C4.puml ``` 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 +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.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.puml` you can use the defined macro definitions for the C4 elements: `Person`, `Person_Ext`, `System`, `System_Ext`, `Container`, `Component`, `Relationship`. ```csharp @startuml C4_Elements -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml Person(personAlias, "Label", "Optional Description") -Container(containerAlias, "Label", "Technology", "Optional Description") +Person_Ext(personAlias, "Label", "Optional Description") System(systemAlias, "Label", "Optional Description") +System_Ext(systemAlias, "Label", "Optional Description") +Container(containerAlias, "Label", "Technology", "Optional Description") +Component(containerAlias, "Label", "Technology", "Optional Description") Rel(personAlias, containerAlias, "Label", "Optional Technology") @enduml @@ -47,13 +50,13 @@ Rel(personAlias, containerAlias, "Label", "Optional Technology") ![C4_Elements](http://www.plantuml.com/plantuml/png/ZL31IWCn4Bq7yW_hdbQecqjFdYhRtgejLSybpGxTm6GICXDA_zwmO554yVJU36_UUyoAnMOf0PjXUTmW121XhUuyEImZb8pD99BuqPXiB_tPorHEXI6xI5ArlOl17BopUOml7XAW6POFUxGaxyzR4omBvBew3bLlFK7kKqtJIgizP8xKfHcUq5jUDEtMdW3RIdP9V2IBpHhOPJzFxRrMDv_EVR8Vjs_W9eeOpzU_d5wljLleU8P_vsjr0FnU-lSYDvClZQh72cYiJ_W0 "C4_Elements") -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: ```csharp @startuml Basic Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml Person(admin, "Administrator") package "Sample System" <> as c1 { @@ -66,6 +69,23 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") @enduml ``` +or + +```csharp +@startuml Basic Sample +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.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 +``` + ![Basic Sample](http://www.plantuml.com/plantuml/png/LL1DIyD04Bq7yX_6UAbG4ogUf9J687gmfJIf7iis6Tl5_M9tGYZYVtUMQejx6PZtvdtiF93mr6i5ZoB85cgXdS8qkPAcLNs7lLTm87BXeIYy6FAzf4E_wmFwrXf2GtbhTR6MhV2TNKfqg8hg_dQbXA7DuhNG8X1wNcqhvWjfqEUExT8aJLReWpKZqMbfnf2LSSf0Nf3rsKsQED5-YZr2TWe5zP6rT0RJwSxsfXF-E9k12D1Eu2jDWD_POpJWRYkSOzbtt47fdEA89At9U5LTZw6iL_dogU4JZt2NJs3nLaMiLCeE0MB306I1wpd15DqhaZ55CqZYIa1IesAl4AD-fyaftOXEC2lz4YES9cjKVqKlqJQ1htc-DCsgZhp8EiCNfMSapZ9W71_UwdytSpGTV-WF "Basic Sample") ## Snippets for Visual Studio Code @@ -93,7 +113,7 @@ With the two macros `LAYOUT_TOP_DOWN` and `LAYOUT_LEFT_RIGHT` it is possible to ```csharp @startuml LAYOUT_TOP_DOWN Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml /' Not needed because this is the default '/ LAYOUT_TOP_DOWN @@ -115,7 +135,7 @@ Using `LAYOUT_LEFT_RIGHT` ```csharp @startuml LAYOUT_LEFT_RIGHT Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_LEFT_RIGHT @@ -142,7 +162,7 @@ This can be enabled with `LAYOUT_WITH_LEGEND`. ```csharp @startuml LAYOUT_WITH_LEGEND Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_WITH_LEGEND @@ -175,7 +195,7 @@ With `LAYOUT_AS_SKETCH` you can make a difference. ```csharp @startuml LAYOUT_AS_SKETCH Sample -!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml +!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4.puml LAYOUT_AS_SKETCH