The ERD accepts three tiers of JSON. Drop a .json file onto the canvas, paste with Ctrl+V, or use FILE → Load JSON. The tier is detected automatically.

Fastest seed. Nodes are merged into the current diagram. No connections. No workspace envelope needed.

// Single node
{ "title": "Input Plugin", "type": "plugin" }

// Array of nodes
[
  { "title": "Input Plugin",  "type": "plugin"  },
  { "title": "Audio Manager", "type": "system"  },
  { "title": "Asset Cache",   "type": "console" }
]

Nodes and connections together. No workspace envelope. Merged into current diagram or offered as replace. The primary format for agent output when adding a subsystem.

{
  "nodes": [
    {
      "id": "n_input",
      "title": "Input Plugin",
      "icon": "⌨",
      "type": "plugin",
      "x": 200, "y": 100,
      "status": "running",
      "fields": [
        { "key": "devices",  "value": "3"       },
        { "key": "mappings", "value": "keyboard" }
      ],
      "ports": {
        "out": ["events", "state"],
        "in":  ["commands"]
      }
    }
  ],
  "connections": [
    {
      "from": { "node": "n_input", "port": "events" },
      "to":   { "node": "n_bus",   "port": "verbs"  },
      "type": "event",
      "label": "input events",
      "animated": true
    }
  ]
}

Complete workspace document. Shown with a merge/replace confirmation modal. Restores viewport position, workspace name, and project metadata.

{
  "type": "ashlight.erd.workspace",
  "version": "1.1",
  "name": "My Architecture",
  "project": {
    "id": "my_project",
    "label": "My Project",
    "kind": "erd"
  },
  "viewport": { "x": 0, "y": 0, "zoom": 1 },
  "nodes": [ ... ],
  "connections": [ ... ],
  "meta": {
    "description": "Optional notes"
  }
}

{
  "id":     "n_core",         // omit → auto-generated
  "title":  "Ashlight Core",  // required
  "icon":   "◈",              // any unicode glyph
  "type":   "core",           // core|system|bus|plugin|console
  "x":      0,                // world X position
  "y":      0,                // world Y position
  "status": "running",        // running|idle|error|warning|stopped
  "fields": [
    { "key": "version", "value": "v1.0.0" }
  ],
  "ports": {
    "out": ["commands", "events"],
    "in":  ["config"]
  }
}

Feed live data from a running engine into the ERD. Available in DevTools console as erdUpdate() and erdBatch().

// Single field update
erdUpdate('n_core', 'uptime', '01:23:45')

// Batch update — efficient for engine tick
erdBatch([
  { node: 'n_core',   field: 'uptime',     value: '01:23:45' },
  { node: 'n_bus',    field: 'messages/s', value: '9,104'    },
  { node: 'n_render', field: 'draw calls', value: '1,387'    },
])

// Status change — changes node dot colour
window.postMessage({
  type:   'ashlight.erd.status',
  node:   'n_script',
  status: 'error'
}, '*')

// Via postMessage from parent frame / BroadcastChannel
window.postMessage({
  type:    'ashlight.erd.batch',
  updates: [{ node, field, value }, ...]
}, '*')

The diagram loaded by default is the actual Ashlight Engine runtime architecture — not placeholder data. Every node represents a real system. Every connection represents a real data flow. Drop ashlight_runtime_erd.json to restore it at any time.

Connections flow from output ports (left dot, cyan) to input ports (right dot, green). Animated dots show active data flow — their speed and colour reflect the connection type. The connection label appears at the midpoint. Click any connection to inspect and change its type in the inspector panel.

Hit ▶ SIMULATE to see all field values update in real time, with the event stream logging every change. This approximates what a live engine connection would look like.