Free online tool

Complex Diagram Arranger

Rearrange a busy diagram automatically. Try rows, circles, trees and other layouts, then edit and save the result.

Works on your deviceNo account neededGraph JSON / SVG / PNG / CSVOpen workspace ↓

Which graph layout should I use for a crowded diagram?

Layered layouts emphasize directed flow; force and stress layouts emphasize network relationships; radial layouts emphasize distance from a center; tree layouts suit hierarchies. Try an algorithm on the same graph, inspect the result and keep the arrangement that explains your data clearly.

Make the connections.

On your device

Diagram title

Import graph JSON

Use directed: true or false, a nodes array with unique IDs, and edges with source and target IDs.

{
  "directed": true,
  "nodes": [
    {
      "id": "start",
      "label": "New request",
      "type": "start",
      "x": 140,
      "y": 170
    },
    {
      "id": "review",
      "label": "Review details",
      "type": "process",
      "x": 400,
      "y": 170
    },
    {
      "id": "ready",
      "label": "Ready to proceed?",
      "type": "decision",
      "x": 660,
      "y": 170
    },
    {
      "id": "done",
      "label": "Book appointment",
      "type": "end",
      "x": 940,
      "y": 110
    },
    {
      "id": "followup",
      "label": "Ask for details",
      "type": "process",
      "x": 940,
      "y": 310
    }
  ],
  "edges": [
    {
      "id": "request",
      "source": "start",
      "target": "review",
      "weight": 1
    },
    {
      "id": "check",
      "source": "review",
      "target": "ready",
      "weight": 1
    },
    {
      "id": "yes",
      "source": "ready",
      "target": "done",
      "label": "Yes",
      "weight": 1
    },
    {
      "id": "no",
      "source": "ready",
      "target": "followup",
      "label": "No",
      "weight": 2
    }
  ]
}

Layout algorithmFlow directionNode spacing

Directed connectionsShow edge weights5 nodes · 4 connections

Edit nodes & connections ↓

Drag a node to move it. Drag blank space to pan.

Keyboard: focus a node and use arrow keys to move it; hold Shift for larger steps. Labels and notes are available in the editor below.

Nodes & notes

Search nodes, notes or tagsChoose node (5 matches)

Deleting a node also deletes its connections. Undo restores both. Keep at least one node.

Connections

Three simple steps

How to use Complex Diagram Arranger

Open a graph project or edit nodes and connections in the workspace.
Explore the graph and choose the relevant analysis or layout controls.
Export the diagram, data tables or an editable project.

Common questions

Good to know

Understand the result.
Keep the original.

Is this tool free, and are my files uploaded?

This tool is free with no account required. The work happens in your browser. Your input and files are not sent to a processing server.

What are the limits and details?

Different algorithms emphasize different structure and may ignore controls that do not apply, such as flow direction for force layouts. Layout does not change graph connections. Processing is bounded and can be cancelled.

Limits: 500 nodes, 2,000 edges and 500,000 project characters. Expensive operations run in a cancellable 30-second browser worker.

Which graph layout should I use for a crowded diagram?

Make the connections.

Nodes & notes

Connections

How to use Complex Diagram Arranger

Good to know

Related free tools

Graphviz DOT Playground

Dependency Map Builder

Decision Tree Builder