Diagrams as Code

Diagrams as Code tools shift how diagrams are created and maintained by describing objects and their relationships using code, rather than drawing objects with a graphical editor. The tool will dynamically calculate layout and render the diagram.

D2 Diagram

D2 Source

direction: right
x -> y: hi {
  style.animated: true
}
x.style.animated: true

Mermaid Diagram

Mermaid Source

mindmap
  root((Pictures))
    (Diagrams as Code)
      D2
      Mermaid
    (Image files)
      JPG
      PNG
      SVG

Overall, this approach may not solve all of your diagramming needs, but they are nice tools to have available.

Advantages

This approach is particularly popular within software development and system architecture because it offers the following advantages:

1. Diagrams are easier to maintain because changes to the code will produce new diagrams.
2. Time is not wasted tediously tweaking diagrams with a graphical editor.
3. The code can be version controlled, making it easier to understand what changed, when, and by whom.

Disadvantages

Admittedly, there are some disadvantages:

1. You have less control over visuals.
2. Dynamic layouts can mean that small tweaks can produce a radical layout change.

Solutions

Starlight Starter offers two Diagrams as Code solutions:

1. D2: Declarative Diagramming
2. Mermaid: Diagramming and charting tool

Both options offer unique features, so both are highly recommended.