Live data from Hacker News

Architecture diagrams enable better conversations

unravelled.dev

81–90 of 141 posts

Re: Architecture diagrams enable better conversations

#81
post #54

What are the tools people use to draw diagrams? I've tried many things and settled on Miro on an iPad (infinite canvas + pencil), but I still think this space is underinvested in. The downside of diagrams from code is the loss of the wysiwyg aspect -- I want to be able to manipulate things visually.

I have been using https://www.yworks.com/products/yed for years. You can import a c4 palette probably. I do not really stick to specific shapes but use what makes sense for the context.

Re: Architecture diagrams enable better conversations

#82
post #34
post #22

Earlier quoted context omitted.

I didn't say it directly, but thanks for the article! My question is probably more asking exactly how/why the visual representation helps. I am very open to the idea that they do. But I'm also open to the idea that it is the active interaction with others that is the important part. That it is done with text or with drawings feels secondary. Almost distantly. Your point about the really high level views of 1 and 2 in…

I believe that the way we represent information is key to understanding. Data points in a list are usually way less insightful than a good graph (emphasis on good). What I have found is that it's the case in describing system architecture as well. As you say, you can describe a system in a few paragraphs, explaining the relationship between the main components. However, as paragraphs it can harder to grok, and also h…

I think I mostly just disagree, here. I want a graphical representation to be more impactful. But typically any system that scales such that a short list can't explain entry points and dependencies has scaled beyond what graphical tools can do, as well.

Now, story boarding a communication sequence between systems can make great use of layout. So, I definitely see potential.

Re: Architecture diagrams enable better conversations

#83

I failed a number of technical interviews because I can't make architecture diagrams. I come out of the first tech interview, coding/debugging, with praises. But then comes the second, the architecture interview, and I can't for the life of me draw the architecture of anything. I don't know how people learn to do that, I've learned to code/debug by being obsessive about it. But I don't see how that happens for system…

There is some "art" to it, but if you can draw boxes, arrows, and labels, you can make architecture diagrams. Basically, organize the boxes in layers and connect with arrows to represent request/response flows. You need to put in enough detail to make the diagram useful (or at least seem that way...), but leave a bunch out, otherwise it's too noisy. If you have too many arrows intersecting, you should rearrange things.

Re: Architecture diagrams enable better conversations

#84

What are your favorite diagram tools? Looking for excalidraw alternatives with good Cloud resource icon support

https://VisualFlows.io it is 100% free - and we offer all AWS, GCP, and Azure icons, or just add your own via drag n drop. Sample UML: https://app.visualsitemaps.com/user_flows/share/e64da8ed-2ef...

The "Sample UML" is no UML. My apologies for being rude but this is not a component diagram nor any other standardized UML diagram. UML components have a visual indicator (to not confuse them with classes), use ports and connectors are consistently applied and do not vary just because the node is a S3 bucket or whatever.

It is a valid diagram helping understanding something and the tool seems awesome but please do not pitch this as "Sample UML"

Re: Architecture diagrams enable better conversations

#86

I've had the idea that graph diagrams (including architecture diagrams) can be paged - you show a different set of links/vertices on each page of the same graph (show the same node but different enumeration of edges). Many codebase visualisations I've seen were too complicated to understand because the diagrams were so large. (I've seen some visualisations generated from code that were so small when panned around you…

The diagram industry is ready to be disrupted. Views on views, your pushing idea, etc. So many ideas.

Right now most tools including lucidchart and old timers like Enterprise architect are far too static

Re: Architecture diagrams enable better conversations

#87
post #33

I've been using https://structurizr.com/ to automatically generate C4 diagrams from a model (rather than drawing them by hand). It works well with the approach for written documentation as proposed in https://arc42.org/ . It's very easy to embed a C4 diagram into a markdown document. The result is a set of documents and diagrams under version control that can be rendered using the structurizr documentation server (fo…

I recommend trying https://icepanel.io/

Re: Architecture diagrams enable better conversations

#89

I've had the idea that graph diagrams (including architecture diagrams) can be paged - you show a different set of links/vertices on each page of the same graph (show the same node but different enumeration of edges). Many codebase visualisations I've seen were too complicated to understand because the diagrams were so large. (I've seen some visualisations generated from code that were so small when panned around you…

> I've seen some visualisations generated from code that were so small when panned around you have to zoom in. It's not a great experience. I would love a Google-Maps-Like architecture diagram. Zoom out and you see high level flows, zoom in and you get the details you want to see. Different overlays to let you explore how systems are connected or how certain sub features work. Obviously this is hard to do and even ha…

Sounds like http://icepanel.io/

Re: Architecture diagrams enable better conversations

#90
post #33

I've been using https://structurizr.com/ to automatically generate C4 diagrams from a model (rather than drawing them by hand). It works well with the approach for written documentation as proposed in https://arc42.org/ . It's very easy to embed a C4 diagram into a markdown document. The result is a set of documents and diagrams under version control that can be rendered using the structurizr documentation server (fo…

I use MermaidJS for flow chart and Sequence diagram. They have C4 in beta. I tried and it is hard adjust the layout and many features are not supported for C4 yet. Visual Studio has good support for MermaidJS. https://mermaid.js.org/intro/

I think you mean Visual Studio _Code_. Completely separate product. Not your fault of course, but the geniuses at Microsoft who gave the same name to two different IDEs in an environment where users of the second one are very unlikely to be aware of the existence of the first. Still, it's an important distinction worth knowing about because they have their own distinct extension ecosystems that are not mutually compatible.
Post reply on HN