4 ms·

Hi HN, I made a diagramming tool specifically for explaining systems. It's something that I felt like I could've needed at my previous engineering jobs when I w

Hi HN, I made a diagramming tool specifically for explaining systems. It's something that I felt like I could've needed at my previous engineering jobs when I was explaining some software architecture or concept that were complex and I had trouble expressing on a single image diagram. Would love to hear HN's thoughts and feedback!

alixanderwang 7y ago
The UI iterations of this app over 2 years: https://twitter.com/alixanderwang/status/1212875949101875200 https://twitter.com/alixanderwang/status/1212875949101875200
alixanderwang 7y ago
Some educational content made with this tool: An overview of modern Javascript tools https://app.terrastruct.com/diagrams/788622353 https://app.terrastruct.com/diagrams/788622353
wokwokwok 7y ago
I've often needed something like this, but, sadly, once again, this isn't it. No discredit to you; this is great work, but for me, personally: The world does not need more diagram editors. Diagrams are fundamentally not the right tool for the problem I have. The problem I have is that I have a technical system, for example, a network diagram, or an architecture diagram of a system or set of systems; and I need the data that represents that system, to be visualised in multiple diagrams, in such a way that you can have multiple views of the same data. This means that when you make a change to the data, all of the diagrams are updated to reflect that change. As an analogy to explain what I mean, consider a 3D model: If you have a 3D model, you want to save it as a 3D model. What you don't want, is to manually draw the way that model looks from 5 different perspectives; because if you alter the model, to say, add a new cube, or change the color of a face; you have to redraw every single diagram. What would be actually novel, would be to allow you tag / label / whatever the components of your diagrams in some way, and they apply filters to the diagram to generate different views of the data, while maintaining one single master diagram. I know, this is a hard problem, because layouts are fundamentally hard (if you've ever worked on layout engines you'll know exactly what I mean), and you end up looking like graphviz as soon as you try to use constraint solving to layout the elements in a diagram... I guess. ...but, at least it would be genuinely novel to try. I don't really see much here that would, eg. get to use it over the many other indistinguishable diagram editors out there.
- artworx 7y ago
  I've used https://structurizr.com https://structurizr.com for that purpose before. It allows you to define the elements (containers, users, etc.) separately from the diagrams and then pull them into various views of the system. My workflow is something like this: - define the elements at various zoom levels https://structurizr.com/share/1/explore/tree https://structurizr.com/share/1/explore/tree - define the relations https://structurizr.com/share/1/explore/component-dependencies https://structurizr.com/share/1/explore/component-dependenci... - create diagrams by selecting subsets of what was defined in the first two steps https://structurizr.com/share/36141/diagrams#SystemLandscape https://structurizr.com/share/36141/diagrams#SystemLandscape
- vinodkd 7y ago
  Do you mean something like Netflix Vizceral[1]? The problem with using data is that there's usually too much of it, and at that point you do end up with a graph that only something like graphviz can layout. I know what you mean though; but it has to be IMO just enough data, that can then be tweaked by a human to help with the key purpose of such diagrams - human understanding. 1: https://github.com/Netflix/vizceral https://github.com/Netflix/vizceral
  - wokwokwok 7y ago
    That’s my point; it’s clearly not an easy problem to solve, but it has inherent value over other diagramming tools if you can solve it.
- gugagore 7y ago
  I don't have any personal experience from it aside from viewing an existing architecture once, but from what I could tell, the ArchiMate language supports this, possibly via a concept called "viewpoints" (https://en.wikipedia.org/wiki/ArchiMate#Viewpoints https://en.wikipedia.org/wiki/ArchiMate#Viewpoints). There is a free and open-source tool for it: https://www.archimatetool.com/ https://www.archimatetool.com/ .
  - based2 7y ago

alixanderwang 7y ago

The UI iterations of this app over 2 years: https://twitter.com/alixanderwang/status/1212875949101875200 https://twitter.com/alixanderwang/status/1212875949101875200

alixanderwang 7y ago

Some educational content made with this tool: An overview of modern Javascript tools https://app.terrastruct.com/diagrams/788622353 https://app.terrastruct.com/diagrams/788622353

wokwokwok 7y ago

I've often needed something like this, but, sadly, once again, this isn't it. No discredit to you; this is great work, but for me, personally: The world does not need more diagram editors. Diagrams are fundamentally not the right tool for the problem I have. The problem I have is that I have a technical system, for example, a network diagram, or an architecture diagram of a system or set of systems; and I need the data that represents that system, to be visualised in multiple diagrams, in such a way that you can have multiple views of the same data. This means that when you make a change to the data, all of the diagrams are updated to reflect that change. As an analogy to explain what I mean, consider a 3D model: If you have a 3D model, you want to save it as a 3D model. What you don't want, is to manually draw the way that model looks from 5 different perspectives; because if you alter the model, to say, add a new cube, or change the color of a face; you have to redraw every single diagram. What would be actually novel, would be to allow you tag / label / whatever the components of your diagrams in some way, and they apply filters to the diagram to generate different views of the data, while maintaining one single master diagram. I know, this is a hard problem, because layouts are fundamentally hard (if you've ever worked on layout engines you'll know exactly what I mean), and you end up looking like graphviz as soon as you try to use constraint solving to layout the elements in a diagram... I guess. ...but, at least it would be genuinely novel to try. I don't really see much here that would, eg. get to use it over the many other indistinguishable diagram editors out there.

artworx 7y ago
I've used https://structurizr.com https://structurizr.com for that purpose before. It allows you to define the elements (containers, users, etc.) separately from the diagrams and then pull them into various views of the system. My workflow is something like this: - define the elements at various zoom levels https://structurizr.com/share/1/explore/tree https://structurizr.com/share/1/explore/tree - define the relations https://structurizr.com/share/1/explore/component-dependencies https://structurizr.com/share/1/explore/component-dependenci... - create diagrams by selecting subsets of what was defined in the first two steps https://structurizr.com/share/36141/diagrams#SystemLandscape https://structurizr.com/share/36141/diagrams#SystemLandscape
vinodkd 7y ago
Do you mean something like Netflix Vizceral[1]? The problem with using data is that there's usually too much of it, and at that point you do end up with a graph that only something like graphviz can layout. I know what you mean though; but it has to be IMO just enough data, that can then be tweaked by a human to help with the key purpose of such diagrams - human understanding. 1: https://github.com/Netflix/vizceral https://github.com/Netflix/vizceral
- wokwokwok 7y ago
  That’s my point; it’s clearly not an easy problem to solve, but it has inherent value over other diagramming tools if you can solve it.
gugagore 7y ago
I don't have any personal experience from it aside from viewing an existing architecture once, but from what I could tell, the ArchiMate language supports this, possibly via a concept called "viewpoints" (https://en.wikipedia.org/wiki/ArchiMate#Viewpoints https://en.wikipedia.org/wiki/ArchiMate#Viewpoints). There is a free and open-source tool for it: https://www.archimatetool.com/ https://www.archimatetool.com/ .
- based2 7y ago