### Deployment Diagram Example

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Example of creating a Deployment diagram. This diagram type visualizes the physical deployment of software on infrastructure.

```plantuml
@startuml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

Node(server, "Server", "Ubuntu 20.04 LTS", "A virtual machine running on AWS.")

Rel(server, server, "Runs")
@enduml
```

--------------------------------

### System Context Diagram Example

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Demonstrates creating a System Context diagram. This type of diagram shows the system in its environment and its relationships with users and other systems.

```plantuml
@startuml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

Person(user, "User", "A user of the system.")
System(system, "My System", "The system to be described.")

Rel(user, system, "Uses")
@enduml
```

--------------------------------

### Create C4 Container Diagram with Boundaries

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Example demonstrating the use of System_Boundary to group containers within a system.

```plantuml
@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.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
```

--------------------------------

### Create a C4 Container Diagram

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Example of creating a basic C4 Container diagram. This demonstrates defining a system, a container, and a relationship between them.

```plantuml
@startuml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(customer, "Customer", "A customer of the internet banking system.")
System(web_app, "Internet Banking System", "Allows customers to manage their accounts.")

Rel(customer, web_app, "Uses", "HTTPS")
@enduml
```

--------------------------------

### Global Layout Options

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Configures global layout options for C4-PlantUML diagrams. This example sets the direction for automatic layout.

```plantuml
@startuml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' Set global layout direction to Left to Right
LAYOUT_LEFT_TO_RIGHT()

Person(customer, "Customer")
System(system, "My System")

Rel(customer, system, "Uses")
@enduml
```

--------------------------------

### Dynamic Diagram Example

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Shows how to create a Dynamic diagram. This diagram type illustrates the runtime behavior of a system, often used to show sequences of interactions.

```plantuml
@startuml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml

Person(user, "User")
System(system, "My System")
Component(component, "My Component")

Rel(user, system, "Uses")
Rel(system, component, "Uses")
@enduml
```

--------------------------------

### Component Diagram Example

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Illustrates the creation of a Component diagram. This diagram type focuses on the components within a specific software system and their interactions.

```plantuml
@startuml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

System_Boundary(system_boundary, "Internet Banking System") {
  Component(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and dynamic HTML to switch between views.")
  Component(api, "API Application", "Java, Spring MVC", "Provides information about customer accounts.")
}

Rel(web_app, api, "Uses", "HTTPS")
@enduml
```

--------------------------------

### C4 Styled Sequence Diagram Example

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Demonstrates creating a sequence diagram styled according to the C4 model. This can be useful for visualizing interactions between components or systems.

```plantuml
@startuml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml

Person(user, "User")
System(system, "My System")

Rel(user, system, "Uses")
@enduml
```

--------------------------------

### Apply C4_united theme to a diagram

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

A complete example showing the integration of the C4_united theme into a container diagram.

```plantuml
@startuml

!theme C4_united from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.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")

SHOW_FLOATING_LEGEND()
@enduml
```

--------------------------------

### C4 PlantUML Diagram with Japanese Theme

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

This example demonstrates a C4 PlantUML diagram with the `C4Language_japanese` theme applied. This theme translates predefined legend labels into Japanese, in addition to supporting localized system labels and descriptions.

```plantuml
@startuml
' with the C4Language_japanese theme ex. the predefined legend labels are translated too
!theme C4Language_japanese from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

LAYOUT_LANDSCAPE()

Person(admin, "管理者")
System_Boundary(c1, 'サンプル') {
    Container(web_app, "ウェブアプリケーション", "C#, ASP.NET Core 2.1 MVC", "複数のTwitterタイムラインを比較することができます")
}
System(twitter, "Twitter")

Rel(admin, web_app, "使用する", "HTTPS")
Rel(web_app, twitter, "ツイートを取得する", "HTTPS")

SHOW_LEGEND()
@enduml
```

--------------------------------

### Define C4 Relationships

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Example of defining relationships between elements in a C4 diagram using the Rel macro.

```plantuml
Rel(admin, spaAdmin, "Uses", "https")
Rel(spaAdmin, api, "Uses", "https")
Rel_L(api, archive, "Writes", "messages", $tags="backup")

SHOW_LEGEND()
@enduml
```

--------------------------------

### Configure Sprites, Images, and OpenIconic

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Shows how to integrate standard library sprites, external images, and OpenIconic icons with scaling and color options.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

