Visualize the architecture

Warning

System architecture diagrams represent the system architecture but they are not the system architecture.

`Draw.io`

You can prototype diagrams in docs/diagrams/prototype via the hediet.vscode-drawio extension (example).

However, it's not a good idea to version control images because you can't conveniently visualize their diffs and therefore can't track changes well.

Therefore, you must use the diagrams as code approach and eventually switch to one of the following tools:

PlantUML supports all the necessary types of diagrams. Therefore, we recommend using it to visualize the architecture.

If you want to preview the PlantUML diagrams in VS Code, follow these steps:

Install the jebbs.plantuml VS Code extension.
Install Docker.
Run in the terminal docker run --name plantuml-server -d -p 48080:8080 plantuml/plantuml-server:jetty to start a PlantUML server.
Open the PlantUML server in the browser at http://localhost:48080 to make sure it works.
In VS Code, in the docs/diagrams/src/ directory, open a PlantUML file with the .puml extension.
Click the Preview Current Diagram icon.

The extension should connect to the PlantUML server and render the diagram.

The 48080 port is already set in .vscode/settings.json.
Write the PlantUML code in docs/diagrams/src/ and render the diagrams to SVG in docs/diagrams/out/ using the jebbs.plantuml extension. These directories are already set in .vscode/settings.json.
To render diagrams to SVG, open the Command Palette, write PlantUML: Export Workspace Diagrams, and choose svg.
Embed the rendered images into your Markdown file.

You can write Mermaid code in Markdown files in code blocks with the mermaid language tag (see docs).

Other tools that implement the diagrams as code approach include: