OneTaskBy Tim King · Updated
Network Graph Maker
Force-Directed Graph from an Edge List, Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Network Graph Maker works
This network graph maker draws nodes and links from a list. A network graph shows who is connected to whom: people in a team, pages that link to each other, services that call each other, characters who share a scene. Paste the links as "a -> b" lines and this page runs a force-directed layout that pulls connected nodes together and pushes unrelated ones apart, sizes each node by how many links it has, and lets you download the result as SVG or PNG. Nothing is uploaded.
Network graph maker: writing the links
One link per line: a source, an arrow, a target and an optional value after a comma. The arrow may be "->", "=>", ">", "--" or a tab, so a two-column spreadsheet pastes straight in. A value makes the line thicker; a missing value counts as 1. Lines starting with "#" are ignored. Names are matched exactly, so "Ada" and "ada" are two different nodes. Every name that appears becomes a node; there is no separate node list to maintain.
How the layout works
The page runs a physics simulation: every node repels every other node, each link acts as a spring that pulls its two ends to a set length, and a gentle force keeps the whole thing centred. After a few hundred steps the graph settles into a layout where clusters of well-connected nodes sit together and bridges between clusters are visible as long links. The simulation runs to completion before drawing, so the same text always gives the same picture, and the result is scaled to fit the preview.
Spread and link length
Spread sets how strongly nodes push each other away. A low value gives a compact, dense picture; a high value opens the graph up so labels stop overlapping. Link length is the resting length of each spring. Raising it stretches every connection; lowering it tightens clusters. For a graph with many nodes, raise Spread first, then adjust Link length until the labels are readable.
Colours, sizes and arrows
Node colour by Group gives every connected component its own colour, so islands that share no link with the rest of the graph stand out immediately; by Name gives each node its own colour from the palette. Node size follows the number of links touching it, so hubs are large and leaves are small. Arrows draws an arrowhead at the target end of every link, which turns the picture into a directed graph; leave them hidden for friendship, co-author or similarity networks where direction has no meaning. Labels can be hidden for a dense graph where only the shape matters.
Exporting
Download SVG gives a vector file with the names as text and the link counts kept as hover titles. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard. Everything is drawn in your browser; the text never leaves your machine.
FAQ
What is an edge list?
A list of connections, one per line, each naming the two things it joins. "Ada -> Grace" is one edge. This page reads edge lists written with "->", "=>", ">", "--" or a tab between the names, with an optional ", value" at the end of the line to weight the link.
Why does the layout look different from the one in my other tool?
Force-directed layouts have no single correct answer; any arrangement that keeps connected nodes close is valid. This page starts from a fixed spiral and runs the same number of steps every time, so the same text gives the same picture here, but another program will start from different positions and settle somewhere else.
How many nodes can it draw?
A few hundred nodes lay out in under a second. Beyond that the simulation slows and labels become unreadable, so hide labels, raise Spread, or draw one cluster at a time. The Most connected statistic below the graph names the biggest hub.
Can I show the direction of a link?
Yes. Set Arrows to Show and every link gets an arrowhead at the target end, shortened so it sits against the node circle rather than under it. A link written in both directions draws two overlapping lines with an arrow at each end.
See also: all Diagram Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, 3D Science, Tracker Music.
Related tools
Arc Diagram Maker
Type a -> b lines and download an arc diagram as SVG or PNG.
Chord Diagram Maker
Type from -> to lines and download a chord diagram as SVG or PNG.
Sankey Diagram Maker
Type source -> target lines and download a Sankey diagram as SVG or PNG.
CSV / JSON Converter
Convert CSV to JSON and back, quoting handled properly.
SVG To PNG
Rasterise an SVG to a PNG at any width.