crossflow_diagram_editor

This contains a SPA React web app to create and edit a crossflow diagram and an axum router to serve it.

Embedding the Diagram Editor into a crossflow app

crossflow_diagram_editor contains an embedded version of the frontend. An axum router is provided that can be used to serve the embedded frontend.

cargo add crossflow_diagram_editor

use crossflow_diagram_editor::basic_executor::{self, DiagramElementRegistry, Error};

fn main() -> Result<(), Box<dyn Error>> {
    let mut registry = DiagramElementRegistry::new();
    // register node builders, section builders etc.
    basic_executor::run(registry)
}

Standalone Diagram Editor API server

The embedded frontend can be disabled:

[dependencies]
crossflow_diagram_editor = { version = "*", default-features = false, features = ["router"] }

This will cause the router to serve only the rest API.

See the calculator demo for more examples.

WebAssembly Local Backend

If the bevy app can be compiled into a WebAssembly blob, the diagram editor can use it in place of an API server.

See crossflow_diagram_editor_wasm for more info.

Local development server

Normally the web stack is not required by using this crate as a dependency, but it is required when developing the frontend.

Requirements:

• nodejs
• pnpm

Setup

Install pnpm and nodejs:

curl -fsSL https://get.pnpm.io/install.sh | bash -
pnpm env use --global lts

Install the dependencies:

pnpm install

First start the dev backend server:

pnpm dev:backend

then in another terminal, start the frontend dev server:

pnpm dev

When there are breaking changes in crossflow, the typescript definitions need to be regenerated:

pnpm generate-types

Live Demo

We host a live demo of the diagram editor at this link. The diagram editor and workflow executor both run in the client's web browser. The node catalog includes simple math operations.

[!NOTE] Repo maintainers that want to update the web-hosted demo should run these commands:

cargo install wasm-pack
pnpm install
pnpm deploy-ghpages