https://github.com/b4rtaz/svg-workflow-designer
Workflow designer written in TypeScript with no dependencies.
https://github.com/b4rtaz/svg-workflow-designer
designer javascript typescript workflow-designer workflow-tool workflows
Last synced: 9 days ago
JSON representation
Workflow designer written in TypeScript with no dependencies.
- Host: GitHub
- URL: https://github.com/b4rtaz/svg-workflow-designer
- Owner: b4rtaz
- License: mit
- Created: 2021-01-20T22:09:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-23T12:04:07.000Z (over 4 years ago)
- Last Synced: 2025-01-12T21:33:29.604Z (9 months ago)
- Topics: designer, javascript, typescript, workflow-designer, workflow-tool, workflows
- Language: TypeScript
- Homepage:
- Size: 146 KB
- Stars: 28
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SVG Workflow Designer
[](https://travis-ci.com/b4rtaz/svg-workflow-designer) [](/LICENSE)
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](https://b4rtaz.github.io/svg-workflow-designer/examples/fullscreen.html)
- [Dark and Light](https://b4rtaz.github.io/svg-workflow-designer/examples/dark-and-light.html)
## ✨ Installation
### NPM
Enter below command.
```
npm install svg-workflow-designer
```
After this, you can import this library:
```js
import 'svg-workflow-designer/workflow-designer.css';
import { DesignerHost } from 'svg-workflow-designer';
```
### CDN
```html
```
## 👀 Examples of Use
Check [examples](/examples) directory.
```js
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.