honzaap / systemizer

A system design tool that allows you to simulate data flow of distributed systems.

Systemizer

Systemizer is a system design tool used to create and simulate large scale distributed systems.

Want to try Systemizer?

Systemizer is currently hosted on github pages.

How does Systemizer work?

• Select a component. This can be an API, Client, Message Queue, you name it.
• Create customizable endpoints, and connect components together.
• Send data to endpoints and watch the data flow of your system.

Installation

1. Clone repository to your local machine
2. Open terminal and cd into repository folder
3. run npm install
4. run npm run start
5. Systemize!

Documentation

• Documentation can be found in the Wiki section of this repo.

Contributing

• To learn about contributing, visit the How to contribute section.
• You can also check Issues to see if there is anything you want to help with.

systemizer's Issues

Consumer/processor component

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.

Feature request: ability to share design using the URL

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:

https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhmAogDzgWwA4BsCmA1OAJwEs4AjXGAXhgCIAJHLLEGAdREKwBMBCWgFChIIXADoWAcwAUCFOmz4ipCjgCUAmDCA

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.

Better firefox support

Some things don't work how they should on firefox, mainly the landing page animation and exporting as PNG/SVG.

[Feature Request] Ability add own custom components?

If it is in the plans then please let me know. I would like to contribute.

The consumed message returns again to the message queue

Copied components are copied and pasted with connections

Copying a component will also store the connections, and after pasting the component will have those connections

Feature Suggestion: Heatmap & Repeat Message Frequency

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

Great start! But why doesn't HTTP Web Server have outputs?

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!

Fix typos

There are some typos in the code, comments, property names, css classes, documentation etc.. Easy way to boost github karma

Consider Space+Drag to pan

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.

Add ability for concurrent requests

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.

Onboard Tutorial somehow not working

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!

Prevent keyboard shortcuts form triggering when inside any input form

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...

Connections sometimes not loading when the board is reloaded

Multiple selections

Allow user to select multiple components. That can be done by:

• Pressing and holding LMB and selecting components (like in windows)
• Holding CTRL and clicking on components (also just like in windows...)
  A lot of changes will be made, especially to selection service since the app in not made for this right now. Moving the board will now be done by either RMB or MMB (or both)

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.

Separate UI from board component

Things that don't belong to the board component (popups, header, other UI) should be in separate component.

Connecting doesn't work on touchpad

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.

Information provided is partially visible in footer

Links and info given in footer is partially hidden seems like a scss issue. Attached screenshot below

Selects of endpoint actions are empty when loading board

Actions of endpoints have empty selects when the board is loaded. They are probably binded to objects and weren't "re-binded" when loading.

How to horizontally drag and scroll?

Cloud Storage component

Similar to object storage. It would have some different properties.

Custom context menu

Make custom context menu. One for clicking on a component and one for clicking directly on board.

Light mode for SVG/PNG export

Function to hide titles above components

New options in View menu of navbar. Hides titles above every components.

Save multiple systems to localStorage

There will be another variable to localStorage that holds list of saved systems that user can load at any time.

Sharded database doesn't stay sharded after reloading the board

Titles for connections

Make titles that display in the center of the connection.

Way to optimize save file size

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:

• Protobuf: doesnt work, since options are unstructured, there can be anything from int to object, this just doesnt work (I don't know if I could even pass it to url)
• BSON: I couldn't get it to run, as far as I know, it doesn't work in browser

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.

Future plans for the project?

Change color of titles when exporting

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.

Boost SEO

The current SEO is just terrible. Better search for tags like Systemizer, system design tool, system design vizualization etc..

Different sized components?

Is it possible to have different sized components instead of all the same square shapes?

Preview of system when exporting

Use the element(canvas/svg) that is received from export service and make a preview in the export window.

Client Cluster component

It can connect to multiple nodes, maybe randomly choose to which endpoint a request will be sent. Adjust request speed etc...

Create some properties for proxy options

The proxy component doesn't currently have any properties, something could be added.

Use OpenAPI / Async API for Endpoint Specs

It would be great if we could import an OpenAPI / Async spec for the API and Event components

Light mode

This will need renaming of scss variables pretty much everywhere... They will be changed from purple to somethnig like primary/secondary etc...

The page did not respond

When I used the architectural solution shown in the figure, the page did not respond.

Function to export screenshot of the system

"Export png" functionality in the File navbar menu.

Undo/Redo functionality

The one implemented right now is only partial for position, and it is still buggy...

Simulation functionality

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?)

Component options helpers

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.

Message queue displays 404 when endpoint url changed

Feature request: add server-side data source component

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 Endpoints » Actions of existing Server-side components; add the ability to request data without an incoming request
• add a new Server-side component specifically for making requests (e.g. "Server request", "Cron job", "Batch process", etc.)

Export as SVG function

Export the board through svg

Improve text field

Pressing tab weidly shifts the whole page, the max width&height should be bigger. Also more options.

Proxy component

Very similar to LoadBalancer. Will be in the same category.

Independent viewer component for embedding

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.