@dskripchenko/flow

Process and state-machine graphs: draw them, watch running instances move through them, switch steps on and off, drill into sub-processes, and edit them visually. The core has no runtime dependencies; the Vue components are built on @dskripchenko/ui.

<script setup lang="ts">
import { FlowView } from '@dskripchenko/flow/vue'
import '@dskripchenko/ui/styles/all.css'
import '@dskripchenko/flow/style.css'

const poll = {
  intervalMs: 5000,
  fetch: (signal: AbortSignal) => fetch('/api/orders/42/state', { signal }).then((r) => r.json()),
}
</script>

<template>
  <FlowView :graph="orderProcess" :poll="poll" toggleable :persist-toggle="saveToggle" style="height: 600px" />
</template>

What is inside

Core (@dskripchenko/flow, plain TypeScript, no DOM)

• A versioned JSON model: nodes (start, end, state, task, decision, subprocess, parallel with regions, timer and wait events, any state, note, or your own types), edges with labels, conditions, triggers and ports, groups, inline or referenced sub-processes. JSON Schemas included.
• Validation: duplicate ids, broken references and ports (errors); missing start/end, unreachable steps, dead ends (warnings). Cycles are fine.
• Layout: a layered (Sugiyama) layout, left-to-right or top-to-bottom, deterministic, around nodes you have placed yourself; orthogonal (or smooth) edges that never cut through other nodes or groups, with back edges (retries, resends) in their own lanes beside the graph.
• Monitoring: a snapshot format, a pure reducer, stale detection, and a poller that pauses in hidden tabs, backs off on errors and cancels requests.
• Editing: undoable commands, history with merging, copy/paste, align, distribute, auto layout as one step.

Vue (@dskripchenko/flow/vue)

• FlowView — pan, zoom, pinch, fit, minimap; live state with the active step, the instance's path, counters, error badges, last-updated and stale indicators; enable/disable switches with rollback on failure; drill-down with a breadcrumb; a details drawer with a slot for your content; custom node components; keyboard navigation and ARIA labels; light and dark.
• FlowEditor — palette (drag or press), drag-to-connect with snapping, reconnecting, moving on a grid, multi-select, align/distribute, undo/redo with shortcuts, a properties panel, a validation panel, context menus, JSON and Mermaid import, sub-process editing, locked node types.

Mermaid (@dskripchenko/flow/mermaid) — a model from stateDiagram-v2 or flowchart source (composite states become sub-processes).

Standalone — one <script>: DskFlow.mountFlow('#el', { graph, poll }).

Documentation

| | English | Русский | Deutsch | 中文 | |---|---|---|---|---| | Getting started | en | ru | de | zh | | Model | en | ru | de | zh | | Monitoring and polling | en | ru | de | zh | | Vue components | en | ru | de | zh | | Editor | en | ru | de | zh | | Host integration | en | ru | de | zh | | Standalone | en | ru | de | zh |

Development

pnpm install
pnpm dev              # playground: ?view=monitor | editor | large | empty, &theme=dark, &locale=ru
pnpm test             # unit and component tests
pnpm check:browser    # Playwright: rendering, geometry, interactions, screenshots
pnpm lint && pnpm typecheck && pnpm build

License

MIT