How to draw software architecture diagrams (2022)
terrastruct.com
terrastruct.com
I get that ugly software diagrams are not fun to look at, but to me dressing them up is like adding curves to a line chart - yes it's visually appealing but it interferes with the data being conveyed.
Most diagrams have not had that must thought put into them. They should look a little ugly because that implies it might not be right so look for errors.
Weirdly, prettiness is the bigger red flag for me wrt to error. I see that and feel like more attention was put into that than the underlying information.
Ugly, brutalistic, utilitarian stuff tends to imply a focus on correctness to me.
If that means creating an overview of the system architecture for new team members that uses pretty colours and multiple fonts and icons and shaded boxes but that helps them to understand the system more quickly and correctly than an overwhelming page of black-and-white text and arrows, the extra styling has done its job.
Had to take Color Theory to get my BFA. We learned things like the "speed" of colors: yellow is the "fastest" and purple is the "slowest". Only a little yellow is needed to balance out a lot of purple. Same for balancing the other colors. You use these balances for guiding the eye (lots of yellow on a purple field).
When you keep this in mind, diagrams or not, then the output will be "pretty" (not jarring) and "informative" (guiding the eye to the most relevant info).
The fewer right angles, the better: I can just draw shapes and put them in roughly the right spots and it'll look fine.
The very first example: x -> y
I rendered the svg, and then loaded ONLY the svg into a browser window.
I then looked through the whole of the document and tried to find how to align the output... and couldn't find out how.
Since the linked instructional was diverging from real life results, I stopped using it. :(
If you know how to fix it or could update the directions to ensure reliable output to the directions... that would go a long way for visitors like myself :)
Edit: did a google search for "d2lang connection left to right" and ended up here: https://d2lang.com/tour/layouts/
which may be helpful to you for the question I surfaced as it isn't linked in your overview docs :)
[0] https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an...
I personally find it far quicker to use the visual aid than learning a new syntax etc.
I don't think it's a joke, though.
One thing I miss about in-office work is that people would spontaneously draw diagrams in meetings. The same diagrams would get drawn over and over again, evolving. And everybody did it, so everybody was rehearsing the architecture in their heads and had a basic grasp of it. It was like a tribe singing the same songs over and over again, trying out variations and evolving the “official” version over time.
This doesn’t happen (IME) with remote work. Drawing diagrams takes for-fricken-ever so people tend not to do it in meetings. Best case, someone shows up with a diagram, and it stays up while people talk about different ways of doing it, and after the meeting someone makes the changes that were suggested.
It really lacks the collaborative value of someone walking up to the whiteboard and saying “what if we did this,” not hesitating to make changes because they can do it in ten seconds and then wipe out their changes and redraw the original in few seconds if they want.
When somebody starts making changes to a diagram in a remote meeting, it’s a sign you’re going to be there for a long, long time.
Take a picture of a hand drawn diagram and just paste the image.
Sure it's not vectored but wiki is, well, quick wiki-wiki.
That's a reference I haven't seen in over a decade. Nice!
I agree. I’m a big fan of remote working in general but with current tools we’ve definitely lost something in this area. The practical utility of just having a huge whiteboard on the wall that everyone can see with a bunch of different coloured pens that anyone can pick up is enormous.
I hope the next generation of conferencing apps will provide shared “whiteboard” spaces as standard. Extra points if they can effectively use tablets (thinking Wacom not iPad here) so everyone can just sketch out ideas quickly and collaboratively again, and if it also provides useful and rapidly accessible tools for things like saving interesting work, editing and moving things around, and retrieving something you were looking at earlier in the discussion. I suspect there’s a significant opportunity here, a chance to fix one of the legitimate criticisms of WFH. Certainly among the smaller businesses I tend to work with, I could imagine any remote conferencing tool that got that right first would rapidly expand its market share.
Digital whiteboards aren't great, but they are useful. Interestingly though they dont' seem toe be used quite int he same way.
I still insist that for my teams all rooms that get used for meetings, formal or informal, have at least 1 big whiteboard. It's always paid off, and as you and GP note - nothing in WFH tooling quite works.
Hell, I've had team members WFH put a whiteboard in their house and an extra camera to show it; with mixed success. It's not collaborative, which reduces value. Tablets too. The workflows are all so-so.
To the extent that this is true, I don’t think I’ve ever seen them used routinely in any team or organisation I’ve worked with. I believe a large part of this is because no-one has yet found a way to use a keyboard and mouse as quickly/casually/effectively as good old pen and paper (or, in this case, marker and whiteboard). Given that so much of our work now happens remotely, I’m a little surprised that stylus-friendly devices haven’t caught on more.
I have seen teams using these whiteboard tools to good effect, but they aren't used the way a whiteboard would be, typically.
Stylus friendly devices don't solve the whole thing either.
Maybe not today, but if everyone had stylus+pad and knew how to use the related software/UI, what else do you think would be useful?
We never found a workflow that fully replaced taking turns drawing on a (shared) whiteboard.
Some people found the tools really pretty usable, so for them it was great for drawing a quick sketch and sharing with people, but it was always a bit clunky compared to physical pens. Oddly (perhaps?) some of the team were very self-conscious about drawing while others watched, more so than in person.
After a while we realized that some of the team was disengaging from the rest of conversation while sketching, in a way that noodling on paper didn't' seem to. Maybe because they were in a different physical space, so when eyes were focused on the drawing, there wasn't really much connection (other than audio)
Scaling is a problem in than nothing on a monitor seems to work as well on multiple scales as a big ass whiteboard. I mean, you can certainly represent more scales digitally, but you are pan-and-zooming all the time. The "single picture" part didn't seem to work as well.
Another thing is that we never found a digital place that has the same mental priority as big whiteboard in the common area. There was a lot of "where did we put that, is it attached to meeting or on the folder X or ...
On the whole I thought it was more positive than negative, but over time they were definitely being used less and less.
A couple of the team absolutely loved them for diagramming and completely replaced other tools for that.
To be fair, it was a "forced experiment" during covid lockdowns initially, so could certainly have been executed better.
However, there's skill involved, and you really want that multi touch+pen input.
Zoom in to write text, zoom out to draw boxes, move the canvas around, etc. Also, having a colour pallet, since that's designed into whiteboard markers for you, where digital systems give you a billion bad options
I got a laptop with a touch screen and baked in stylus. Screen share + paint is my white board. I can screenshot them and dump them into our chat logs. Works pretty well and people do seemingly find it charming.
'One thing I miss about in-office work is that people would spontaneously draw diagrams in meetings.
The same diagrams would get drawn over and over again, evolving. And everybody did it'
I miss in online meetings the start with and highlevel outline diagram, and fill in different detailed sets depending on the conversation.
I like plantuml, but it's hard to do that as fast as a white board.
Also I found that repitionion of explaining your system to multiple sets outsiders really helper refine the content.
I had a better experience using plantML for sequence diagrams. The task is easier so the output of the interpreter is typically useful without manual interventions.
I found their Lite container version perfect for local iteration on diagrams: https://docs.structurizr.com/lite/quickstart
That way in an editor like VS Code (e.g. where you have/make plugins to support) you can live preview the diagram in your editor while editing the related text - both get syntax highlighting etc. Using a tool like sphinx to tie everything together helps, as you can easily (enough) write extensions to handle quirks of your own setup reasonable if needed.
I've seen this work pretty well, in a /doc folder in the git repo with some autogenerated reference links as well, from the same repo. You either need the plantUML jar file local (and java, obv) or to point it at a rendering instance "local enough".
Sometimes you're only sketching something out to think things through and you'll get rid of it after 20 minutes.
But if at other times, if you've got reference material that's being used to onboard people or explain your system to other teams, etc. that hour spent creating something more understandable probably pays dividends & worth the effort.
It's like an ugly UI. It may be ugly but the people who use it, know it. When you "clean it up" you've now disrupted their mental models and they have to re-learn it all over again.
If you want people to look at a diagram and see stuff in it, rather than brush it off by familiarity, you want to move some boxes around.
It requires making sone compromises, however: Box inside box does not always end well. It is a worthy tradeoff for me, as I can document things much faster, and you get a feel about what will or wont work after a few tries.
Extract relations as tgf (trivial graph format), import, hierarchical layout.
tgf:
from, to, relation
...Just as with code, choosing good abstractions and methods of expression is what separates something from a grok-able idea to regrettable mess. It's not about beauty or aesthetics, it's a tool that requires some active thought and effort to design.
I wonder if there's a tool that would allow me to easily zoom into a diagram, kinda like those infinite zoomquilt animations.
Ilograph and Structurizr are zoomable. (Full disclosure: I am developing the former)
Uses the C4 diagramming model and looks really slick exactly for capturing this type of detail
if you want them to look nice (and I do try to make them as artistic as possible) then I've found that the best/ only proper way to do it, is to do multiple diagrams for different groups of people.
complex/ messy one for infrastructure - showing interfaces/ IP address/ security zones/ resiliance/ physical locations/ application binaries/ OS info etc..
sequence diagrams for logic flow of applications
basic fancy ones for stake holders/ less technical ppl - crayon type of diagrams
for all the diagrams: I find using matching colours (but try if possible, to consider color blind people) and levels of grey (try not to use black) work best... try to group interfaces close together... try not to have crossing lines... symetrical as possible... lines and boxes all aligned with something
Within just few minutes, I was able to design this animated "architectural" map [0]of our parent SaaS.
[0] https://app.visualsitemaps.com/user_flows/share/e64da8ed-2ef...
Notable features include:
- Smart Sections[1] - Smart Edges - Smart Node Deletion - Dark/Light modes - Embeddable - Drag n Drop images/svgs/gifs - AWS/Windows/Google Icons -- Markdown(*next week)
[1]https://support.visualsitemaps.com/en/articles/6477269-how-t...
I've always been slightly concerned it was possibly not the best use of time, but I have never had anyone tell me not to do it.
What I like about the article is that it articulates, in a practical way, how to make something more beautiful, whereas I go by feel.
Thanks for sharing.
Visualization goals!
I have somewhat avoided this because it can make you look like you're changing things for no good reason (no easily communicable reason, anyway).
I still do it when people have too much going on for a single line though (ternary ops + function calls + string/number formatting, etc which is very common in enterprise-y programs).
Then I found this web based coded solution 1 and I was having more fun then I deserved, especially to quickly add shapes, connections, and not worry too much how it is going to look aesthetically. But then I do worry how it is going to look and I can’t really force where I want the shapes and group them differently, and when I’m adapting myself to the tool instead of the other way around,… I go back to draw.io and screenshot to PowerPoint.
Will definitely try out nomnomi tho ..
Also, the suggested improvement makes it look like "something" and "I was unplanned" are somehow related, or use the same channel/mechanism to interact with "engine"
In Gitlab they are rendered nicely when visiting the .md file with the web browser. Github doesn't have that functionality yet.
- Levels of abstraction - A transaction - An element inventory - A process - Inputs and outputs
Among others. Given the numbers of nodes and edges, the most beautiful or consistent layout would be implied using graph layouts. When we use boxes and lines, we imply meaning to their order and sizes, which might be the case, but most often there isn't, it's just where you had space on the page.
The best diagrams are ones you could describe using graphviz/dot because each relationship is a true statement about the system. Sequence diagrams are the next best ones because they force you to close the loop in your thinking, imo.
Don't have a solution to it, unfortunately. When things in my head start to map too poorly to plantuml, I just consider drawio instead, but it's such a downgrade, that I try to avoid as much as I can.
I agree that layout auto-adjustments in flowcharts can be problematic, especially when subgraphs represent architectural subsystems as they are not really flowcharts. :)
I'm developing a new Mermaid diagram type for more layout control, with precise block placement.
So much this! Most people entering the architecture trade mix infrastructure, application components, functional elements and business capabilities into the same diagram. That's ok as long as the diagram conveys the story but it complicates real fast.
Now I know folks are going to suggest programmable interfaces like GraphViz and Plantuml, but those are not the same thing.
Why can't there be a tool where I just draw the boxes and arrows, and the tool aligns everything to make it look pretty?
In general however, graph drawing is a set of not that trivial problems to solve. There are a handful of layout styles out there that can, depending on the tool, be configured more or less well. But many of them are fairly specific to graphs with a certain structure.
One more piece of advice I'd have is to either make sure your picture tells a story, or to be able to tell a story using your picture. Humans are social creatures who have learned to share information through stories, and you'll make a much bigger impression on others if you can weave your picture into your story.
The story is especially handy when you're drawing it in real time on a whiteboard
The caches should be next to each other, and the servers should be too, leaving the DB up top and the lib between the servers
Although personally I’d also then flip it to put the DB at the bottom so the server becomes the headline, and if one server is public and the other internal, then I’d push the internal one down half a row too
I think the author is too focused on details that aren't noticed, while the spacing/padding, colors, font, and font size they're using are ridiculous... Practically speaking, if you were to present this it would be illegible.
Part 2 is about adding colors and yet more things to this current design that are discoverable by using any existing drawing tool (draw.io, lucid, figma, even MS Paint).
That arrow is unaligned, I have to fix it.
I forgot to add that component, now I have to shuffle things around.
Let's group all these blocks together so I can move them. Wait, I need to add another block inside, I have to ungroup them and shuffle.
etc etc etc
>What does an algorithm look like?
Why isn't it possible to represent a program visually?
Why do complex efforts along these lines either evolve to:
https://blueprintsfromhell.tumblr.com/
or
https://scriptsofanotherdimension.tumblr.com/
or devolve to nothing more than labeled boxes and a wall of text not markedly more intelligible than the textual program source itself?
For instance, if you have boxes and arrows, maybe just focus in a single box, its inputs and its outputs. This is how it's done for electronics circuits, for instance: you don't need to understand everything about the internal components of, say, a 555 ic, just some model of how it works.
I also think of blueprints, where projections of the 3d object are displayed together with the object.
I'd argue that the visual representation necessarily needs to abstract from the actual code to be useful. From concrete to abstract you can choose from any number of notations, e.g.
- Control Flow Graph - Data Flow Graph - Jackson Notation - State Diagram
etc. etc.
I use:
https://github.com/derkork/openscad-graph-editor
to try to design woodworking projects:
https://forum.makerforums.info/t/openscad-and-python-looking...
and I'd like to think that I'm managing to keep the visual appearance sufficiently expressive that it is easier to work with than a traditional textual code representation --- jury is still out on that, we'll see when I start re-purposing what I'm working on for odd/even sides, and then then doing the horizontal version of the joinery.
I would expect some options to set constraints, like the first input staying always aligned with the previous node.
Here is one of these DAGs: https://cdnb.artstation.com/p/assets/images/images/026/099/2...
Quite annoying because it totally dominates the mindshare of graph layout tools, making it difficult to find alternatives.
Here's some other options anyway:
* Eclipse Layout Kernel: https://github.com/eclipse/elk
* OGDF: https://ogdf.uos.de/
In fairness both their websites are pretty terrible (would some examples kill you OGDF?) and they don't provide an easy way to try them out, so I guess it's not that surprising that Graphviz dominates.
Anyway in practice if you have a complex graph then doing it manually is by far the best option.
If it's too big to do manually then it's unlikely to be a useful graph in the first place.
I also hear Scapple is good. Everything else is overengineered ime.
terraform graph
https://developer.hashicorp.com/terraform/cli/commands/graph
It would be cool if it was able to turn those spaghetti class diagrams into something useful. I'd like to see such a tool make sense of the sprawling terraform we've got, diagrams of which always end up being huge and complex.
In one of their examples, there's an "unplanned" node that's placed awkwardly on far side; but maybe that's actually helpful to know! Maybe it's an ugly hack and should stay over there until it's better integrated into the core design.
So just make sure the diagram is helpful and accurate first and foremost, then worry about tidying things up. And maybe leave some of the imperfect parts looking a bit more imperfect...
Are there any other options to keep sequence diagrams as code and just render it on demand?
Edit: http://blockdiag.com/en/seqdiag/examples.html seems to do what I'm looking for.
One thing I always seem to hit is the default diagram size/memory limits, the FAQ on plantuml.com has command-line switches to override those.
- syntax is really close to PlantUML
- it's rendered in the browser -> immediate feedback
- great autocomplete and syntax-check in the code editor
- great connection between graphic and text (click on element -> jump to relevant line)
- graphical drawing and reordering
- presentation view (fullscreen + keeps actors "sticky" on top)
Especially dragging/dropping actors around is a lot of fun when you try to find the most suitable presentation format for complex diagrams. I'm not aware of any other editor that has this good integration between the code-editor and the visual editor.
It's not open source, but it's been around for free for a long time.
I believe Dilbert had a comic about it...
I think the biggest thing a diagram should show you is the way data can and cannot flow. People tend to overcomplicate them with detail that's better suited for a corresponding text document. It's a visual, it should convey things quickly and without much noise.
Is there a tool out there that lets me define them in code somehow? For example, neighbor distance or what symmetry means in a given context?
- excalidraw - https://github.com/alswl/excalidraw-collaboration
- revezone - excalidraw + tldraw - https://github.com/revezone/revezone
- code2flow - code - https://app.code2flow.com
- zenuml - code - https://app.zenuml.com
- bpmn sketch miner - https://www.bpmn-sketch-miner.ai/examples/syntax-0-00-overview.html
- d2lang - https://play.d2lang.com
- mermaid - https://mermaid.live
- diagram.codes - https://www.diagram.codes
- kroki - https://kroki.io
- nomnoml - https://www.nomnoml.com
- azimutt - db, paid - https://azimutt.app
- drakon - https://drakonhub.com/try-me
- svgbob - https://ivanceras.github.io/svgbob-editor
- typograms - https://code.sgo.to/typograms
- argdown - for argumentation - https://argdown.org
- flowchart.fun - paid - https://flowchart.fun
- penrose - advanced, general - https://penrose.cs.cmu.edu
- structurizr - https://structurizr.com/dsl
- state machine cat - https://state-machine-cat.js.org
- drawthe - http://go.drawthe.net
- swimlanes.io - https://swimlanes.io
- js-sequence-diagrams - https://bramp.github.io/js-sequence-diagrams
- dbdiagram.io - https://dbdiagram.io/d
- quickdbdiagrams.com - https://app.quickdatabasediagrams.com
- edotor - https://edotor.net
- pikchr - https://pikchr.org
I just overlay the flows of data on other diagrams, adding notes about the type of the data, and sometimes add info about particular fields, where useful.
Where I work it’s also useful to add the internal classification of the data, which allows understanding of the sensitivity level of the data and its retention policy.
I had a lot more experience with UML, but that too has gone out of fashion.
Nobody models anything anymore, not even ER diagrams are used.
Knowledge ends up scattered between a million tasks in some project management software. Often, things are not even written down, because "there's not enough time".
That way Merge Requests can be blocked for lack of documentation, or lack of documentation update.
MermaidJS have been a godsend for documentation.
Agreed, this can help. I sometimes wonder, having written a substantial project in literate programming¹ style once, whether that approach doesn’t deserve more exploration. Then not only is your documentation kept in the same repo as your code, your source files themselves almost become documentation first and code second.
You definitely have to do a lot of things quite differently to how we typically do them today to make that idea work well, but I suspect it could be like a good static type system, incurring a modest extra cost up-front but with a big long-term pay-off once you’ve figured out the tools and processes to take advantage of it.
This one is the epitome of the “If you think X is expensive, try [not doing X]” meme.
I’d take a decent software architecture diagram, a detailed data model with an ER diagram, and some form of useful written requirements over probably any other process or tool ever invented in the world of software. Alas, advocating such things in the era of Agile often feels like the curse of Cassandra.