Get the top HN stories in your inbox every day.
victorbjorklund
nkozyra
I feel like diagrams should not be pretty. For example, colors should convey meaning rather than being aesthetic or artistic choices.
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.
ompogUe
Well, colors can be both pretty and informative.
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).
bluGill
Beauty is useful, but it needs to be the last step. When something like nice people also assume the contents have been polished and so since a lot of work went into thinking about it already it isn't worth the time to question if it is right. You can question if you understand it, but the diagram itself is right and so the problem is you.
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.
nkozyra
> 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.
Chris_Newton
Nicely presented data can certainly inspire confidence, which might or might not be justified, but I think attractive presentation can be more than just a sales pitch. Ultimately, we create these visualisations to convey information to someone else, so good presentation should help that someone to navigate and understand that information, and it should avoid introducing unwanted bias or ambiguity.
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.
rrrrrrrrrrrryan
I do really like diagramming tools that have a mode that kinda-sorta looks like a human sketch, though. I feel like it lets me not worry about the thing being pixel perfect.
The fewer right angles, the better: I can just draw shapes and put them in roughly the right spots and it'll look fine.
spaceman10
Hi. This is really cool. I tried your example, and it rendered top to bottom instead of left to right (as in the directions).
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 :)
smusamashah
https://flowchart.fun/ recently helped me very quickly draw flow charts to understand process of a system. Best thing was how intuitive and fast I could iterate over. And it allows custom css for styling which helped a lot. IMO for flow charts, this is so far the easiest / quickest text based diagram tool.
tincholio
D2 has a very good layout engine (tala), but its use requires a paid license. The other two engines aren't nearly as good.
414techie
Thanks for sharing. I love mermaid, and use it frequently. I’ll have to check out D2. I think declarative diagramming is a powerful tool to capture thoughts in a readable way that can be versioned like any other text.
ansraliant
[dead]
Veuxdo
"Beautiful" is very hard to maintain when a system starts changing. Think of adding a new box to the middle of an already-busy diagram; it could take an hour to re-align everything. In the 2020s a dev's time is probably better spent using diagrams-as-code[0].
[0] https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an...
renegade-otter
I always joke that 10% of creating diagrams is actually creating diagrams and 90% is aligning arrows.
I don't think it's a joke, though.
dkarl
For this reason I love drawing diagrams on whiteboards and absolutely hate taking the step of putting them into a wiki/README/etc.
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.
Chris_Newton
One thing I miss about in-office work is that people would spontaneously draw diagrams in meetings. [...] This doesn’t happen (IME) with remote work. Drawing diagrams takes for-fricken-ever so people tend not to do it in meetings.
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.
ewi_
Excalidraw has been great for me and my team to create diagrams on the fly during meetings.
rjbwork
>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.
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.
zoomablemind
> ...absolutely hate taking the step of putting them into a wiki/README/etc.
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.
rightonbrother
I agree with your comment so much I created a login.
'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.
gtirloni
Definitely the sad reality. Things never align in intuitive ways, connect at the wrong sides, take circles around when there are shorter paths, etc.
tamiral
its the painful reality ... gotta love visio for that i thought upgrading the the latest Visio would help easy my alignment issues but nope!
puchatek
We maintained a c4 model of our systems built for importing and displaying on structurizr.com and tbh, it wasn't fun. You don't get the same intuitive understanding and overview from the code that you get from a diagram and there was no fast local preview. You had to upload your code to the server. Even worse was the fact that adding a new box usually meant realigning all arrows. As a consequence the diagrams were never kept up to date on a continuous basis.
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.
ska
FWIW You can do a C4 model using plantUML diagrams [1] imported directly into RST markdown (or inline, fwiw, but that makes live preview harder)
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".
jk563
> no fast local preview
I found their Lite container version perfect for local iteration on diagrams: https://docs.structurizr.com/lite/quickstart
bilekas
The author does touch on this subject that it's time consuming to amend a diagram. And it absolutely is, if only there was a standardized schema that could be followed properly and then have the tools have an "auto format" option..
SoftTalker
And in moving things around and re-aliging you have to re-learn the whole diagram. If the frobnitz was always in the upper right part of the diagram and suddenly it's moved to the center left because everything lines up better that way, well maybe it's helpful to someone who is looking at the diagram for the first time but if you've been working with it for six months suddenly it looks like a completely different thing.
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.
8note
That's a feature more than a bug.
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.
another-dave
I think how worthwhile that time investment is depends on the reach and longevity of the diagram.
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.
gpderetta
I refuse to use WYSIWYG interfaces to draw diagrams (looking at you confluence!). Mermaid.js (or really any graphing language) it is for me.
bilekas
Wysiwyg is actually fine, but the underlying graphing language just doesn't seem to be standardized across multiple tools.
I personally find it far quicker to use the visual aid than learning a new syntax etc.
nyanpasu64
Are we better off creating diagrams from code (turning text into graphics using layout engines), or code from diagrams (using WYSIWYG editors to interact with a declarative format)?
hyperman1
I use yEd for drawing this kind of thing. It allows me to make a horribble mess of boxes and arrows, then auto-cleans it up with a few clicks in the menu.
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.
walterbell
Is yEd free to use? The underlying yWorks SDK seems to cost 5 figures for one developer working on one web site. It must be very capable to have customers for ~20 years.
hyperman1
Their page states it is freely available. I cant seem to find the license on their website, unfortunately. I believe it started out as a demo for their paid library, but turned out to be a good standalone application.
ygra
Yes, yEd is free to use. The licensing cost you found is indeed for the SDK yEd is built with.
w10-1
ditto. There's no reason to draw anything.
Extract relations as tgf (trivial graph format), import, hierarchical layout.
tgf:
from, to, relation
...lstamour
I use OmniGraffle for similar reasons :)
_kb
There's strong parallels here with electrical schematics, circuit diagrams and other engineering drawings. There is no singular 'right' way to do it.
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.
gtirloni
For me, keeping the abstraction level consistent is really hard sometimes. Especially with infrastructure diagrams, it's sometimes hard to stop the urge to add more details at different levels.
I wonder if there's a tool that would allow me to easily zoom into a diagram, kinda like those infinite zoomquilt animations.
123pie123
I've been thinking and doing this for many years - I've tried very hard to do it with one diagram without luck
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
justin_oaks
I wish it were easier to make interactive diagrams where you can turn detail on and off or click on a section to zoom in and show more detail
Veuxdo
> 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)
ethanbond
Also consider checking out icepanel.io
Uses the C4 diagramming model and looks really slick exactly for capturing this type of detail
artur_makly
We're about to launch v1.0 of https://VisualFlows.io
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...
stuartjohnson12
Why should I use this over the more mature https://whimsical.com that has the same aesthetic?
blah_why_not
[dead]
genericlogic
I really enjoyed this article. When I draw an architecture diagram, write documentation, code or really do anything at work I take a moment to try to make it look "nice". I can't explain why I do it, I just know when I look at it I like it more.
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.
hhjinks
I do this, too. Coding is actually a very visual endeavour for me. I can only describe it as "flow". If my code doesn't "flow", I'm not happy with it. I am baffled by my teammates who seem to have no visual awareness of their code. They might forego whitespace between the close of one function and the declaration of the next, or alternate between having one or more parameters per line in a function signature. It sticks out to me like a sore thumb, but they don't seem to care.
vsareto
>I am baffled by my teammates who seem to have no visual awareness of their code.
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).
dtjb
Even if you never share anything, just the thought process that goes into the ordering of the blocks and elements on the page force you to think about the larger structure and dependencies. It's incredibly helpful.
Bluecobra
When I make network diagrams in Visio I feel the same way. I put my Steve Jobs hat on and obsess over some small detail. Yes, sometimes it is time consuming but it feels some kind of cup for me. I know I have some kind of technical artistic talent, in high school I wanted to be a drafter.
esafak
That's what markup is for; it saves you from unproductive embellishment. Obviously, this does not apply for coding.
walterbell
> Discussions gravitate around this diagram. People randomly walk up and stare at it. Questions are answered by pointing at it. Periodically throughout the day, chairs swivel around to face this centerpiece, their occupants folding their hands behind their heads.
Visualization goals!
growingkittens
Taking the time to clean up a diagram usually means making it 'easier to comprehend.' Every time you use the clean diagram, you've saved time and energy with a reduced cognitive load.
poidos
I like D2 for this. In a previous role, I wrote a program to parse all of our serverless.yml files (we were doing micro services on AWE) and auto-generate a big D2 diagram from it. It was nice because it would auto-update as the system grew and I wrote it so that the diagram could be broken out into smaller diagrams for each sub system (think splitting on SNS topic)
lwhi
I like draw.io ..
lencastre
It’s either PowerPoint or draw.io depending on the time I have and the complexity.
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.
lwhi
That looks nice; but for flexibility, consistency and getting the job done draw.io is great IMO.
Will definitely try out nomnomi tho ..
beAbU
I don't understand the first example. The author talks about an unplanned node, literally called it "I was unplanned", and then says "if you have planned ahead"... How can I plan agead for something unplanned, in the context of a diagram? Do I leave sufficient white space around all nodes?
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"
tanepiper
We use Miro and actually, for high-level stuff, ideation, etc it's pretty good as a tool using post-it notes. I don't go past mid-level stuff though, once you have your components and systems there are better tools for the job.
Anduia
In case you didn't already, if your project is documented with markdown, add ```plantuml blocks to insert your diagrams instead of separate binaries.
In Gitlab they are rendered nicely when visiting the .md file with the web browser. Github doesn't have that functionality yet.
jalk
GitHub uses mermaid https://docs.github.com/en/get-started/writing-on-github/wor...
livrem
Fossil has built-in pikchr-rendering in Markdown (and on Wiki pages) that use the same method (but ```pikchr instead, unsurprisingly): https://pikchr.org/home/doc/trunk/doc/usepikchr.md
motohagiography
A visual model should distinguish between:
- 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.
tonnydourado
As an avid plantuml user, I don't think it's that simple. Graph layouts help, but it doesn't take long for automatic layouts to start to get in the way of conveying meaning, and that's even with a higher level description language, like plantuml or mermaid, let alone with raw graphviz. One can quickly start to spend more time trying to make the layout look right than actually evolving it.
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.
knsv
Knut, Mermaid's creator here.
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.
tonnydourado
Cool! I'm still on the plantuml train, but I like how much easier mermaid is to integrate with (no need for java), so I'm happy to see it evolve!
blah_why_not
[dead]
pantulis
> A visual model should distinguish between: - Levels of abstraction (...)
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.
glitchc
It's always bugged me that large language models are possible, and yet no one can write a locally available tool that can reflow blocks and arrows to achieve aesthetic beauty. Omnigraffle comes close, but there's nothing available on Linux and Windows is still stuck with Visio.
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?
ygra
I'm biased here, but have you taken a look at yEd [π] (or yEd Live [7] for something that runs in a browser)
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.
Get the top HN stories in your inbox every day.
I been enjoying D2 lang for creating diagrams. It is like mermaid.js but more formatting options and, imo, better syntax. I wrote a small blog post about it: https://victorbjorklund.com/build-diagrams-as-code-with-d2-d...