honzaap / systemizer Goto Github PK
View Code? Open in Web Editor NEWA system design tool that allows you to simulate data flow of distributed systems.
Home Page: https://honzaap.github.io/Systemizer/
License: GNU General Public License v3.0
A system design tool that allows you to simulate data flow of distributed systems.
Home Page: https://honzaap.github.io/Systemizer/
License: GNU General Public License v3.0
Pressing tab weidly shifts the whole page, the max width&height should be bigger. Also more options.
I haven't looked much, so this may be impractical.
The Client-side components are currently all capable of making requests. I'd like something similar but labeled as server-side. I'd like to show server-side requests in the simulation mode. This could represent something like a cron job or web hook from a 3rd party API.
My initial thoughts were one of these would work:
Use the element(canvas/svg) that is received from export service and make a preview in the export window.
The one implemented right now is only partial for position, and it is still buggy...
Make custom context menu. One for clicking on a component and one for clicking directly on board.
There are some typos in the code, comments, property names, css classes, documentation etc.. Easy way to boost github karma
Export the board through svg
The proxy component doesn't currently have any properties, something could be added.
Things that don't belong to the board component (popups, header, other UI) should be in separate component.
It can connect to multiple nodes, maybe randomly choose to which endpoint a request will be sent. Adjust request speed etc...
Allow user to select multiple components. That can be done by:
Once multiple components are selected, you can move them together and they will remain the same distance between them. Since properties can change, only the "General" section will be present in options.
First, thanks for this tool! I've used it several times in the last month to help think through things.
Currently, you can send someone an exported file and they can import it. I'd like to also share a system using only the URL. For example, the TypeScript Playground uses a compressed and Base64 encoded string:
I figured this is likely the same state that's exported in "File > Save file", but encoded and placed in the URL.
EDIT: There's the "Embed as IFrame" option with the URL like what I'm looking for. I guess this issue is to make the URL easier to access without the iframe markup.
If it is in the plans then please let me know. I would like to contribute.
It would be awesome to add ability to simulate the system, not just draw the diagram.
It not neecesary need to be precise, just automate the “back of the envelope” calculations system architects normally do.
Ideally, with properties specified, it should make possible to identify bottlenecks in the system. Would be priceless utility in all kinds of “what-if” checks (if our DB performance drops 2 times, what will be the impact on the client requests?)
"Export png" functionality in the File navbar menu.
Since connecting is made by mouseup event on a port and touchend event doesn't work the same way, the whole connecting process probably needs to be remade.
New options in View menu of navbar. Hides titles above every components.
Create small tooltips/modals that will describe what a propery is doing. For example in options menu when hovering over "Endpoints", there will be tooltip that says what it is doing and how to create/modify them.
Would it be possible to separate the viewer component such that it can take a JSON file and display it as an embedded format à la mermaidJS? This will make it easier to embed a read-only version for documentation purposes.
Very similar to LoadBalancer. Will be in the same category.
Similar to object storage. It would have some different properties.
In my experience it is rare for a web server not to have outputs to external endpoints. In the case of most CMS, the web server accepts the initial request, but then makes a request to the database and/or an external API to get data associated with the route/path of the HTTP request.
However, unless I am mistaken, Systemizer doesn't seem to be able to illustrate this common scenario as the HTTP Web Server component has no outputs.
Would it make sense to allow Web Server components to have outputs so that the flow between Web Server and Database is 2-way? Otherwise it seems that I'd have to connect the load balancer directly to the database first, which isn't exactly representative.
Thanks again for such a promising and fun tool!
This is just for needs of making an embed functionality (like Issue #15). If I wanted to make an IFrame, it would need to pass the save file to the url, however the current size is too big for that (about 9-10kB for 30 components). I did some optimizations of the variable names(make them 1-3 characters long) and few tweaks, but only managed to get it to little more than half of its original size (still about 5kB for just 30 components).
I also tried:
After all of this, there is still a problem with the need of base64 encoding for the url parameter... which make the size about 30% bigger. In the end, the "url parameter ready" save file would have about 6.5kB for board with 30 components. Which is terrible...
If you have any suggestions or tips, please share them in the comments. My goal is to get the size as low as possible, let's say about 3-4kB for 30 components.
Maybe I am just not seeing it, but I am not able to advance to the next tip/tutorial in the onboard tutorial. Shouldn't there be a "next" button or something?
ps: really nice project!
Make titles that display in the center of the connection.
There will be another variable to localStorage that holds list of saved systems that user can load at any time.
Some things don't work how they should on firefox, mainly the landing page animation and exporting as PNG/SVG.
Firstly. Throw up a buy me a coffee link or something. This is a great tool. As an architect I will be starting to use this daily!
I think a great feature would be a heatmap overlay. Distributed systems often have bottlenecks. If a red haze started to appear around those components that were receiving the most messages in a given timeframe/message ratio, then teams could consider their volumetrics during solution design and cater for an appropriate implementation pattern or consider scale/resource requirements of underlying infrastructure (for those of us stuck on premise anyway 😢 )
It would also be great to set the frequency of sending messages. I.e. client A may be 1 message per second. Client B might be 50 messages per second
This will need renaming of scss variables pretty much everywhere... They will be changed from purple to somethnig like primary/secondary etc...
Panning around is a little clunky with a touchpad. It would be significantly easier to use if we could use the spacebar + drag to pan around.
Allow the user to change color of component titles when exporting (SVG/PNG) to light or dark color. Export options will get new property for that.
Current set of components are good to design simple web-based apps, but in practice there are more cases.
For example, almost immediately I missed “consumer” or “processor” - worker which consumes MQ messages and transforms them. In general they can do multiple requests, not just transformations, for example it can consume “crawling requests” which contains domain names, perform the crawling of the website (HTTP requests) and push results into another MQ queue.
Actions of endpoints have empty selects when the board is loaded. They are probably binded to objects and weren't "re-binded" when loading.
First off, congrats on building this tool. This is the type of tool I've been wanting to build for a long time but never got around to it. I'm a bit jealous you beat me to the punch but am just excited that something like this exists.
I'm currently using this tool to make some diagrams for a blog post I'm writing. However, the blog post deals with concurrency/parallelism and that's something I wish you could visualize with this. I can kind of get around it by creating multiple of the same components and overlapping them, but still not quite the same.
I hope to contribute to this project in the future as it's definitely an area I'm interested. Possibly this feature is something I could work on myself.
In any case, thanks again for building this tool.
The current SEO is just terrible. Better search for tags like Systemizer, system design tool, system design vizualization etc..
Copying a component will also store the connections, and after pasting the component will have those connections
Is it possible to have different sized components instead of all the same square shapes?
Pressing CTRL+C/Z/X/V or DEL will trigger the given action but with component. These actions should be disabled if user is typing something to input or text field, but still functional for copying or deleting text etc...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.