The Data object defines nodes and links:

{
  "nodes": [
    {
      "id": "w2",
      "label": "W2 Paycheck",
      "column": -1
    },
    {
      "id": "income",
      "label": "Income",
      "column": 0
    },
    {
      "id": "fixed",
      "label": "Fixed Expenses",
      "column": 1
    }
  ],
  "links": [
    {
      "source": "w2",
      "target": "income",
      "value": 91820
    },
    {
      "source": "income",
      "target": "fixed",
      "value": 120063.86
    }
  ]
}

Nodes

id — unique identifier
label — display name
column — integer column position. Column 0 is the anchor (centered on reset). Use negative columns (-1, -2…) for sources flowing in, positive (1, 2…) for outflows.

Links

source — source node id
target — target node id
value — numeric flow value
label — (optional) display label on hover

Separate from data. Controls appearance:

{
  "title": { 
    "text": "Cash Flow",
    "fontSize": 22 
  },
  "canvas": {
    "width": 1200,
    "height": 800,
    "padding": [40, 40, 40, 40],
    "background": "#fafbfd"
  },
  "columns": {
    "positions": {
      "-1": 0.05,
      "0": 0.35,
      "1": 0.6,
      "2": 0.82
    }
  },
  "nodeDefaults": {
    "width": 18,
    "padding": 14,
    "labelFontSize": 11,
    "valueFontSize": 10
  },
  "linkDefaults": {
    "opacity": 0.35,
    "hoverOpacity": 0.55
  },
  "nodeStyles": {
    "income": { "color": "#4caf80" },
    "fixed": { "color": "#e05555" }
  }
}

columns.positions — object keyed by column number

Values are 0–1 fractions of the inner width. Negative keys are fine: "-1": 0.05. If omitted, columns are auto-spaced evenly.

nodeStyles — keyed by node id

color — fill color for node & links from it
labelColor — (optional) text color
width — (optional) override node bar width

Interaction
Drag nodes vertically to reposition them. The updated positions persist and are included in exports.