SVG Workflow Designer

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.

⭐ Demos:

• Fullscreen
• Dark and Light

✨ 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';

CDN

<script src="//cdn.jsdelivr.net/npm/svg-workflow-designer/workflow-designer.js"></script>
<link href="//cdn.jsdelivr.net/npm/svg-workflow-designer/workflow-designer.css" rel="stylesheet" />

👀 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.