'stdlib users.puml defines sprite "users"
!include <office/users/users.puml>


AddRelTag("plantuml", $textColor="$ARROW_FONT_COLOR", $lineColor="$ARROW_COLOR", $sprite="img:https://plantuml.com/logo3.png{scale=0.3}", $legendSprite="img:https://plantuml.com/logo3.png{scale=0.1}", $legendText="console triggered")

Person(user, "user group displayed with a sprite", $sprite="users")


Container(container, "Container with scaled and colored OpenIconic", $sprite="&folder,scale=5.0,color=gray")

System(system, "System with an image", $sprite="img:https://plantuml.com/logo3.png")

Rel(user, system, "Rel with image (via tags)", $tags="plantuml")
Rel(user, container, "Rel with OpenIconinc", $sprite="&folder")

SHOW_LEGEND()
@enduml
```

--------------------------------

### Samples

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Links to sample diagrams created using the C4-PlantUML library.

```APIDOC
## Samples

Refer to the [C4 Model Diagram Samples](samples/C4CoreDiagrams.md) for examples.
```

--------------------------------

### Hide Person Sprite

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/LayoutOptions.md

Use HIDE_PERSON_SPRITE() to deactivate the default person sprite. This example shows an Administrator person without a sprite.

```plantuml
@startuml HIDE_PERSON_SPRITE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

HIDE_PERSON_SPRITE()

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
```

--------------------------------

### Deployment Diagram Macros

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Import and macro details for creating deployment diagrams with C4-PlantUML.

```APIDOC
## Deployment Diagram

### Import
`!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml`

### Macros (based on container diagram macros)

- `Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`
- `Node(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: Short name of `Deployment_Node()`.
- `Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: Left aligned `Node()`.
- `Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, ?link)`: Right aligned `Node()`.
```

--------------------------------

### Define System Elements

Source: https://context7.com/plantuml-stdlib/c4-plantuml/llms.txt

Use System, System_Ext, SystemDb_Ext, and SystemQueue_Ext to model software systems and their relationships.

```puml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

LAYOUT_WITH_LEGEND()

Person(customer, "Customer", "A customer of the bank")

' Internal system
System(banking, "Internet Banking System", "Allows customers to view account information and make payments")

' External systems with different variants
System_Ext(email, "E-Mail System", "Microsoft Exchange e-mail system")
SystemDb_Ext(mainframe, "Mainframe", "Stores core banking data")
SystemQueue_Ext(mq, "Message Queue", "Handles async messaging")

Rel(customer, banking, "Uses", "HTTPS")
Rel(banking, email, "Sends emails", "SMTP")
Rel(banking, mainframe, "Reads/writes", "XML/HTTPS")

@enduml
```

--------------------------------

### C4 PlantUML Diagram without Japanese Theme

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

This example shows a C4 PlantUML diagram using default English labels for the legend. It includes system labels and descriptions in Japanese.

```plantuml
@startuml
 ' first diagram without the C4Language_japanese theme
 ' !theme C4Language_japanese from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
 !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

LAYOUT_LANDSCAPE()

Person(admin, "管理者")
System_Boundary(c1, 'サンプル') {
    Container(web_app, "ウェブアプリケーション", "C#, ASP.NET Core 2.1 MVC", "複数のTwitterタイムラインを比較することができます")
}
System(twitter, "Twitter")

Rel(admin, web_app, "使用する", "HTTPS")
Rel(web_app, twitter, "ツイートを取得する", "HTTPS")

SHOW_LEGEND()
@enduml
```

--------------------------------

### Configure Sketch Mode Settings

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Defines colors, fonts, and footer text for sketch mode.

```plantuml
!$SKETCH_BG_COLOR ?= "#EEEBDC"
!$SKETCH_FONT_COLOR ?= ""
!$SKETCH_WARNING_COLOR ?= "red"

!$SKETCH_FONT_NAME ?= "Comic Sans MS"

!$SKETCH_FOOTER_WARNING ?= "Warning:"
!$SKETCH_FOOTER_TEXT ?= "Created for discussion, needs to be validated"
```

--------------------------------

### Import C4 Deployment Diagram

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Import the C4_Deployment.puml library to create deployment diagrams. This enables the use of deployment-specific node macros.

```plantuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
```

--------------------------------

### Apply a Pre-built Theme in PlantUML

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Use the `!theme` directive to apply a theme from a remote URL. Ensure the theme's palette is correctly specified.

```plantuml
@startuml
!theme cb_seq_YlOrBr_9 from https://raw.githubusercontent.com/mweagle/C4-PlantUML-Themes/main/palettes

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.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")

