GraphShard

Table of Contents

Straddling the end of 2023 and the beginning of the new year, I had some free time because of the Christmas vacations. I decided to take advantage of this opportunity to develop this project that I had had in mind for some time.

I often found myself discussing with some of my colleagues how to implement at the architecture of some software system, and just discussing doesn’t lead anywhere. There are a myriad of services out there that allow you to create a System Design graph, but I still decided to create my own version.

Introducing GraphShard, a platform where you can create System Design charts and share them with other users. Below are some of the features that make it particularly easy to use:

Add a new Node

Adding a new node is super easy. Simply right-click on the canvas and choose the “Create Node” option to have the modal with all types of nodes in front of it. Once chosen, the node will appear in the canvas at the position clicked

https://cdn.graphshard.com/videos/graphshard/1/master.m3u8
autoplay,playsinline,muted,loop,preload:auto

Create a Group

To create a group, simply bring two nodes closer together. This will automatically create a group which details you can later modify:

https://cdn.graphshard.com/videos/graphshard/2/master.m3u8
autoplay,playsinline,muted,loop,preload:auto

Connect Nodes together

To connect two nodes to each other, simply click on a node and select the “Connect” option:

https://cdn.graphshard.com/videos/graphshard/3/master.m3u8
autoplay,playsinline,muted,loop,preload:auto

Editing Nodes and Groups

No matter whether it is a node or a group, to change its type and name simply press on the resource and select the “Edit” option

https://cdn.graphshard.com/videos/graphshard/4/master.m3u8
autoplay,playsinline,muted,loop,preload:auto

You can share the created graph with the option in the upper right corner. It is possible to share in two ways:

Viewer: Can only view the graph
Editor: Can edit the graph

https://cdn.graphshard.com/videos/graphshard/5/master.m3u8
autoplay,playsinline,muted,loop,preload:auto

Edit #1

Every now and then when I have time I add new features to the system, for example recently I added the dark theme

But I think there are several improvements that I still want to work on