svg-workflow-designer
v0.1.5
Published
![SVG Workflow Designer](assets/cover.png)
Downloads
5
Readme
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.
⭐ 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.