Diagraming as Code and Modeling as Code


Level 1 : Context : 30 000 Foot view
Level 2 : Containers : Bird Eyeview
Level 3 : Components : Worm Eyeview
Level 4 : Code :Worm Eyeview

C4 Architecture modeling uses Code UML Artecats to define code for that Simon Brown recomends PlantUML as the best Diagramming tool to use

1. Diagraming as Code with PlantUML

PlantUML is Opensource and free

PlantUML is a highly versatile tool that facilitates the rapid and straightforward creation of a wide array of diagrams.
Utilizing a simple and intuitive language, users can effortlessly draft various types of diagrams. For a detailed exploration of the language’s capabilities and syntax, please refer to the PlantUML Language Reference Guide.
If you are new to PlantUML, we recommend starting with our quick start page to get up and running quickly. Should you have any questions, our F.A.Q. page is a valuable resource. Additionally, PlantUML can be seamlessly integrated with a variety of other tools to enhance your workflow.

classes

diagrams

1.1 Website

PlantUML

Quick start

Language Reference Guide

1.2 VS Code Plugin

VS Code plugin

1.3 IntelliJ IDEA Plugins

1.3.1 PlantUML Studio
This plugin makes conveniently utilizes PlantUML on your IntelliJ project.

1.3.2 PlantUML Integration
PlantUML diagramming tool integration. Now better and faster, with code navigation and highlighting.

1.4 Videos

PlantUML - beautiful quick diagrams to explain your models
His Stylesheet

How to Make Easy UML Sequence Diagrams and Flow Charts with PlantUML

2. Software architecture models as code with Structurizr

Structurizr built by Simon Brown the creator of C4

He recommends using this tool together with PlantUML

Structurizr builds upon “diagrams as code”, allowing you to create multiple software architecture diagrams from a single model.
There are a number of tools for creating Structurizr compatible workspaces, with the Structurizr DSL being the recommended option for most teams. Designed for the C4 model

Context

2.1 Website

Structurizr

Documentation

Quick start

2.2 Videos

This video is by Simon Brown the creator of C4
C4 models as code - Simon Brown - NDC Oslo Conference 2023

3. Creating UMl Diagramming Examples

3.1 Class Diagram

  1. Open VS Code
  2. Create a PlantUML File :
    ClassDiagram1.wsd or ClassDiagram1.puml
  3. Write Your Diagram Code

Put this is the file:

@startuml
class Car {
  -make: string
  -model: string
  -year: int
  +start()
  +stop()
}
@enduml
  1. Preview Your Diagram:
    Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac

You should have this :

  1. **Export your diagram: **
  • Open the Command Palette again and select “Export Current Diagram.”
  • Choose a file format (PNG, SVG, or PDF), then select a destination folder.
  • Your diagram will be saved as an image file in the selected folder.