Component diagram

Next you can zoom in and decompose a container to describe the components that reside inside it; including their responsibilities and the technology/implementation details.

Example

The following example demonstrates how to define a component diagram using the Python DSL.

from c4 import (
    Component,
    ComponentDiagram,
    Container,
    ContainerBoundary,
    ContainerDb,
    Rel,
    SystemExt,
)
from c4.renderers.plantuml import LayoutOptions

with ComponentDiagram(
    title="Component diagram for Internet Banking System - API Application"
) as diagram:
    spa = Container(
        "spa",
        "Single Page Application",
        "javascript and angular",
        "Provides all the internet banking functionality to customers via their web browser.",
    )
    ma = Container(
        "ma",
        "Mobile App",
        "Xamarin",
        "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.",
    )
    db = ContainerDb(
        "db",
        "Database",
        "Relational Database Schema",
        "Stores user registration information, hashed authentication credentials, access logs, etc.",
    )
    mbs = SystemExt(
        "mbs",
        "Mainframe Banking System",
        "Stores all of the core banking information about customers, accounts, transactions, etc.",
    )

    with ContainerBoundary("api", "API Application"):
        sign = Component(
            "sign",
            "Sign In Controller",
            "MVC Rest Controller",
            "Allows users to sign in to the internet banking system",
        )
        accounts = Component(
            "accounts",
            "Accounts Summary Controller",
            "MVC Rest Controller",
            "Provides customers with a summary of their bank accounts",
        )
        security = Component(
            "security",
            "Security Component",
            "Spring Bean",
            "Provides functionality related to singing in, changing passwords, etc.",
        )
        mbsfacade = Component(
            "mbsfacade",
            "Mainframe Banking System Facade",
            "Spring Bean",
            "A facade onto the mainframe banking system.",
        )

        sign >> Rel("Uses") >> security
        accounts >> Rel("Uses") >> mbsfacade
        security >> Rel("Read & write to", "JDBC") >> db
        mbsfacade >> Rel("Uses", "XML/HTTPS") >> mbs

    spa >> Rel("Uses", "JSON/HTTPS") >> sign
    spa >> Rel("Uses", "JSON/HTTPS") >> accounts

    ma >> Rel("Uses", "JSON/HTTPS") >> sign
    ma >> Rel("Uses", "JSON/HTTPS") >> accounts

    layout_options = LayoutOptions().layout_with_legend()

diagram_code = diagram.as_plantuml(layout_options=layout_options)

Generated PlantUML source

@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="relative/absolute" to use locally
!if %variable_exists("RELATIVE_INCLUDE")
    !include %get_variable_value("RELATIVE_INCLUDE")/C4_Component.puml
!else
    !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
!endif

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.")

ContainerDb(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 Controller", "Allows users to sign in to the internet banking system")

    Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary 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

The PlantUML source can be rendered into the following diagram: