@legatoacc3/workflow-canvas

Reusable Vue 3 workflow canvas package for LSFlow-style workflow builders.

This package exposes a VueFlow-based canvas component, graph contracts, mutation helpers, and ID utilities so other Vue applications can try the builder surface without depending on the LSFlow web app.

Status

Preview package.

The current release line is intended for evaluation and integration experiments. APIs may still change while the reusable boundary is being stabilized.

Installation

npm install @legatoacc3/workflow-canvas vue

or

pnpm add @legatoacc3/workflow-canvas vue

Basic usage

import { createApp } from 'vue'
import App from './App.vue'

import '@legatoacc3/workflow-canvas/style.css'

createApp(App).mount('#app')

<script setup lang="ts">
import { WorkflowCanvas } from '@legatoacc3/workflow-canvas'
import type { WorkflowCanvasGraphState } from '@legatoacc3/workflow-canvas/contracts'

const graph: WorkflowCanvasGraphState = {
  nodes: [],
  edges: [],
  viewport: {
    x: 0,
    y: 0,
    zoom: 1
  }
}
</script>

<template>
  <WorkflowCanvas
    frame-title="Workflow Draft Canvas"
    :graph="graph"
  />
</template>

Exports

Main package:

import { WorkflowCanvas, createCanvasAdapter, createDraftMutation } from '@legatoacc3/workflow-canvas'

Contracts:

import type { WorkflowCanvasGraphState, WorkflowCanvasMutation } from '@legatoacc3/workflow-canvas/contracts'

Graph helpers:

import {
  createWorkflowGraph,
  stringifyWorkflowCanvasDocument,
  parseWorkflowCanvasDocument
} from '@legatoacc3/workflow-canvas/graph'

ID helpers:

import { buildGraphNodeId, buildGraphEdgeId } from '@legatoacc3/workflow-canvas/ids'

Mutation helper:

import { createDraftMutation } from '@legatoacc3/workflow-canvas/commands'

What stays out of this package

This package is intentionally limited to the reusable canvas boundary.

It does not include:

• LSFlow tenant or workspace logic
• draft repository storage
• Nuxt routing
• publish API endpoints
• executor runtime orchestration

Save and load graph JSON

The package includes a stable graph document envelope for persistence and import/export.

import {
  createWorkflowGraph,
  stringifyWorkflowCanvasDocument,
  parseWorkflowCanvasDocument
} from '@legatoacc3/workflow-canvas/graph'

const graph = createWorkflowGraph({
  nodes: [],
  edges: []
})

const json = stringifyWorkflowCanvasDocument(graph)
const restoredGraph = parseWorkflowCanvasDocument(json)

Document shape:

{
  "schemaVersion": "1.0",
  "kind": "workflow-canvas.graph",
  "graph": {
    "nodes": [],
    "edges": [],
    "viewport": {
      "x": 0,
      "y": 0,
      "zoom": 1
    }
  }
}

Detailed API specification: GRAPH_DOCUMENT_API.md

Development

From the workspace root:

pnpm --filter @legatoacc3/workflow-canvas build
pnpm --filter @legatoacc3/workflow-canvas test
pnpm --filter @legatoacc3/workflow-canvas typecheck

Preview publish checklist

pnpm --filter @legatoacc3/workflow-canvas build
pnpm --filter @legatoacc3/workflow-canvas test
pnpm --filter @legatoacc3/workflow-canvas pack --dry-run