Documenting your software architecture with C4 model, LikeC4, and (a bit of) Mermaid

Architecture was always important, but with coding agents it's even more important to nail it. And how to nail something without visualizing, interacting with it, and validating?

C4 is an approach getting more and more popularity thanks to its simplicity, and hierarchical abstractions (https://c4model.com/).

LikeC4 is a nice JavaScript-based solution for defining models, and visualizing them, potentially following C4 (https://likec4.dev/).

Mermaid is another visualization tool, and its competitive advantage is a native support in GitHub Markdown files (https://mermaid.js.org/). Worth to check, but we'll do this in the context of C4 alone.

Overall, this presentation should give you a nice idea on how to approach documenting your architecture. 30% on C4, 50% on LikeC4, 10% Mermaid, 10% freestyle/questions.