5. Using C4 To Architect ACME Global Widget Production

Tip

See Using PlantUML Stdlib C4 Lightweight Software Architecture Description Method for explanation of C4 and PlantUML Stdlib support for it.

5.1. C4 ACME Global Widget Production

Your mission, if you choose to accept it, is to design the ACME Global Widget Production System.

1. ACME has its own production sites, and uses 3rd party production sites.

2. All sites are connected to a central production host

3. Each production site consists of several workstations

4. Monitoring and Analytics is in the scope of what we are creating/changing - SupplyChain and InventoryTracking are not

5.1.1. C4 ACME Context

C4 ACME Context

5.1.1.1. Play

Press to play around with this diagram source online.

5.1.1.2. Explore

1. There was a last minute decision to put InventoryTracking in scope for the system we’re creating/changing. Update the diagram.

5.1.1.3. Source

@startuml
!include  <C4/C4_Context.puml>
!include <office/Users/user.puml>

LAYOUT_WITH_LEGEND()


title Top level Context diagram for ACME Global Widget Production


Person(AcmeProdOwner, Acme Production Owner , "<$user> \n Responsible for Production of widgets in ACME Production Site" )
Person(3rdProdOwner, 3rdParty Production Owner , "<$user> \n Responsible for Production of widgets in 3rdParty Production Site" )


System_Boundary(Remote, "Remote") {

    System(ProdSystemHost, "Production Host", "Drives widget Production\n Analyses widget Production data to create reports")
    System(Analytics, "Analytics", "Provides data analysis and a dashboard view data - including relevant Production data")
    System(Monitoring, "Monitoring", "Monitors Production Host\nUses AWS Services")
    System_Ext(SupplyChain, "SupplyChain", "Provides parts to make the widgets")
    System_Ext(InventoryTracking, "InventoryTracking", "Customer Reference")
    

}



Enterprise_Boundary(AcmeProd, "ACME Production Site") {

    System(AcmeWorkStation1, "WorkStation1", " Production setup for a group of widgets")    
    System(AcmeWorkStation2, "WorkStation2", " Production setup for a group of widgets")        
    System(AcmeWorkStationN, "WorkStationN", " Production setup for a group of widgets")        

}


Enterprise_Boundary(3rdProd, "3rdParty Production Site") {


    System(3rdWorkStation1, "WorkStation1", " Production setup for a group of widgets")    
    System(3rdWorkStation2, "WorkStation2", " Production setup for a group of widgets")        
    System(3rdWorkStationN, "WorkStationN", " Production setup for a group of widgets")     
}


Rel_U(AcmeWorkStation1, ProdSystemHost, "Sends Production report for widget")
Rel_U(AcmeWorkStation2, ProdSystemHost, "Sends Production report for widget")
Rel_U(AcmeWorkStationN, ProdSystemHost, "Sends Production report for widget")


Rel_U(3rdWorkStation1, ProdSystemHost, "Sends Production report for widget")
Rel_U(3rdWorkStation2, ProdSystemHost, "Sends Production report for widget")
Rel_U(3rdWorkStationN, ProdSystemHost, "Sends Production report for widget")





Rel_D(AcmeProdOwner, ProdSystemHost, "Reviews Acme and 3rdParty site Production reports")
Rel_D(3rdProdOwner, ProdSystemHost, "Reviews 3rdParty site Production reports")


Rel_D(Analytics, ProdSystemHost, "Data Analysis")
Rel_D(SupplyChain, ProdSystemHost, "Parts")
Rel_D(InventoryTracking, ProdSystemHost, "Tracking")
Rel_D(Monitoring, ProdSystemHost, "Monitoring")

footer %filename() rendered with PlantUML version %version()\nThe Hitchhiker’s Guide to PlantUML

@enduml

5.1.2. C4 ACME Container

C4 ACME Workstation

5.1.2.1. Play

Press to play around with this diagram source online.

5.1.2.2. Explore

1. Add another hub and several Units to the Workstation PC.

5.1.2.3. Source

@startuml
!include  <C4/C4_Context.puml>
!include  <C4/C4_Container.puml>
!include <office/Users/user.puml>

LAYOUT_WITH_LEGEND()
skinparam handwritten false


title Container Diagram for ACME Widget Workstation 



System_Boundary(WorkStation, "Workstation") {
    Person(AcmeOperator, Operator , "<$user> \n On-site Operator who produces Widget" )

    System(WorkStationPC, "WorkStation PC", "Drives the Production process. \nProvides feedback to operator. \nConnects to central Production system")    

    System(Hub, "Hub", "Connects Multiple Widgets")    

    System(Unit1, "Unit1", "Widget 1")    
    System(Unit2, "Unit2", "Widget 2")    
    System(UnitN, "UnitN", "Widget N")    
}

