Element Types

DSP supports 7 element kinds. Each has specific properties and behaviors.

Node

The primary diagram element — a shape with a label.

{
  "id": "my-node",
  "kind": "node",
  "nodeType": "service",
  "shape": "roundedRect",
  "label": "API Gateway",
  "layout": {
    "mode": "absolute",
    "x": 50, "y": 100,
    "width": 180, "height": 70
  }
}

Shapes

Node types

nodeType is a semantic label with no rendering effect. Common values: service, database, queue, storage, cache, gateway, external, user.

Edge

A connection between two nodes.

{
  "id": "e1",
  "kind": "edge",
  "from": { "elementId": "node-a", "port": "right" },
  "to": { "elementId": "node-b", "port": "left" },
  "router": "orthogonal",
  "label": "requests"
}

Routers

Endpoints

{
  "endpoints": {
    "startArrow": "none",
    "endArrow": "triangle"
  }
}

Group

A logical grouping of elements. No visual rendering by default.

{
  "id": "group-1",
  "kind": "group",
  "childIds": ["node-a", "node-b"]
}

Frame

A visual container with a title bar and background.

{
  "id": "frame-1",
  "kind": "frame",
  "label": "Backend Services",
  "childIds": ["api", "db"],
  "layout": {
    "mode": "absolute",
    "x": 20, "y": 20,
    "width": 500, "height": 300
  }
}

Text

A standalone text block.

{
  "id": "text-1",
  "kind": "text",
  "content": "System Architecture",
  "layout": {
    "mode": "absolute",
    "x": 50, "y": 20,
    "width": 300, "height": 40
  }
}

Image

An image element referencing an asset.

{
  "id": "img-1",
  "kind": "image",
  "assetId": "logo",
  "layout": {
    "mode": "absolute",
    "x": 50, "y": 50,
    "width": 200, "height": 100
  }
}

Guide

An alignment guide (horizontal or vertical line).

{
  "id": "guide-1",
  "kind": "guide",
  "axis": "horizontal",
  "position": 200
}