Add Component Node for C4 model

[jseop-lim]

This Pull Request introduces a new feature: the addition of C4 model Component nodes.

Previously, there were no Component nodes available for creating Component diagrams at the C4 model Level 3. This enhancement allows for the creation of Component diagrams, filling an important gap in the current functionality.

Changes

• Implemented C4 model Component nodes.

Testing

• Added tests to verify that the Component nodes render correctly.

Request for Feedback

• Please provide feedback on the internal color and text color of the Component nodes. Your suggestions will help improve the visual clarity and aesthetics of the diagrams.

Impact

This enhancement should have no breaking changes for existing users. It is designed to be an additive feature that extends the capabilities without affecting current functionalities.

Example Usage

Code for drawing C4 model examples:

from diagrams import Diagram
from diagrams.c4 import Component, Container, Database, System, SystemBoundary, Relationship

graph_attr = {
    "splines": "spline",
}

with Diagram(
    "Component diagram for Internet Banking System - API Application",
    direction="TB",
    graph_attr=graph_attr,
    show=False,
):
    spa = Container(
        name="Single-Page Application",
        technology="Javascript and Angular",
        description="Provides all of the Internet banking functionality to customers via their web browser.",
    )

    mobileapp = Container(
        name="Mobile App",
        technology="Xamarin",
        description="Provides a limited subset of the Internet banking functionality to customers via their mobile device.",
    )

    with SystemBoundary("Internet Banking System"):
        sign_in_controller = Component(
            name="Sign In Controller",
            technology="Spring MVC Rest Controller",
            description="Allows users to sign in to the Internet Banking System.",
        )

        security_component = Component(
            name="Security Component",
            technology="Spring Bean",
            description="Provides functionality related to signing in, changing passwords, etc.",
        )

        reset_password_controller = Component(
            name="Reset Password Controller",
            technology="Spring MVC Rest Controller",
            description="Allows users to reset their password with a single use URL.",
        )

        email_component = Component(
            name="Email Component",
            technology="Spring Bean",
            description="Sends e-mails to users.",
        )

        accounts_summary_controller = Component(
            name="Accounts Summary Controller",
            technology="Spring MVC Rest Controller",
            description="Provides customers with a summary of their bank accounts.",
        )

        mainframe_banking_system_facade = Component(
            name="Mainframe Banking System Facade",
            technology="Spring Bean",
            description="A facade onto the mainframe banking system.",
        )

    database = Database(
        name="Database",
        technology="Oracle Database Schema",
        description="Stores user registration information, hashed authentication credentials, access logs, etc.",
    )

    email = System(
        name="E-mail System",
        description="The internal Microsoft Exchange e-mail system.",
        external=True,
    )

    mainframe = System(
        name="Mainframe Banking System",
        description="Stores all of the core banking information about customers, accounts, transactions, etc.",
        external=True,
    )

    spa >> Relationship("Make API calls to [JSON/HTTPS]") >> sign_in_controller
    spa >> Relationship("Make API calls to [JSON/HTTPS]") >> reset_password_controller
    spa >> Relationship("Make API calls to [JSON/HTTPS]") >> accounts_summary_controller
    mobileapp >> Relationship("Make API calls to [JSON/HTTPS]") >> sign_in_controller
    mobileapp >> Relationship("Make API calls to [JSON/HTTPS]") >> reset_password_controller
    mobileapp >> Relationship("Make API calls to [JSON/HTTPS]") >> accounts_summary_controller

    sign_in_controller >> Relationship("Uses") >> security_component
    reset_password_controller >> Relationship("Uses") >> security_component
    reset_password_controller >> Relationship("Uses") >> email_component
    accounts_summary_controller >> Relationship("Uses") >> mainframe_banking_system_facade

    security_component >> Relationship("Reads from and writes to [SQL/TCP]") >> database
    email_component >> Relationship("Sends e-mail using") >> email
    mainframe_banking_system_facade >> Relationship("Makes API calls to [XML/HTTPS]") >> mainframe

It produces a diagram like this:

[janstice]

semi-nit: Could probably edit to component_atributes here

[janstice]

and +1 to this idea (your solution is pretty much what I have in my code) - do you think it's worth making a Container that can act as a boundary too?