Save Diagrams to Database

This example shows the minimal steps to save and load a diagram from a database using the API integration strategy.

Backend endpoint

You need two endpoints. The exact implementation depends on your stack - here’s a simple Node.js/Express example:

import express from 'express';

const app = express();
app.use(express.json());

// In-memory store (replace with your database)
let savedDiagram = null;

// Load diagram
app.get('/api/workflow', (request, response) => {
  response.json(savedDiagram ?? {});
});

// Save diagram
app.post('/api/workflow', (request, response) => {
  savedDiagram = request.body;
  response.json({ ok: true });
});

Frontend integration

Use the API integration strategy in Workflow Builder and point it at your endpoints:

// integration-variants/with-integration-through-api.tsx

// Load - replace the fetch URL:
const response = await fetch('/api/workflow');

// Save - replace the fetch URL and method:
const response = await fetch('/api/workflow', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
});

The diagram data

The data object POSTed to your API has this shape:

{
  "name": "My Workflow",
  "layoutDirection": "DOWN",
  "nodes": [
    {
      "id": "abc-123",
      "type": "node",
      "position": { "x": 100, "y": 200 },
      "data": {
        "type": "trigger",
        "icon": "Lightning",
        "properties": {
          "label": "Start",
          "description": "Trigger"
        }
      }
    }
  ],
  "edges": []
}

Store this as a JSON column in your database. No transformation is needed - load it back as-is to restore the diagram.

Storing multiple diagrams

To support multiple diagrams per user, add a diagram ID to the endpoint:

GET  /api/workflows/:id
POST /api/workflows/:id

Pass the ID to the integration wrapper or manage it in your parent component using the through props strategy.