Rel_R(AcmeOperator, WorkStationPC, "Checks Production status")
Rel_D(WorkStationPC, Hub, "Drive Production and Info Retrieval")
Rel(Hub, Unit1, "Connect")
Rel(Hub, Unit2, "Connect")
Rel(Hub, UnitN, "Connect")

footer %filename() rendered with PlantUML version %version()\nThe Hitchhiker’s Guide to PlantUML
@enduml

5.1.3. C4 ACME Component

C4 ACME Analytics Component uses an ELK/Elasticsearch stack

C4 ACME Component Monitoring uses AWS services

5.1.3.1. Play

Press to play around with this diagram source online.

5.1.3.2. Source

@startuml

'AWS stuff here
'================================
!includeurl <aws/common.puml>
!includeurl <aws/SDKs/Java/Java.puml>
!includeurl <aws/SDKs/Nodejs/Nodejs.puml>

!includeurl <aws/General/users/users.puml>
!includeurl <aws/General/client/client.puml>
!includeurl <aws/General/AWScloud/AWScloud.puml>
!includeurl <aws/General/mobileclient/mobileclient.puml>

!includeurl <aws/Database/AmazonRDS/AmazonRDS.puml>
!includeurl <aws/Database/AmazonRDS/DBinstance/DBinstance.puml>
!includeurl <aws/Database/AmazonRDS/MySQLDBinstance/MySQLDBinstance.puml>

!includeurl <aws/Compute/AWSElasticBeanstalk/AWSElasticBeanstalk.puml>
!includeurl <aws/Compute/AWSElasticBeanstalk/deployment/deployment.puml>
!includeurl <aws/Compute/AWSElasticBeanstalk/application/application.puml>
!includeurl <aws/Compute/ElasticLoadBalancing/ApplicationLoadBalancer/ApplicationLoadBalancer.puml>
!includeurl <aws/Compute/AWSLambda/AWSLambda.puml>
!includeurl <aws/Compute/AWSLambda/LambdaFunction/LambdaFunction.puml>

!includeurl <aws/Storage/AmazonS3/AmazonS3.puml>
!includeurl <aws/Storage/AmazonS3/bucket/bucket.puml>
!includeurl <aws/Storage/AmazonGlacier/AmazonGlacier.puml>
!includeurl <aws/Storage/AmazonGlacier/archive/archive.puml>

!includeurl <aws/SecurityIdentityCompliance/AWSIAM/AWSIAM.puml>
!includeurl <aws/SecurityIdentityCompliance/IAM/permissions/permissions.puml>
!includeurl <aws/SecurityIdentityCompliance/IAM/role/role.puml>

!includeurl <aws/MobileServices/AmazonCognito/AmazonCognito.puml>
!includeurl <aws/NetworkingContentDelivery/AmazonRoute53/AmazonRoute53.puml>
!includeurl <aws/SecurityIdentityCompliance/AWSIAM/AWSIAM.puml>

!includeurl <aws/Analytics/AmazonES/AmazonES.puml>
!includeurl <aws/ManagementTools/AmazonCloudWatch/AmazonCloudWatch.puml>

'Elastic stuff here
'================================
!define ELASTIC_PUML elastic
!include <elastic/apm/apm.puml>
!include <elastic/app_search/app_search.puml>
!include <elastic/beats/beats.puml>
!include <elastic/cloud/cloud.puml>
!include <elastic/cloud_in_kubernetes/cloud_in_kubernetes.puml>
!include <elastic/code_search/code_search.puml>
!include <elastic/ece/ece.puml>
!include <elastic/eck/eck.puml>
!include <elastic/elasticsearch/elasticsearch.puml>
!include <elastic/endpoint/endpoint.puml>
!include <elastic/enterprise_search/enterprise_search.puml>
!include <elastic/kibana/kibana.puml>
!include <elastic/logging/logging.puml>
!include <elastic/logstash/logstash.puml>
!include <elastic/maps/maps.puml>
!include <elastic/metrics/metrics.puml>
!include <elastic/siem/siem.puml>
!include <elastic/site_search/site_search.puml>
!include <elastic/stack/stack.puml>
!include <elastic/uptime/uptime.puml>



'change color of selected background shape https://plantuml.com/deployment-diagram
skinparam actorBackgroundColor White 
skinparam agentBackgroundColor White 
skinparam artifactBackgroundColor White 
skinparam boundaryBackgroundColor White 
skinparam cardBackgroundColor White 
skinparam cloudBackgroundColor White 
skinparam componentBackgroundColor White 
skinparam controlBackgroundColor White 
skinparam databaseBackgroundColor White 
skinparam entityBackgroundColor White 
skinparam fileBackgroundColor White 
skinparam folderBackgroundColor White 
skinparam frameBackgroundColor White 
skinparam interfaceBackgroundColor White 
skinparam nodeBackgroundColor White 
skinparam packageBackgroundColor White 
skinparam queueBackgroundColor White 
skinparam stackBackgroundColor White 
skinparam rectangleBackgroundColor White 
skinparam storageBackgroundColor White 
skinparam usecaseBackgroundColor White 



