Logo

dev-resources.site

for different kinds of informations.

Automatic C4 diagrams for a distributed microservice ecosystem with GitHub Actions

Published at
12/9/2021
Categories
actionshackathon21
plantuml
c4
diagram
Author
vearutop
Author
8 person written this
vearutop
open
Automatic C4 diagrams for a distributed microservice ecosystem with GitHub Actions

My Workflow

TL;DR Big picture is split into service-level fragments and those fragments are delegated to service teams. Then fragments are automatically stitched together by a GitHub Action.

This way the heavy lifting of detailed description of service relations is deferred to the best experts - service owners.

Demo.

Documenting components and their relations in an ecosystem (such as a family of microservices) is very important. When the whole system grows it is easy to lose track of what's happening, where it is happening and why. Popular solution for this problem is high level documentation with diagrams.

C4 Model helps to describe the structure in a compact and clear way. Textual form of UML makes it a perfect fit for software repositories.

Image description

Syntax example:

@startuml "cart_components"
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

System_Boundary(cart_system, "[[https://github.com/acme-corp-tech/architecture/wiki/cart_system.svg Shopping cart]]") {
    Container(cart_service, "Cart Service", "Go", "Tracks cart contents", $sprite="go")
    ContainerDb(cart_storage, "Cart Service Storage", "Redis", "", $sprite="redis")
}

@enduml
Enter fullscreen mode Exit fullscreen mode
@startuml "cart_relations"
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Rel(cart_service, cart_storage, "Stores cart contents")

@enduml
Enter fullscreen mode Exit fullscreen mode
@startuml "cart_system"
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

!include cart_components.puml
!include cart_relations.puml

@enduml
Enter fullscreen mode Exit fullscreen mode

Documentation that is maintained separately from the actual system tends to lag behind or even becomes obsolete and misleading. Keeping documentation closer to documented entity helps to sync them.

This workflow implements distributed storage of documentation with centralized renderer.

Each documented entity (microservice repository) contains own diagram fragments at ./resources/diagrams.

Centralized renderer is implemented in a separate architecture repository. Renderer knows the names of fragment owners, but does not know the contents of fragments. Fragments are fetched with a script every time the diagrams are rendered.

Centralized renderer owns main frame that includes all fragments.

Every time any of the fragments changes, central renderer is triggered to rebuild the full picture, thus keeping the diagrams up to date without any manual effort.

Rendered SVG files are then pushed to wiki repository.

Submission Category:

DIY Deployments

Yaml File or Link to Code

Main workflow to collect UML fragments and render complete diagrams as SVG:
https://github.com/acme-corp-tech/architecture/blob/main/.github/workflows/diagrams.yml.

Template workflow to trigger an update whenever fragment is changed:
https://github.com/acme-corp-tech/service-starter-kit/blob/master/.github/workflows/diagrams.yml.

This workflow is configured for every service that owns a fragment, example.

Additional Resources / Info

plantuml Article's
28 articles in total
Favicon
Run devcontainers as a non-root user
Favicon
PlantUML to compute diagrams!
Favicon
PlantUMLApp 3.0 - Let's play with AI Multi-Modality
Favicon
Create UML Class Diagrams for Java projects with IntelliJ IDEA and PlantUML
Favicon
Teoria | Documentando arquitetura de software com C4 Model + Plant UML
Favicon
Por que representar a arquitetura de uma aplicação em diagramas?
Favicon
Building a TypeScript-Compatible Webpack Loader: A PlantUML Mind Map Example
Favicon
PlantUML4iPad 2.0
Favicon
Documentation as Code for Cloud - PlantUML
Favicon
PlantUML and Jira: Combining Forces to Simplify Gantt Chart Creation
Favicon
PlantUML meets OpenAI on iPad
Favicon
Draw.io + PlantUML - Como tornar mais fácil o processo de documentação
Favicon
Create Nice-looking Schema Diagrams in PlantUML
Favicon
Keep your diagrams updated with continuous delivery
Favicon
Generate class diagrams with a Kotlin DSL for PlantUML
Favicon
Automatic C4 diagrams for a distributed microservice ecosystem with GitHub Actions
Favicon
PlantUML tips and tricks
Favicon
"Diagram as code"
Favicon
Software architecture documentation - Made easy with arc42 and C4
Favicon
Introduce the new PlantUML IntelliJ Plugin, which has high functionality editor!
Favicon
PlantUML y C4
Favicon
Text based diagramming
Favicon
Software architecture diagrams - which tool should we use?
Favicon
Modelling software architecture with PlantUML
Favicon
How to draw ER diagram with code using plantuml
Favicon
rewrite plantuml with golang or rust
Favicon
Bash/Zsh function to export SVG diagrams using PlantUML
Favicon
Handy Bash/Zsh function to generate PlantUML diagrams

Featured ones: