Create, edit, and save your graph

1. 1

   Open Load

   Paste your text, or choose Open file to select a text file or a Graph Editor JSON document.

2. 2

   Check the format and preview

   The editor detects the format. If several interpretations are possible, choose one in Format. It also infers whether numbering starts at 0 or 1, so check the node labels.

3. 3

   Choose Apply to graph

   This replaces the current graph with the previewed result. Review any warnings before applying. Undo restores the graph from before the import.

1. 1

   Place a node with Node

   Click or tap an empty spot on the canvas to add a node. Press N to switch to this mode.

2. 2

   Connect two nodes with Edge

   Select the source, then the target. In a directed graph, the arrow follows that order. Click empty space or press Esc to cancel a connection in progress.

3. 3

   Adjust positions with Select

   Drag a node to move it or an edge to bend it. Select a node or edge to open the action bar for editing or deleting it.

• To select a group, hold Shift and drag in Select mode. The arrow beside Select chooses All, Nodes only, or Edges only for box selection.
• Ctrl (⌘ on Mac) + Shift + drag selects nodes only. Ctrl (⌘ on Mac) + Alt + drag selects edges only.
• Double-click or select an element and press Enter to edit its label or weight. Right-click opens its edit menu.

• Select nodes or edges, then choose a color in the action bar. This also works with multiple elements selected. Press C to cycle their colors.
• Settings switches between directed and undirected graphs, weighted and unweighted edges, and 0-indexed and 1-indexed numbering. It also controls arrow size and node-label visibility.
• Select directed edges to Reverse their direction, or use Reverse all edges in Settings to change the whole graph.
• After bending an edge, choose Return to automatic routing to restore its automatic path. The right-click menu also offers Bend left and Bend right.
• Enable Snap drags to grid in Settings to align nodes while moving them.

In Load, choose Use a sample to pick a tree, cycle, grid, or another graph. Search by name or filter by category. For samples with parameters, adjust values such as the node count before applying.

Open Layout (L) to rearrange a graph. Start with Auto layout, or try Circle and Grid to compare simple arrangements.

• Use Tree for a tree or forest, DAG for a directed acyclic graph, and Bipartite for a bipartite graph. A layout is disabled when its requirements are not met; its tooltip explains why.
• BFS layers groups nodes by distance from a starting node; Radial arranges distance layers in circles. Select one node first to use it as the starting node, or as the root for Tree.
• SCC groups nodes of a directed graph by strongly connected component. Line, Concentric, and Resolve overlap offer other arrangements.
• Offset overlapping edges bends edges automatically to avoid nodes where possible. If overlaps remain, move the nodes or bend individual edges by hand.

1. 1

   Save for editing with JSON

   In Export, choose JSON as the format and save the .json file. It preserves nodes, edges, labels, positions, colors, bends, and graph settings. Open it through Load to resume editing.

2. 2

   Share an image with PNG

   Open PNG, choose the whole graph or current view, and set the background and padding. For the whole graph, choose a long-edge size, the current zoom, or a fixed canvas. Check the preview, then save or copy.

3. 3

   Use connection data as text

   In Export, choose Edge list, Adjacency list, or Adjacency matrix. These formats omit positions, colors, and manual bends; custom labels may be replaced with consecutive numbers. If a format cannot represent your edges or weights, choose JSON or a compatible edge list.

4. 4

   Include a diagram in TeX with TikZ

   Choose TikZ (TeX), then copy the code or save a .tex file. Add the packages listed in the opening comments. Japanese labels need LuaLaTeX and luatexja; other Unicode labels need an appropriate engine and fonts.

• Drag empty canvas to pan the view. On a phone, use two fingers to zoom and move the view.
• In Node, tap empty space to add a node. In Edge, tap two nodes in order to connect them.
• In Select, tap a node or edge and use the action bar to change its color, edit its label, or delete it. Drag nodes to move them and edges to bend them.
• If your graph moves off screen, use Fit graph to view. With a keyboard, Shift+1 fits the whole graph.