Gallery › SystemSketch › SystemSketch blocks

SystemSketch blocks

One SystemSketch board, the communication-projection prototype (camera, perception, planner, mission behaviour tree, motion controller, telemetry UI and two value blocks), as rows plus edges: a block is a row with its input and output ports, a connection is an edge named by the output port it leaves. The mission BT and motion controller keep all six of their connections, each with its own line and label.

SystemSketchgraphtable3 views of one blocks.json

The .base file and its data

Every tab above is one entry of this file; the views read these rows. ⋯ in the toolbar copies the current view as YAML.

views.base
# A SystemSketch board (communication-projection-prototype) as rows (blocks) plus edges (connections, named by
# their output port). Obsidian Bases grammar plus data-ui's graph keys (docs/CONTRACT.md §5).
data: blocks.json
properties:
  block: { displayName: Block }
  kind: { displayName: Block type }
  sends_to: { displayName: Sends to }
  via: { displayName: Via port }
views:
  - type: graph
    name: Blocks and ports
    edges: { property: sends_to, label: via }
    layout: { algorithm: dagre, direction: LR }
    order: [kind, inputs, outputs]
  - type: graph
    name: By block type
    edges: { property: sends_to, label: via }
    layout: { algorithm: dagre, direction: TB }
    groupBy: { property: kind, direction: ASC }
    order: [n_in, n_out]
  - type: table
    name: Blocks
    order: [block, kind, inputs, outputs, sends_to, via, definition]
    sort:
      - { property: block, direction: ASC }
blocks.json
// blocks.json: 8 rows, 4 KB; the first 3
{
 "id": "systemsketch-blocks",
 "title": "SystemSketch blocks",
 "titleProperty": "block",
 "source": "systemsketch sketches/review/communication-projection-prototype.systemsketch (Block-Ports-Edges)",
 "properties": {
  "block": {
   "type": "text",
   "label": "Block",
   "width": 200
  },
  "kind": {
   "type": "text",
   "label": "Block type",
   "display": "badge"
  },
  "inputs": {
   "type": "list",
   "label": "Inputs"
  },
  "outputs": {
   "type": "list",
   "label": "Outputs"
  },
  "n_in": {
   "type": "number",
   "label": "In ports"
  },
  "n_out": {
   "type": "number",
   "label": "Out ports"
  },
  "definition": {
   "type": "text",
   "label": "Definition"
  },
  "sends_to": {
   "type": "list",
   "label": "Sends to",
   "readOnly": true
  },
  "via": {
   "type": "list",
   "label": "Via port",
   "readOnly": true
  }
 },
 "rows": [
  {
   "id": "telemetry",
   "block": "Telemetry UI",
   "kind": "component",
   "inputs": [
    "preview: Chunk[Image]",
    "status: Status"
   ],
   "outputs": [],
   "n_in": 2,
   "n_out": 0,
   "definition": "Telemetry_UI",
   "sends_to": [],
   "via": []
  },
  {
   "id": "threshold_value",
   "block": "threshold (value)",
   "kind": "value",
   "inputs": [
    "threshold: float"
   ],
   "outputs": [
    "threshold: float"
   ],
   "n_in": 1,
   "n_out": 1,
   "definition": null,
   "sends_to": [
    "perception"
   ],
   "via": [
    "threshold"
   ]
  },
  {
   "id": "mission_value",
   "block": "mission_id (value)",
   "kind": "value",
   "inputs": [
    "mission_id: str"
   ],
   "outputs": [
    "mission_id: str"
   ],
   "n_in": 1,
   "n_out": 1,
   "definition": null,
   "sends_to": [
    "mission"
   ],
   "via": [
    "mission_id"
   ]
  }
 ]
}
README.md
README.md
# SystemSketch blocks

One SystemSketch board, the communication-projection prototype (camera, perception, planner, mission behaviour
tree, motion controller, telemetry UI and two value blocks), as rows plus edges: a block is a row with its input
and output ports, a connection is an edge named by the output port it leaves. The mission BT and motion controller
keep all six of their connections, each with its own line and label.

- **App:** SystemSketch
- **Replaces:** the hand-placed tldraw board (`systemsketch/sketches/review/communication-projection-prototype.systemsketch`)
  for reading the system's structure; SystemSketch stays the editor.
- **Shows:** the graph view laid out left to right by dagre, parallel edges between one pair spread apart, a second
  preset grouped by block type (subflows, top to bottom), and the blocks as a table.
- **Data:** `blocks.json`, written by `source/build.py` from the board's block shapes and connection bindings.

The original UI it replaces

the hand-placed tldraw board (systemsketch/sketches/review/communication-projection-prototype.systemsketch) for reading the system's structure; SystemSketch stays the editor.

What it shows

the graph view laid out left to right by dagre, parallel edges between one pair spread apart, a second preset grouped by block type (subflows, top to bottom), and the blocks as a table.

Data

blocks.json, written by source/build.py from the board's block shapes and connection bindings.