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

#c4 #c5 #diagrams #architecture

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

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