Thank you for using Graphit! :D
This website was built by me (@erickcpassos) to be used in graph theory lessons for programming
competitions.
Its main goal is to provide a quick way to sketch and manipulate simple graphs, along with displaying
information that is useful for people learning about graph theory or preparing for algorithmic
competitions.
This quick tutorial introduces you to the functionalities and shortcuts, but I hope this web app is
easy to use intuitively.
Best wishes, Erick
Add a new node
To add a new node in the graph, select the ADD option (clicking the 2 button or holding the '2' key) and click in the canvas area. The new node will be automatically assigned a number as a label.
New nodes will also be added if they are referred to in the text input. The text input can also be used to change the label of nodes created by clicking.
Add a new edge
To add a new edge in the graph, select the EDGE option (clicking the 3 button or holding the '3' key) and click on the node that will be the edge's source. After that, click another node to be the edge's destination. A new edge will be drawn between both edges.
It is also possible to add more than one edge between the same pair of vertices. Additionally, a value can be added to an edge by editing the text input, adding the value after the destination node.
Deleting things
The DELETE mode can be accessed by selecting option 4. In this mode, you can click any node or edge and it will be promptly deleted from the graph.
Note that removing a node will also delete any edges connected to it.
Drawing (yay!)
Sometimes, ideas can just be conveyed the right way with some drawings.
To draw on top of the graph, select option 5. You can draw freely within the canvas using the mouse.
To delete your drawings, press C (for clear) while you are in the drawing mode.
If you want to download the graph image with your drawings in it, ensure you are in the draw mode when pressing 'Download Image'
That's all!
Now you should know the basics of Graphit and be able to use it to sketch your graphs.
To open this tutorial again, just click the 'i' info button in the menu.