I found a cool Github repository recently that has a tool for creating diagrams from code: https://github.com/terrastruct/d2

At it’s core I think D2 is trying to make diagrams easier for programmers who generally are not as savy at creating good looking diagrams (or is that just me?).

Using a traditional GUI to create a diagram can be a total pain for me, because I am usually more interested in the content of the diagram, but most GUI based diagramming tools want you to focus on the stylizing of the content.

D2 allows me to easily focus only on the content of the diagram that I am trying to create.

See the following example:

socialmedia {
  creators
  videos
  viewers
}

othermedia: Other Media {
  audience: More Viewers
}

socialmedia.creators -> socialmedia.videos: create
socialmedia.videos <- socialmedia.viewers: watch
socialmedia.videos -> othermedia.audience: goes viral

I can create objects with properties and even add labels to them.

Then I map those properties to other objects and their members.

This is the diagram that is created by this code:

pancakes.svg

It’s utilitarian in design but represents exactly what I want. I am really excited to start using this more at work and even in personal projects that require it. I never want to drag and drop shapes on a canvas to make a diagram again.

There is built-in functionally to change themes and lots of properties within the diagram if you chose. See the docs here: https://d2lang.com/tour/layouts

Because the diagram is essentially “code” it can be versioned in source control. Making it easy to track changes over time in a visual way. I am really excited to try this out over the next few months.