swd
svg-workflow-designer
npm i svg-workflow-designer
swd

svg-workflow-designer

Workflow designer written in TypeScript with no dependencies.

by Bart Tadych

0.1.5 (see all)License:MITTypeScript:Built-In
npm i svg-workflow-designer
Readme

SVG Workflow Designer

SVG Workflow Designer

Build Status License: MIT

Workflow designer with no dependencies. It's written in TypeScript, but you may use it in a JavaScript project too. This project is not associated with any Workflow Engine. You can use it to integrate it with what you want.

Features:

  • no dependencies,
  • uses SVG for rendering,
  • small size (minified 32 KB),
  • works on mobile devices,
  • supports IE9 😨,
  • light/dark themes.

⭐ Check online demo.

✨ Installation

NPM

Enter below command.

npm install svg-workflow-designer

After this, you can import this library:

import 'svg-workflow-designer/workflow-designer.css';
import { DesignerHost } from 'svg-workflow-designer';

👀 Examples of Use

Check examples directory.

const designer = new DesignerHost({
   container: document.getElementById('designer'),
   theme: 'dark'
});
designer.setup();
designer.addActivites([
   {
      left: 100,
      top: 100,
      color: '#FFB900',
      name: 'start',
      label: 'Start',
      isInvalid: false,
      canDelete: false,
      inputNames: [],
      outputNames: ['started']
   },
   {
      left: 100,
      top: 200,
      color: '#00D1FF',
      name: 'setVariable',
      label: 'SetVariable',
      isInvalid: false,
      canDelete: true,
      inputNames: ['input'],
      outputNames: ['set']
   }
]);
designer.addConnections([
   {
      outputActivityName: 'start',
      outputName: 'started',
      inputActivityName: 'setVariable',
      inputName: 'input'
   }
]);

⚙️ How to Build

npm install
npm build

💡 License

This project is released under the MIT license.

Downloads/wk

1

GitHub Stars

19

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.1.5
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate