DEV Community

Volodymyr Pavlyshyn
Volodymyr Pavlyshyn

Posted on

1

Developers experience. Architecture Diagrams for mortals. C4 & C5 diagrams as code


So for me, Developer eXperience — is not about DevOps or pipelines. It is crucial, but the cognitive load of understanding systems is the most critical for me. The cognitive load that developers have while interacting with a system.

The most significant impedance of all modern systems — is the gap between solution architecture and code. Even architects must use the elevator

to meet the solution-application gap, we are still hoping for 5th-generation languages, but to survive with the instruments that we currently have, we use models. All models are wrong, but some of them are useful.

So C4 diagrams https://c4model.com/ and C5 (C4+ connection diagrams) give us a drill-down view from systems and users to components and classes and lower cognitive load and represent a system in a digestible human-friendly way

We use a C4 plantUML

https://github.com/plantuml-stdlib/C4-PlantUML

Quick sample

@startuml  
title Salary Statistic

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

Person(consumer, "Consumer")  
System\_Boundary(SalaryStatisticBoundary, "Salary statistic  Backend") {  
    Container(SalaryStatisticService, "Statistic Service", "")  
    ContainerDb(userDB, "User storage", "file storage")  
    ContainerDb(salaryDB, , "salary storage", "SqlLite")  
}

Rel(consumer, SalaryStatisticService, "get data")  
Rel(consumer, SalaryStatisticService, "login")  
Rel(SalaryStatisticService, userDB, "user data and scopes")  
Rel(SalaryStatisticService, salaryDB, "salary data")

@enduml
Enter fullscreen mode Exit fullscreen mode

So all our diagrams are versioned code, and if you are a lucky user of GitLab, all your diagrams could be embedded and rendered out of the box from MD files. One suggestion is to focus not on real infrastructure connections but on logical relations and put all plumbing into a connection diagram. More you could find in my video For fans of books

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (1)

Collapse
 
der_gopher profile image
Alex Pliutau

Great write-up, we also published an article on C4 recently - packagemain.tech/p/software-archit...

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more