Tired of people getting graphs as gifts (https://codeforces.com/problemset/problem/1178/D) and you don't? Well, with this tool you can create and customize your own graphs and, while you're at it, gift them to your friends (if you have any, of course) in JSON format!
This application is a comprehensive Graph Theory creation tool. It provides an interactive canvas where you can build, customize, and visualize your own graphs from scratch. Not only can you design the structure, but you can also run various graph algorithms directly on your creations to see how they work in real-time.
- Interactive Adjacency List: Edit your graph's data directly using a built-in interactive adjacency list. It comes with a minimap and real-time syntax error detection, giving you a smooth experience similar to a modern code editor.
- Data Persistence (JSON): Save your progress and never lose a masterpiece. You can easily export your custom graphs to a
.jsonfile and load them back into the tool whenever you want. - Algorithm References: Each algorithm comes with its own detailed description section inside the app, including an illustrative image and its corresponding pseudocode (written in a Python-like style) so you can understand exactly how it works.
- Export to Image: Proud of the graph you built? You can easily take screenshots of your custom graphs directly from the canvas!
Currently, you can visualize and run the following algorithms:
- Depth-First Search (DFS)
- Breadth-First Search (BFS)
- Dijkstra's Algorithm (Shortest Path)
- Kruskal's Algorithm (Minimum Spanning Tree)
- Prim's Algorithm (Minimum Spanning Tree)
- Bridges (Cut-edges detection)
- Articulation Points (Cut-vertices detection)
- Euler Tour
- Eulerian Path
- Strongly Connected Components (SCC)
- Maximum Flow
You can try out the live version of the application here:
First, upon entering the page, you will see a beautiful background with a blur effect. Besides that, there are 4 buttons. We will briefly describe all of them except the second one, which we will talk about later :)
- Start!: Pressing this takes you to the Graph Creation Engine, which we will discuss in the next section.
- Contact: It simply shows some "important" links (totally not my GitHub).
- Help: It's nothing more than a link to this very interface guide :|
After clicking the suggestive Start! button, you will arrive here. Of course, this photo is just a reference from an Android device that we will use in this guide because it is more compact, which makes our lives much easier.
Let's discuss what each icon in the bottom panel does:
- Go Back: This button simply takes you back to the beautiful blurred background of the main menu.
- Create Node: Tapping this button opens the following popup window:
Well, it really doesn't leave much to the imagination. By tapping the colored balls, you can customize how your node looks, from the inside color to the number color, and even the border color (and well, just those 3 things). You can configure its position too.
- Create Edge:
Just like its neighbor, this popup window doesn't leave much to the imagination either. It is assumed that the user has a basic understanding of graph theory, and if not, what the hell are you doing here?
The next two buttons are simply for destroying what you created with the ones I just mentioned, so let's move on.
If you dare to click on the list-shaped button, you will enter this section:
First of all, in the top right corner there is a "minimap" that allows you to see how your graph is being created and linked as you add edges to the adjacency list. If you have used code editors (like Visual Studio Code), you will notice the similarity. Let's see how our program reacts to "syntax" errors. For example, what happens if we input an edge named 'Guayaba':
The red marker is indicating an error since (among other things) there can only be numbers on each line. Of course, the graph won't be drawn on the minimap in this state.
This one shows warnings, which are mostly due to redeclarations of edges or nodes. In this case, the graph will still be drawn on the minimap.
At the bottom of this section, you can see 5 buttons. We will skip the explanation of the first one; the second button clears the list, and the third one places the nodes in random positions (just in case you are absolutely hating how your graph looks).
The next two buttons are related to persistence:
- Load Button: Used to load a graph in JSON format previously created by this app. Obviously, uploading any other file won't produce the expected results. Do you remember when we talked about the second button of the main menu at the beginning? Well, its function is the exact same as this one.
- Save Button: Simply saves the last "drawable" graph. This means that if the list currently has syntax errors, it will save the last state that was error-free (an empty graph meets this condition).
Retracing our steps back to the previous menu, if you clicked the button that comes right after the list button, you will enter the Algorithms section. Here, a total of 11 Graph Theory algorithms are listed, available to be executed on your graph. Each algorithm features a picture associated with it, as well as a quote from a personality about it or something related, followed by a brief description and its pseudocode.
You can switch between algorithms by pressing the button with the A-Book icon:
Finally, back in the Creation Engine menu, we are left with the last two icons:
The camera icon is quite suggestive: you can take a screenshot of your graph, which will be automatically downloaded with the name Graph in PNG format. Next to it is an eye icon, which hides the left-side algorithms panel to improve visibility. (Each icon corresponds to the execution of an algorithm, of course; discovering them is left up to the user's experimentation!)
Thanks for making it this far! Please leave a star ⭐ if you liked the repository.