Online Graph Editor is a browser-based tool for drawing directed or undirected graphs and finite automaton diagrams entirely with the mouse. The stage widget above lets you place vertices, connect and curve edges, and label everything with LaTeX.
How it works
Everything happens with the mouse and a handful of keys, no separate edit mode to switch in and out of:
- Add a vertex — double-click empty space.
- Move a vertex — drag it; it gently snaps into horizontal or vertical alignment with other vertices as you get close, which keeps hand-drawn graphs looking tidy.
- Delete a vertex or edge — select it (click once) and press Delete. Removing a vertex also removes every edge attached to it.
- Label a vertex or edge — select it and just start typing. The text is rendered live through KaTeX, so plain letters like
q_0become a properly subscripted $q_0$ without any surrounding$…$. Backspace edits the label, Enter or Escape deselects. - Connect two vertices — hold Shift, press the mouse down on the starting vertex and release it on the target vertex.
- Bend an edge — drag the middle of a straight edge sideways to curve it; drag it back close to the straight line and it snaps back.
- Flip the arrowhead — double-click an edge to cycle it through no arrowhead, forward, backward, and both directions.
- Mark an accepting state — double-click a vertex to add or remove the double circle that automaton diagrams use for accepting/final states.
- Draw an incoming arrow from nowhere — hold Shift and drag from empty space onto a vertex. This is the usual way to mark the initial state of a finite automaton, an arrow that points at a state without coming from another one.
- Self-loop — hold Shift and click-release directly on a vertex.
Exporting
"Get TikZ code" opens the generated snippet in a dialog you can copy from directly; drop it into a document with \usepackage{tikz} and it reproduces the vertices, curves, self-loops and arrowheads as filled triangles at the correct angle. "Export SVG" downloads the current drawing as a self-contained .svg file, cropped to the graph, with labels drawn as plain SVG text so it renders correctly outside this page as well.
All the vector and hit-testing math behind dragging, curving and self-loops is done with Vector2.js, Pathomorph.js.