SHOW_FLOATING_LEGEND()
@enduml
```

--------------------------------

### Include C4-PlantUML from PlantUML Standard Library

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Use this include statement to use the last released C4_... files as a standard library. No additional files or internet connection required.

```plantuml
!include <C4/C4_Container>
```

--------------------------------

### Configure PlantUML JAR Arguments

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Add this to your VS Code settings.json to use local C4-PlantUML files.

```json
{
  "plantuml.jarArgs": [
    "-DRELATIVE_INCLUDE=."
  ]
}
```

--------------------------------

### Import C4 Context Diagrams

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Required import for System Context and System Landscape diagrams.

```plantuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
```

--------------------------------

### Define Container Elements

Source: https://context7.com/plantuml-stdlib/c4-plantuml/llms.txt

Use Container, ContainerDb, and ContainerQueue macros within a System_Boundary to represent runtime components.

```puml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

LAYOUT_WITH_LEGEND()

Person(customer, "Customer", "A bank customer")

System_Boundary(c1, "Internet Banking") {
    ' Web application container
    Container(web_app, "Web Application", "Java, Spring MVC", "Delivers static content and the SPA")

    ' Single-page application
    Container(spa, "Single-Page App", "JavaScript, Angular", "Provides Internet banking functionality via browser")

    ' Mobile application
    Container(mobile_app, "Mobile App", "C#, Xamarin", "Mobile banking functionality")

    ' Database container
    ContainerDb(database, "Database", "PostgreSQL", "Stores user data, credentials, and transactions")

    ' Queue container
    ContainerQueue(queue, "Message Queue", "RabbitMQ", "Handles async processing")

    ' API container
    Container(api, "API Application", "Java, Docker", "Provides banking API")
}

Rel(customer, web_app, "Uses", "HTTPS")
Rel(customer, spa, "Uses", "HTTPS")
Rel(web_app, spa, "Delivers")
Rel(spa, api, "Uses", "JSON/HTTPS")
Rel(api, database, "Reads/writes", "JDBC")
Rel(api, queue, "Publishes to")

@enduml
```

--------------------------------

### Include C4-PlantUML from GitHub

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Use this include statement to always use the latest C4-PlantUML version from GitHub. Requires internet connectivity.

```plantuml
!include  https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
```

--------------------------------

### Customize Boundary Styles and Tags

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Demonstrates updating global boundary styles and defining custom tags for specific boundaries and elements.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

' Update the generic boundary style and the "system", "enterprise", "container" boundaries styles too
UpdateBoundaryStyle($bgColor="gold", $fontColor="brown", $borderColor="brown")
' (Re-)Updates the system boundary styles; re-set $bgColor avoids '(no back color)' in legend too
UpdateSystemBoundaryStyle($bgColor="gold", $fontColor="white", $borderColor="white")

Boundary(b, "A Boundary") {
}

Container_Boundary(cb, "A Container Boundary") {
}

System_Boundary(sb, "A System Boundary") {
}

' defines a new border style incl. new border type
AddBoundaryTag("repository", $bgColor="green", $fontColor="white", $borderColor="white", $shadowing="true", $shape = RoundedBoxShape(), $type="GitHub repository")

Boundary(c4Respository, "plantuml-stdlib/C4-PlantUML", $tags="repository") {
  Component(readMe, "README.md", "Markdown")
}

' boundary tags are internally extended with '_boundary' that it uses a different name space
' this enables different element and boundary styles for the same tag name
AddBoundaryTag("v1", $bgColor="lightgreen", $fontColor="green", $borderColor="green")
AddElementTag("v1", $bgColor="lightred", $fontColor="red", $borderColor="red")

Boundary(anotherBoundary, "Another Boundary", $type="BOUNDARY TYPE", $tags="v1") {
  Component(anotherComponent, "Another Component", $techn="COMPONENT TYPE", $tags="v1", $descr="Component and boundary use different tag name spaces that both v1 tags can use different styles")
}

Lay_R(b, cb)
Lay_R(cb, sb)

Lay_D(b, c4Respository)

Lay_R(c4Respository, anotherBoundary)

SHOW_LEGEND()
@enduml
```

--------------------------------

