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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay