Have you ever looked at a thing and thought, “This is nice… but could it be code?” Probably. There’s infrastructure as code. There’s policy as code. There’s even music as code.
So, of course, there’s also diagrams as code. We sort of knew that back in 2018, when we created the Infrastructure Description Format: a way to describe the visual representation of compute infrastructure as code.
There were only two problems.
For one, the name. IDF seemed harmless enough in 2018. Today, those three letters can set off flags in some AI systems, leading to reviews for illicit activity. Not quite what we had in mind when we asked for a database and a load balancer.
But then there’s the format itself. It’s built around a simple idea: you list the components of your architecture, their groups, and their connections in CSV or JSON, and Arcentry turns them into a pretty diagram.
This makes it really easy for machines to use. But it’s a bit harder for humans to reason about.
Fortunately, the folks at Mermaid came up with a better way. And today, I’m happy to announce that Arcentry now supports Mermaid architecture diagrams.
It’s not a 1:1 copy of the Mermaid renderer. Instead, it uses Arcentry’s semantic layout capabilities, which make life much easier, especially with larger diagrams. We’ve built Arcentry to have a sense of how an infrastructure diagram should be laid out. By default, it puts databases at the back, servers in the center, and load balancers at the front.
It aligns groups based on their connections and makes routing decisions with larger diagrams in mind. We’ve now extended these capabilities with Mermaid’s layout directives. align row and align column are supported, as are junctions, arrowheads, and the like.
And of course, instead of just server, disk and database you can use any Arcentry component id such as api-integration.aws-amazon-api-gateway for a much nicer representation.
The result is an editable Arcentry diagram. You can keep updating it through code with Auto Apply, or customize it directly on the canvas.
Here’s what that looks like in practice: