3 ms·

Show HN: Visualizer for High Level System Design

167 points by honzaaap 5y ago

66d8kk 5y ago
Congrats on the launch! I currently work on projects where HLDs are nothing more than brain dump / thought organising experiments just prior to getting some PoC code bashed out. I usually go as far as paper -> draw.io which gets wildly out of date within weeks (which is fine for what I do / scale we work). Had a little play with this, I like it. My gut is that for my use case it could strike that perfect balance of quick "brain dump" while providing me an interface to think in "PoC code" (actions / sending data). I'm going to have a deeper look at this over the coming days and recreate one of our smaller, simpler systems (with which the "HLD" is already out of date). Thank you for sharing. And of course the work required would be insane but hooking this up to implementation routes/controllers/services/whatever.
whalesalad 5y ago
Heck yes! I needed this 2 days ago and still need it now. Definitely taking this for a spin.
margor 5y ago
This looks really awesome! One note - why is the interface so big? It made me check my browser's scaling
- honzaaap 5y ago
  Hey, could be some problem with how font size is changing with screen size, I'll look into it.
alhasaniq 5y ago
I just wish more components exist. I struggled to decide where my async data pipeline ends. There should be a generic component (something like "Cloud") that i can use when 3rd parties are actioned (i.e. push notifications, emails, log, api trigger).
- philote 5y ago
  Yep third-party components would be good. As would some sort of "worker" component for processing jobs from pubsub.
ollysb 5y ago
Pinch zoom only works if you're over the canvas. If you for instance zoom out enough that the mouse cursor is outside of the canvas then the page itself starts zooming.
jcun4128 5y ago
Wonder if you could actually link to code files/lines by clicking on a part.
teclordphrack2 5y ago
draw.io 2.0?
gavinray 5y ago
This is really cool! Tip for others: You can click the lines in between components to add text to them One question though, when I click on something, like "API Gateway", in the "Properties" panel it lets me add REST/GQL/gRPC etc endpoints These seem not to do anything though? What is the purpose of the "properties" on most of the components? Seems only one that does anything is the "Shard Database" button on a Database component
- honzaaap 5y ago
  It adds endpoint to the gateway, the Client component can then send data to these endpoints by selecting it via the Target endpoint selection
get52 5y ago
Architecture-Astronaut stuff basically horsefucked most projects i've done with companies. producitivty murderer in short
iblaine 5y ago
I can see this being useful for virtual sys design interviews. Having to rely on Lucicharts, Miro or Google Drawing for virtual system design interviews is usually a challenge. People have to search for icons, name them, draw associations and on and on. An interface that does much of that busywork for you would be nice.

167 points by honzaaap 5y ago

Congrats on the launch! I currently work on projects where HLDs are nothing more than brain dump / thought organising experiments just prior to getting some PoC code bashed out. I usually go as far as paper -> draw.io which gets wildly out of date within weeks (which is fine for what I do / scale we work). Had a little play with this, I like it. My gut is that for my use case it could strike that perfect balance of quick "brain dump" while providing me an interface to think in "PoC code" (actions / sending data). I'm going to have a deeper look at this over the coming days and recreate one of our smaller, simpler systems (with which the "HLD" is already out of date). Thank you for sharing. And of course the work required would be insane but hooking this up to implementation routes/controllers/services/whatever.

whalesalad 5y ago

Heck yes! I needed this 2 days ago and still need it now. Definitely taking this for a spin.

margor 5y ago

This looks really awesome! One note - why is the interface so big? It made me check my browser's scaling

honzaaap 5y ago
Hey, could be some problem with how font size is changing with screen size, I'll look into it.

alhasaniq 5y ago

I just wish more components exist. I struggled to decide where my async data pipeline ends. There should be a generic component (something like "Cloud") that i can use when 3rd parties are actioned (i.e. push notifications, emails, log, api trigger).

philote 5y ago
Yep third-party components would be good. As would some sort of "worker" component for processing jobs from pubsub.

ollysb 5y ago

Pinch zoom only works if you're over the canvas. If you for instance zoom out enough that the mouse cursor is outside of the canvas then the page itself starts zooming.

jcun4128 5y ago

Wonder if you could actually link to code files/lines by clicking on a part.

teclordphrack2 5y ago

draw.io 2.0?

gavinray 5y ago

This is really cool! Tip for others: You can click the lines in between components to add text to them One question though, when I click on something, like "API Gateway", in the "Properties" panel it lets me add REST/GQL/gRPC etc endpoints These seem not to do anything though? What is the purpose of the "properties" on most of the components? Seems only one that does anything is the "Shard Database" button on a Database component

honzaaap 5y ago
It adds endpoint to the gateway, the Client component can then send data to these endpoints by selecting it via the Target endpoint selection

get52 5y ago

Architecture-Astronaut stuff basically horsefucked most projects i've done with companies. producitivty murderer in short

iblaine 5y ago

I can see this being useful for virtual sys design interviews. Having to rely on Lucicharts, Miro or Google Drawing for virtual system design interviews is usually a challenge. People have to search for icons, name them, draw associations and on and on. An interface that does much of that busywork for you would be nice.