This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
What I Built
I was tired of bloated webapps for practicing system design problem or creating one. So I thought of creating my own. I started with simple canvas with few components such as load balancer, api gateway and database and a custom element.
Then I started adding features step by step
Step 1:
Add arrows to connect different components
Step 2:
Add edit option in components where I can drag the components and move them in canvas, edit their names, resize them and delete them from canvas
Step 3:
Make the canvas size infinite
Step 4:
Add zoom options using mouse scroll in canvas
Step5:
Add few more components such as User, Web client, Cache, etc and add scrollbar in the components section
Final Step:
Add export functionality to export this design in png or jpeg format
And voila the app is live and functional.
Demo
Check it out here and share your designs
Future scope
Now it's time to add more features. Few of them are
- Add an option to create flow chart as well
- Option to copy a single element
- Ability to move multiple elements at once and many more.
Suggest your ideas in comments to make this bigger and better. So that we can have our own canvas opens source and free without any telemetry
My Experience
There were few moments when gemini was approaching correctly but not making the code changes. I had to ask specifically to continue making the code changes and then it moves ahead. That was annoying a bit, but the results were really cool. I like vibe coding a lot with this new tool. Planning to build more for the public for free.
Create your own design and share it in the chat and inspire us with your suggestions
Top comments (38)
I actually need a system design simulator. What would be cool is being able to specify numbers like Daily Active Users, min/max requests per second and so on. Then you can press "play" and it would simulate traffic flowing through the different components. Essentially a systems design game, where if any component (like the database) goes down or latency is too high, you lose 😁
This is really nice idea, but this means we would need to have attributes for each component. User would need to configure the load balancer with the load balancing algorithm, need to define the size of the instances where the services are deployed. And a lot more. I think this can go as a pro subscription of this site 😅
Absolutely! There's a real value proposition here, not just for students learning Systems Design, but even professionals wanting to validate adding components to their systems (before performing actual load testing).
Btw, I added few enhancements, specially for smaller screens
dev.to/sroy8091/evolving-darwin-ho...
@sroy8091
You wrote that it will be Open Source, but I don't see link to the code?
Very good project!
I will add the github link in the project and a second blog about all the enhancement I am currently working on. But before that I have to add license and the most difficult thing, a good README 😌.
README was VERY difficult for me too, until AI appeared :)
Now is one of the easiest :)
You have implemented really useful thing! I have needed it in past and have used tools like Miro. I liked the customized components for system design but the thing is that still a lot of features for drawing good diagram are missing here.
But it is a good one! keep going...
Thanks @hrrydgls , I kept going and added some must have features. Checkout the enhancement here
dev.to/sroy8091/evolving-darwin-ho...
Did you try Draw.io ?
Yeah, and excalidraw as well. Both are feature enrich and really mature platform and have a broad target audience, but I wanted to have something focused on software dev. To make quick and dirty diagrams, specially for interviews 😉.
I agree. I'm not sure what the point of this is. There are already webapps and vscode plugins that do these things better and more already
Love how clean and focused this is, especially with infinite canvas and export! Any plans to let users see version history or collaborate live?
Collaborating live or adding persistent history would mean a lot of work in backend. And i don't want to integrate any backend api or db here unless it gets really good traction. But yeah it would be really a good extension of this
Man awesome stuff This type of content must be on vickybytes
Thanks, what's vickybytes?
So sir it is popular website these days where awesome writers like u can post all of your content like articles link any platform dev to or medium and get paid for views u gain on the content
Congratulations, would be nice an export targetting LLM ingestion, so would output the diagram in a text format that describes it.
This is a really nice idea, thanks
Seems like a promising product, look forward to see it on product hunt someday.
Thank you 😊
Make sidebar collapsible on mobile(small screens). Since it's goal it to be a quick usable project, I'll prefer this on mobile. No bloat. No extra feature. Just quick diagramming.
Hi @sanskaromar , added this nice enhancements and now you can use it more fluidly in your mobile/small screens as well.
darwin-topaz.vercel.app/
This is extremely impressive, especially since you went piece by piece on your own. I’m always down for something less bloated like this
Let me know what features you think would be a great addition to it.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.