Your first diagram

1. Nodes

A diagram is a list of nodes connected by edges. Every node has an id (the name you reference it by elsewhere) and a kind (the visual archetype: client, service, database, cache, or queue). The optional label is the human-readable text that appears on the box.

diagram "first" {
  node web { kind: client,  label: "Web" }
  node api { kind: service, label: "API" }
}

2. Edges

Edges are directed connections between nodes. The syntax is edge <id>: <from> -> <to>, optionally followed by a { label: "..." } block. Like nodes, the edge id is a name you will use later — to attach motion to it.

diagram "first" {
  node web { kind: client,  label: "Web" }
  node api { kind: service, label: "API" }

  edge req: web -> api { label: "request" }
}

3. Adding a database

Add a database and a second edge. Layout is automatic — remaid uses ELK (a layered graph layout solver) to place nodes and route edges. You do not specify coordinates.

diagram "first" {
  node web { kind: client,  label: "Web" }
  node api { kind: service, label: "API" }
  node db  { kind: database, label: "Postgres" }

  edge req:   web -> api { label: "request" }
  edge write: api -> db  { label: "INSERT" }
}

4. Motion

This is the part remaid exists for. A scene block declares animation. Inside, each line is one motion step: <animation> <edge> { ... }.

The after: reqchain means “start when the most recent step that animated req finishes.” loopEvery: 2.5s sets the period between repeats.

diagram "first" {
  node web { kind: client,   label: "Web" }
  node api { kind: service,  label: "API" }
  node db  { kind: database, label: "Postgres" }

  edge req:   web -> api { label: "request" }
  edge write: api -> db  { label: "INSERT" }

  scene live {
    loopEvery: 2.5s
    packet-flow req   { speed: 700ms }
    packet-flow write { speed: 600ms, after: req }
  }
}