### Define Predefined Sprites

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/LayoutOptions.md

Demonstrates using predefined sprites 'person' and 'person2' for Person elements. Ensure C4_Container.puml is included.

```plantuml
@startuml predefined sprites Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(userA, "User A", "with predefined sprite person", "person")
Person(userB, "User B", "with predefined sprite person2", "person2")
@enduml
```

--------------------------------

### Apply Sprites to Relationships

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Illustrates how to use smaller icons or scale factors for relationship sprites to ensure they fit properly.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

Person(user, "User")
Person(user1, "User 1")
Person(user2, "User 2")
Person(user3, "User 3")

System(system, "System")

' normal sprites are too big 
Rel_L(user, user2, "informs", "courier", "normal sprites are too big", $sprite="person2")

' scaled sprites are ok
Rel_R(user, user3, "informs", "courier", "scaled sprites are OK", $sprite="person2,scale=0.5")

' combine sprite and scale to a new sprite
!$combinedSprite="person2,scale=0.5"
Rel_R(user, user3, "informs", "courier", "combined sprites are OK", $sprite=$combinedSprite)

' special smaller sprites can be used
sprite $triangle {
    00000000000
    00000F00000
    0000FBF0000
    0000FBF0000
    000F999F000
    000F999F000
```

--------------------------------

### Arrange elements with layout commands

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Use layout commands to force the positioning of elements that do not have explicit relationships defined.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
HIDE_STEREOTYPE()

Person(a, "A")
Person(b, "B")
Person(c, "C")
Person(d, "D")
Person(e, "E")

Lay_U(a, b)
Lay_R(a, c)
Lay_D(a, d)
Lay_L(a, e)

Person(x, "X")
System(s1, "S1")
System(s2, "S2")
System(s3, "S3")
System(s4, "S4")

Rel_U(x, s1, "uses")
Rel_R(x, s2, "uses")
Rel_D(x, s3, "uses")
Rel_L(x, s4, "uses")
@enduml
```

--------------------------------

### Configure Boundary Styles

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Sets default colors and border styles for boundaries.

```plantuml
!$BOUNDARY_COLOR ?= "#444444"
!$BOUNDARY_BG_COLOR ?= "transparent"
!$BOUNDARY_BORDER_STYLE ?= "dashed"
```

--------------------------------

### Dynamic Diagram Macros

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Import and macro details for creating dynamic diagrams with C4-PlantUML.

```APIDOC
## Dynamic Diagram

### Import
`!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml`

### Additional Macros

- `increment($offset=1)`: Increase current index (procedure).
- `setIndex($new_index)`: Set the new index (procedure).
- `LastIndex()`: Return the last used index (function).

*Requires V1.2020.24Beta4 or later.*
- `Index($offset=1)`: Returns current index and calculates next index (function).
- `SetIndex($new_index)`: Returns new set index and calculates next index (function).

### Relationship Macros Extension

All relationship macros are extended with `?index= `.

`RelIndex...()` calls are obsolete and can be replaced with `Rel($index=..., ...)` or `Rel(..., $index=)`. 

See [samples/C4_Dynamic Diagram Sample - message bus.puml](samples/C4_Dynamic%20Diagram%20Sample%20-%20message%20bus.puml) for a full sample.
```

--------------------------------

### Enable Index in Sequence Diagrams

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/LayoutOptions.md

Use SHOW_INDEX() to display an index in a sequence diagram.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml

SHOW_INDEX()

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")
' in a sequence diagram Boundary_End() has to be used instead of  { }
Boundary_End()
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```

--------------------------------

### C4 Sequence Diagrams with PlantUML Syntax

Source: https://context7.com/plantuml-stdlib/c4-plantuml/llms.txt

Combine C4 styling with PlantUML sequence diagram syntax for detailed interaction flows. Use Boundary_End() instead of '}' for closing boundaries. Optional features include showing element descriptions, foot boxes, and interaction numbers.

```puml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml

' Optional: Show element descriptions in sequence
' SHOW_ELEMENT_DESCRIPTIONS()

' Optional: Show foot boxes
' SHOW_FOOT_BOXES()

' Optional: Show interaction numbers
SHOW_INDEX()

Container(spa, "Single-Page App", "JavaScript", "Web frontend")

Container_Boundary(api, "API Application")
    Component(controller, "Auth Controller", "REST Controller", "Handles authentication")
    Component(service, "Auth Service", "Spring Bean", "Business logic")
Boundary_End()

ContainerDb(db, "Database", "PostgreSQL", "User store")

' Sequence interactions
Rel(spa, controller, "POST /login", "JSON/HTTPS")
Rel(controller, service, "authenticate(credentials)")
Rel(service, db, "SELECT * FROM users WHERE...", "JDBC")
Rel(db, service, "User record")
Rel(service, controller, "AuthResult")
Rel(controller, spa, "JWT Token", "JSON/HTTPS")

SHOW_LEGEND()
@enduml
```

--------------------------------

### Add Properties to C4 Elements and Relationships

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Demonstrates how to use `AddProperty`, `SetPropertyHeader`, and `WithoutPropertyHeader` to customize property tables for elements and relationships. Use `AddProperty` to add key-value pairs, `SetPropertyHeader` to define custom column names, and `WithoutPropertyHeader` to remove the default header.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

' default header Property, Value
AddProperty("Name", "Flash")
AddProperty("Organization", "Zootopia")
AddProperty("Tool", "Internet Explorer 7.0")
Person(personAlias, "Label", "Optional Description (with default property header)")

SetPropertyHeader("Property","Value", "Description")
AddProperty("Prop1", "Value1", "Details1")
AddProperty("Prop2", "Value2", "Details2")
Deployment_Node_L(nodeAlias, "Label", "Optional Type", "Optional Description (with custom property header)") {

  WithoutPropertyHeader()
  AddProperty("PropC1", "ValueC1")
  AddProperty("PropC2", "ValueC2")
  Container(containerAlias, "Label", "Technology", "Optional Description (without property header)")
}

System(systemAlias, "Label", "Optional Description (without properties)")

' starting with v.2.5.0 relationships support properties too
WithoutPropertyHeader()
AddProperty("PropC1", "ValueC1")
AddProperty("PropC2", "ValueC2")
Rel(personAlias, containerAlias, "Label", "Optional Technology", "Optional Description")
@enduml
```

--------------------------------

### Add links and version info to C4 diagrams

Source: https://context7.com/plantuml-stdlib/c4-plantuml/llms.txt

Use the $link parameter to make elements and relationships clickable. C4VersionDetails displays library version information in the diagram.

```puml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title System with Links and Version Info

' Elements with clickable links
Person(user, "User", "End user", $link="https://docs.example.com/users")
System(app, "Application", "Main system", $link="https://github.com/org/app")
System_Ext(ext, "External API", "Third-party", $link="https://api.external.com/docs")

Rel(user, app, "Uses", $link="https://docs.example.com/usage")
Rel(app, ext, "Integrates", $link="https://docs.example.com/integration")

SHOW_LEGEND()

' Display version information
C4VersionDetails()

' The C4Version() function returns the current version string
' footer Generated with C4-PlantUML C4Version()
@enduml
```

--------------------------------

### Configure System Boundary Styles

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Inherits boundary styles for system boundaries.

```plantuml
!$SYSTEM_BOUNDARY_COLOR ?= $BOUNDARY_COLOR
!$SYSTEM_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR
!$SYSTEM_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE
```

--------------------------------

### Use LAYOUT_AS_SKETCH() for Software Architecture Sketches

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/LayoutOptions.md

Use LAYOUT_AS_SKETCH() to enable the creation of software architecture sketches. This function is useful for upfront design sessions to ensure technical feasibility and requirement fulfillment.

```plantuml
@startuml LAYOUT_AS_SKETCH Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

LAYOUT_AS_SKETCH()

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
```

--------------------------------

### Import C4 Sequence Diagram

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Import the C4_Sequence.puml library for C4-styled sequence diagrams. Note that boundaries require specific handling.

```plantuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml
```

--------------------------------

### Configure External System Element Colors

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Defines colors for external system elements.

```plantuml
!$EXTERNAL_SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$EXTERNAL_SYSTEM_BG_COLOR ?= "#999999"
!$EXTERNAL_SYSTEM_BORDER_COLOR ?= "#8A8A8A"
```

--------------------------------

### Configure System Element Colors

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Defines colors for system elements.

```plantuml
!$SYSTEM_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$SYSTEM_BG_COLOR ?= "#1168BD"
!$SYSTEM_BORDER_COLOR ?= "#3C7FC0"
```

--------------------------------

### Sequence Diagram Macros

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Details on using C4-PlantUML for sequence diagrams, including limitations and specific macros.

```APIDOC
## (C4 styled) Sequence Diagram

C4-PlantUML does not offer full sequence diagram support but allows reusing existing elements and relationships as participants and calls.

**Important:** Define boundaries without `{` and `}` and mark a boundary end with `Boundary_End()`.

### Import
`!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml`

### Macros (based on component diagram macros)

- Element specific macros (Person, System, Container...) can be reused. Element descriptions are typically not displayed (can be activated via `SHOW_ELEMENT_DESCRIPTIONS()`).
- Boundaries must be defined without `{` and `}` and end with `Boundary_End()`.

#### Additional Macros

- `Boundary_End()`

#### Additional Layout Options

- `SHOW_ELEMENT_DESCRIPTIONS(?show)`
- `SHOW_FOOT_BOXES(?show)`
- `SHOW_INDEX(?show)`

#### Supported Relationship Macros

- `Rel($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="", $index="", $rel="")`
  - `$index`: Enables definition of active/next index with related index macros.
  - `$rel`: Enables definition of PlantUML specific arrow types. See [All arrow types](https://plantuml.com/sequence-diagram#4764f83f72ed032f) and [Slanted or odd arrows](https://plantuml.com/sequence-diagram#5bd6712206960fab).

#### Index Related Macros

- `Index($offset=1)`: Returns current index and calculates next index (function).
- `SetIndex($new_index)`: Returns new set index and calculates next index (function).
- `LastIndex()`: Returns the last used index (function).
- `increment($offset=1)`: Increases current index (procedure).
- `setIndex($new_index)`: Sets the new index (procedure).

### Typically Additional Used PlantUML Statements

- [Grouping message](https://plantuml.com/sequence-diagram#425ba4350c02142c)
- [Divider or separator](https://plantuml.com/sequence-diagram#d4b2df53a72661cc)
- [Reference](https://plantuml.com/sequence-diagram#63d5049791d9d79d)
- [Delay](https://plantuml.com/sequence-diagram#8f497c1a3d15af9e)
```

--------------------------------

### Configure Legend Colors and Sizes

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Sets colors and font sizes for diagram legends.

```plantuml
!$LEGEND_TITLE_COLOR ?= "#000000"
!$LEGEND_FONT_COLOR ?= "#FFFFFF"
!$LEGEND_BG_COLOR ?= "transparent"
!$LEGEND_BORDER_COLOR ?= "transparent"
!$LEGEND_DARK_COLOR ?= "#66622E"
!$LEGEND_LIGHT_COLOR ?= "#khaki"

!$LEGEND_DETAILS_SMALL_SIZE ?= 10
!$LEGEND_DETAILS_NORMAL_SIZE ?= 14
```

--------------------------------

### Show Element Descriptions in Sequence Diagram

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/LayoutOptions.md

Illustrates how to use SHOW_ELEMENT_DESCRIPTIONS() to display descriptions for elements and participants in a C4 sequence diagram. Descriptions are hidden by default.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml

SHOW_ELEMENT_DESCRIPTIONS()

Person(admin, "Administrator", "People that administrates the products")
System_Boundary(c1, 'Sample')
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
' in a sequence diagram Boundary_End() has to be used instead of  { }
Boundary_End()
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```

--------------------------------

### C4-PlantUML Macro Definitions

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Overview of the available macros for defining system elements in C4-PlantUML diagrams.

```APIDOC
## C4-PlantUML Macro Reference

### Description
This library provides macros to define architectural elements. Arguments marked with '?' are optional.

### System Context Macros
- **Person(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)**
- **System(alias, label, ?descr, ?sprite, ?tags, ?link, ?type, ?baseShape)**
- **SystemDb(alias, label, ?descr, ?sprite, ?tags, ?link, ?type)**
- **Boundary(alias, label, ?type, ?tags, ?link, ?descr)**

### Container Macros
- **Container(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)**
- **ContainerDb(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)**
- **ContainerQueue(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)**

### Component Macros
- **Component(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link, ?baseShape)**
- **ComponentDb(alias, label, ?techn, ?descr, ?sprite, ?tags, ?link)**

### Usage Example
```plantuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "Administrator")
Container(api, "API", "Java", "Handles requests")
Rel(admin, api, "Uses", "https")
```
```

--------------------------------

### Combine C4_blue with NEW_C4_STYLE

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Enabling the NEW_C4_STYLE flag allows for updated styling when using basic themes like C4_blue.

```plantuml
!NEW_C4_STYLE=1
!theme C4_blue from https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/themes
```

--------------------------------

### Include C4-PlantUML in Diagrams

Source: https://context7.com/plantuml-stdlib/c4-plantuml/llms.txt

Use the !include directive to import the necessary C4-PlantUML library files based on the required diagram type.

```puml
@startuml
' Include from PlantUML stdlib (recommended for online use)
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

' Or include locally
' !include C4_Context.puml

' Available include files:
' C4_Context.puml  - System Context diagrams
' C4_Container.puml - Container diagrams
' C4_Component.puml - Component diagrams
' C4_Deployment.puml - Deployment diagrams
' C4_Dynamic.puml - Dynamic diagrams with numbered interactions
' C4_Sequence.puml - Sequence diagrams
@enduml
```

--------------------------------

### Import C4 Dynamic Diagram

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Import the C4_Dynamic.puml library to enable dynamic diagram features. This is the primary step for creating dynamic diagrams.

```plantuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml
```

--------------------------------

### Display C4-PlantUML Version Information

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Shows how to display the current C4-PlantUML version using `C4Version()` and detailed version information including the PlantUML version using `C4VersionDetails()`. These can be used directly in diagrams or within footers.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' existing plantuml version as text
%version()

' new C4-Plantuml version as text 
C4Version()

' new C4-Plantuml version details (incl. PlantUML version) as table
C4VersionDetails()

' version functions used in e.g. footer
footer drawn with PlantUML v. %version() and C4-PlantUML v. C4Version()
@enduml
```

--------------------------------

### Use Predefined Person and Robot Sprites

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Demonstrates the use of built-in person and robot sprites within C4-PlantUML components.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

Person(pB, "Sam", $sprite="person2")
Person_Ext(pA, "Bob", $sprite="person")

System_Ext(robB, "Robot A", $sprite="robot2")
System_Ext(robA, "Robot B", $sprite="robot")

SHOW_LEGEND()
@enduml
```

--------------------------------

### Define Components with C4-PlantUML

Source: https://context7.com/plantuml-stdlib/c4-plantuml/llms.txt

Use the Component macro to define internal building blocks like controllers and services within a container boundary.

```puml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

LAYOUT_WITH_LEGEND()

Container(spa, "Single Page Application", "JavaScript, Angular", "Banking frontend")
ContainerDb(db, "Database", "PostgreSQL", "Stores user data")
System_Ext(mainframe, "Mainframe", "Core banking system")

Container_Boundary(api, "API Application") {
    ' Controller components
    Component(signin, "Sign In Controller", "Spring MVC Controller", "Handles user authentication")
    Component(accounts, "Accounts Controller", "Spring MVC Controller", "Provides account summaries")

    ' Service components
    Component(security, "Security Component", "Spring Bean", "Authentication and authorization logic")
    Component(facade, "Mainframe Facade", "Spring Bean", "Facade for mainframe integration")

    ' Internal relationships
    Rel(signin, security, "Uses")
    Rel(accounts, facade, "Uses")
    Rel(security, db, "Reads/writes", "JDBC")
    Rel(facade, mainframe, "Uses", "XML/HTTPS")
}

Rel(spa, signin, "Authenticates via", "JSON/HTTPS")
Rel(spa, accounts, "Gets accounts from", "JSON/HTTPS")

@enduml
```

--------------------------------

### PlantUML Command Line Argument for Local Includes

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Use this command line argument with PlantUML to specify the directory for relative includes, allowing local use of C4-PlantUML files.

```bash
java -jar plantuml.jar -DRELATIVE_INCLUDE="."  ...
```

--------------------------------

### Configure Person Element Colors

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Defines font, background, and border colors for person elements.

```plantuml
!$PERSON_FONT_COLOR ?= $ELEMENT_FONT_COLOR
!$PERSON_BG_COLOR ?= "#08427B"
!$PERSON_BORDER_COLOR ?= "#073B6F"
```

--------------------------------

### Use baseShape in C4 components

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/LayoutOptions.md

Demonstrates applying the baseShape argument to components to override their default visual representation.

```plantuml
@startuml
!ENABLE_ALL_PLANT_ELEMENTS = 1
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

Component(comp, "Copy component")

Component(config, "Config component", $baseShape="package")

ComponentDb(dbA, "DB A")
' alternative syntax for ComponentDb() with $baseShape="database"
Component(dbB, "DB B", $baseShape="database")

Rel_U(comp, config, "Configured by")
Rel_L(comp, dbA, "Reads from")
Rel_R(comp, dbB, "Writes to")

SHOW_LEGEND()
@enduml
```

--------------------------------

### Configure Container Boundary Styles

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Inherits boundary styles for container boundaries.

```plantuml
!$CONTAINER_BOUNDARY_COLOR ?= $BOUNDARY_COLOR
!$CONTAINER_BOUNDARY_BG_COLOR ?= $BOUNDARY_BG_COLOR
!$CONTAINER_BOUNDARY_BORDER_STYLE ?= $BOUNDARY_BORDER_STYLE
```

--------------------------------

### Define Person Elements

Source: https://context7.com/plantuml-stdlib/c4-plantuml/llms.txt

Use Person or Person_Ext macros to represent users or actors, with support for custom sprites and descriptions.

```puml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

' Basic person
Person(user, "User", "A user of the system")

' Person with detailed description
Person(admin, "Administrator", "System administrator with elevated privileges to manage users and configurations")

' External person (different styling)
Person_Ext(external_user, "External User", "Third-party user accessing the system via API")

' Person with custom sprite
Person(dev, "Developer", "Software developer", $sprite="person2")

@enduml
```

--------------------------------

### Configure Arrow Styles

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/Themes.md

Defines colors and font size for diagram arrows.

```plantuml
!$ARROW_COLOR ?= "#666666"
!$ARROW_FONT_COLOR ?= $ARROW_COLOR
!$ARROW_FONT_SIZE ?= 12
```

--------------------------------

### Control Diagram Layout with LAYOUT Procedures

Source: https://context7.com/plantuml-stdlib/c4-plantuml/llms.txt

Customize diagram layout direction and appearance. Use LAYOUT_TOP_DOWN for vertical, LAYOUT_LEFT_RIGHT for horizontal, or LAYOUT_LANDSCAPE for rotated layouts. LAYOUT_AS_SKETCH() enables a draft mode, which can be further styled with SET_SKETCH_STYLE().

```puml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' Layout direction
LAYOUT_TOP_DOWN()      ' Default vertical layout
' LAYOUT_LEFT_RIGHT()  ' Horizontal layout
' LAYOUT_LANDSCAPE()   ' Rotated landscape layout

' Sketch mode for draft diagrams
' LAYOUT_AS_SKETCH()

' Customize sketch style
' SET_SKETCH_STYLE($bgColor="#EEEBDC", $fontColor="#333333", $warningColor="red")

title Container Diagram with Custom Layout

Person(user, "User")

System_Boundary(sys, "System") {
    Container(a, "Service A", "Go")
    Container(b, "Service B", "Java")
    Container(c, "Service C", "Python")
}

Rel(user, a, "Uses")
Rel(a, b, "Calls")
Rel(b, c, "Triggers")

' Layout helpers to control element positioning
Lay_D(a, b)     ' Force B below A
Lay_R(b, c)     ' Force C right of B
Lay_Distance(a, c, "1")  ' Add distance between A and C

' Legend options
' LAYOUT_WITH_LEGEND()      ' Static legend
' SHOW_LEGEND()             ' Dynamic legend (recommended, place at end)
' SHOW_FLOATING_LEGEND()    ' Positionable legend

SHOW_LEGEND()
@enduml
```

--------------------------------

### Import C4 Component Diagrams

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Required import for Component diagrams.

```plantuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
```

--------------------------------

### Enable Foot Boxes in Sequence Diagrams

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/LayoutOptions.md

Use SHOW_FOOT_BOXES() to display foot boxes at the bottom of a sequence diagram.

```plantuml
@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Sequence.puml

SHOW_FOOT_BOXES()

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")
' in a sequence diagram Boundary_End() has to be used instead of  { }
Boundary_End()
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml
```

--------------------------------

### C4 Sequence Diagram Layout Options

Source: https://github.com/plantuml-stdlib/c4-plantuml/blob/master/README.md

Optional macros to control the display of element descriptions, foot boxes, and indices in C4 sequence diagrams.

```plantuml
SHOW_ELEMENT_DESCRIPTIONS(?show)
```

```plantuml
SHOW_FOOT_BOXES(?show)
```

```plantuml
SHOW_INDEX(?show)
```