Show HN: Visualizer for High Level System Design

https://honzaap.github.io/Systemizer

by honzaaap • 5 years ago

167 11 5 years ago

honzaap.github.io

66d8kk• 5 years 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• 5 years ago

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

margor• 5 years ago

This looks really awesome!

One note - why is the interface so big? It made me check my browser's scaling

honzaaap2• 5 years ago

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

alhasaniq• 5 years 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• 5 years ago

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

ollysb• 5 years 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• 5 years ago

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

gavinray• 5 years 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

honzaaap2• 5 years 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

iblaine• 5 years 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.

Show HN: Visualizer for High Level System Design

Related Stories