'To change background color to elastic green
'skinparam componentBackgroundColor 00BFB3 

AWSCLOUD(aws) {

    AMAZONS3(s3_bucket,"Logs uploaded to here")

package Elastic {

    'add "node", "component", "agent" etc... to change background shape per https://plantuml.com/deployment-diagram
    'default is agent 
    ELASTICSEARCH(ElasticSearch, "Search and Analyze",database)
    LOGSTASH(Logstash, "Parse and Transform",node)
    KIBANA(Kibana, "Visualize",agent) 
}

    s3_bucket -down-> Logstash: Raw logs
    Logstash -right-> ElasticSearch: Transformed Data
    ElasticSearch -right-> Kibana: Data to View

}
footer %filename() rendered with PlantUML version %version()\nThe Hitchhiker’s Guide to PlantUML
@enduml

5.1.3.3. Play

Press to play around with this diagram source online.

5.1.3.4. Source

 
!includeurl <aws/common>
!includeurl <aws/SDKs/Java/Java.puml>
!includeurl <aws/SDKs/Nodejs/Nodejs.puml>

!includeurl <aws/General/users/users.puml>
!includeurl <aws/General/client/client.puml>
!includeurl <aws/General/AWScloud/AWScloud.puml>
!includeurl <aws/General/mobileclient/mobileclient.puml>

!includeurl <aws/Database/AmazonRDS/AmazonRDS.puml>
!includeurl <aws/Database/AmazonRDS/DBinstance/DBinstance.puml>
!includeurl <aws/Database/AmazonRDS/MySQLDBinstance/MySQLDBinstance.puml>

!includeurl <aws/Compute/AWSElasticBeanstalk/AWSElasticBeanstalk.puml>
!includeurl <aws/Compute/AWSElasticBeanstalk/deployment/deployment.puml>
!includeurl <aws/Compute/AWSElasticBeanstalk/application/application.puml>
!includeurl <aws/Compute/ElasticLoadBalancing/ApplicationLoadBalancer/ApplicationLoadBalancer.puml>
!includeurl <aws/Compute/AWSLambda/AWSLambda.puml>
!includeurl <aws/Compute/AWSLambda/LambdaFunction/LambdaFunction.puml>

!includeurl <aws/Storage/AmazonS3/AmazonS3.puml>
!includeurl <aws/Storage/AmazonS3/bucket/bucket.puml>
!includeurl <aws/Storage/AmazonGlacier/AmazonGlacier.puml>
!includeurl <aws/Storage/AmazonGlacier/archive/archive.puml>

!includeurl <aws/SecurityIdentityCompliance/AWSIAM/AWSIAM.puml>
!includeurl <aws/SecurityIdentityCompliance/IAM/permissions/permissions.puml>
!includeurl <aws/SecurityIdentityCompliance/IAM/role/role.puml>

!includeurl <aws/MobileServices/AmazonCognito/AmazonCognito.puml>
!includeurl <aws/NetworkingContentDelivery/AmazonRoute53/AmazonRoute53.puml>
!includeurl <aws/SecurityIdentityCompliance/AWSIAM/AWSIAM.puml>

!includeurl <aws/Analytics/AmazonES/AmazonES.puml>
!includeurl <aws/ManagementTools/AmazonCloudWatch/AmazonCloudWatch.puml>
!includeurl <aws/ManagementTools/AWSCloudTrail/AWSCloudTrail.puml>

!includeurl <aws/Messaging/AmazonSNS/AmazonSNS.puml>

skinparam componentArrowColor Black
skinparam componentBackgroundColor White
skinparam nodeBackgroundColor White
skinparam agentBackgroundColor White
skinparam artifactBackgroundColor White





AWSCLOUD(awscloud){
 
    
    APPLICATIONLOADBALANCER(loadbalancer, "ALB Logs")
    AMAZONS3(S3, "S3 access Logs")
    AWSLAMBDA(Lambda, "Lambda logs\nand metrics")
    AWSCLOUDTRAIL(AWSCloudTrail, "API logs")
    
    AMAZONCLOUDWATCH(AmazonCloudWatch)
    AMAZONSNS(AmazonSNS, "Send Notifications\n to Owner/Admin")


    loadbalancer --> AmazonCloudWatch
    S3 --> AmazonCloudWatch
    Lambda --> AmazonCloudWatch
    AWSCloudTrail --> AmazonCloudWatch
    
    AmazonCloudWatch --> AmazonSNS
 
}
footer %filename() rendered with PlantUML version %version()\nThe Hitchhiker’s Guide to PlantUML
@enduml

5.1.3.5. Explore

1. Add a component diagram for the Production Host