Latest commit

History

Folders and files

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
example		example
images		images
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.travis.yml		.travis.yml
README.md		README.md
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
tsconfig.test.json		tsconfig.test.json
yarn.lock		yarn.lock

Repository files navigation

svg-workflow-canvas

React component to for workflow building using an SVG based canvas

Alt text

NPM

Install

yarn add svg-workflow-canvas

Usage

See the example folder for how to use this component. Below is just a very simple example.

import React from "react";
import { Workflow } from "svg-workflow-canvas";
export default () => {
 const w1 = {
 nodes: [
 { name: 'add-new-item', id: '1', icon: 'plus-circle', position: { x: 3, y: 7 } },
 { name: 'create-user', id: '2', icon: 'user', position: { x: 254, y: 130 } },
 { name: 'upload-stuff', id: '3', icon: 'home', position: { x: -137, y: -32 } },
 { name: 'train-jedi', id: '4', icon: 'jedi', position: { x: 254, y: -105 } }
 ],
 connections: [{ from: '1', to: '2', id: '1' }]
 };
 return (
 <div style={{ width: '100vw', height: '100vh' }}>
 <Workflow workflow={w1} scale={1} snapToGrid />
 </div>
 );
};