svg-workflow-designer
TypeScript icon, indicating that this package has built-in type declarations

0.1.5 • Public • Published

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.

Package Sidebar

Install

npm i svg-workflow-designer

Weekly Downloads

2

Version

0.1.5

License

MIT

Unpacked Size

108 kB

Total Files

47

Last publish

Collaborators

  • b4rtaz