OneTaskBy Tim King · Updated
Chord Diagram Maker
Draw Flows Between Groups from Text, 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 Chord Diagram Maker works
This chord diagram maker shows flows between members of a group. A chord diagram shows the flows between the members of one group, arranged around a circle, with a ribbon for every pair whose width shows the amount that passes between them. It suits migration between countries, trade between regions, transfers between accounts or passes between players. Type the flows as "from -> to, value" lines, and the page draws the circle, sizes the arcs and ribbons, and lets you download SVG or PNG. Nothing is uploaded.
Chord diagram maker: writing the flows
Each line is a source, an arrow, a target, a comma and a value. The arrow may be "->", "=>", ">" or a tab, so a three-column spreadsheet pasted in works as it is. A missing value counts as 1. Lines beginning with "#" are ignored. Every distinct name becomes an arc on the circle, in the order the names first appear, and flows between the same pair are added together. A flow from a member to itself is allowed and draws as a ribbon that loops back to the same arc.
Directed and undirected
With Directed ribbons, each ribbon has a pointed end at the target, and the arc for a member is sized by the total it sends plus the total it receives. Two flows between the same pair in opposite directions draw as two ribbons, each showing its own amount. With Undirected ribbons the pair is drawn as a single ribbon whose two ends are sized by the flow in each direction, the classic chord diagram used for migration charts. Choose Undirected when the question is "how strong is the relationship between these two" and Directed when the question is "who sends to whom".
Arcs, gaps and labels
Arc thickness sets the width of the ring; the gap sets the angle in degrees between adjacent arcs, which keeps the ribbons from neighbouring members visually separate. Labels are placed outside the ring and rotated to follow it, flipped on the left side so they always read left to right. Values in labels adds each member's total in brackets, formatted with the Number format menu. Ribbon colour follows the source of each flow by default; Target colours ribbons by where they arrive, which is clearer when one member receives from many.
Reading the diagram
Wide arcs are the busiest members. A ribbon that is wide at one end and narrow at the other shows an unbalanced relationship. Hovering an arc or ribbon in the preview shows the exact numbers, and those tooltips are kept in the downloaded SVG as title elements, so a diagram embedded in a web page keeps its hover values. The largest member and the total flow are listed below the diagram.
Exporting
Download SVG gives a vector file that scales without blur; 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 does the text need to look like?
One flow per line, "from -> to, value". The value is optional and defaults to 1. Arrows may be "->", "=>", ">" or a tab. Names are matched exactly, so keep the spelling and capitals consistent. Blank lines and lines beginning with "#" are skipped.
How many members can a chord diagram hold?
Up to about twenty members stay readable with labels on. Beyond that the arcs become thin and the labels crowd; hide the labels, reduce the gap, or group small members into an "Other" entry before pasting. The layout itself has no limit.
What is the difference between Directed and Undirected?
Directed draws a separate arrow-tipped ribbon for each direction and sizes each arc by sent plus received. Undirected merges the two directions into one ribbon whose ends are sized by the flow in each direction, the traditional chord diagram. The numbers are the same; only the drawing changes.
Can I control the order of the arcs?
Arcs are placed in the order names first appear in the text, so reorder the lines to change the sequence around the circle. Within each arc the ribbons are sorted largest first.
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
Sankey Diagram Maker
Type source -> target lines and download a Sankey diagram as SVG or PNG.
Donut Chart Maker
Paste label,value rows, get a donut with the total in the middle.
Pie Chart Maker
Paste label,value rows, get a labelled pie chart; download 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.