This project is now archived. If anyone is interested in continuing it, please contact me.
workflow-svg.js is a JS Library to present and edit workflows as SVG. You can move entities and define connections between them. It is simple to include and configure it for your project. Take a look at a real example on https://thomaswruss.github.io/workflow-svg.js/.
Install the library with npm i workflow-svg.js
. That is all.
With the installation, two additional libraries will be installed. Import them first:
- svg.js:
<script src="./node_modules/@svgdotjs/svg.js/dist/svg.min.js"></script>
- svg.draggable.js
<script src="./node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>
If you want to be compatible with IE11 you have to import svg.js Polyfills too:
<script src="./node_modules/@svgdotjs/svg.js/dist/polyfills.js"></script>
<script src="./node_modules/@svgdotjs/svg.js/dist/polyfillsIE.js"></script>
And of course you have to import the library itself:
<script src="./node_modules/workflow-svg.js/dist/workflow-svg.minified.js"></script>
In ./docs/index.html
you can find examples how to include, call and work with the library.
Create a new workflow-svg.js instance with new WorkflowSVG();
. The object has the following methods.
Method | Description |
---|---|
initalize(id, width, height) | Has to be called to initalize the SVG. 'id' is the <div> Element where the SVG should be rendered with the defined 'width' and 'height' |
update(json) | Update the SVG with the defined 'json' |
register(eventname, callback) | Register your callback for some event (eventname). |
get() | Get the JSON configuration of your workflow-svg.js instance |
Eventname | Description |
---|---|
entity:moved | Event when some entity was moved |
entity:clicked | Event when some entity was clicked |
line:added | Event when a line was added between some entity |
line:clicked | Event when some line was clicked |
label:moved | Event when some label was moved |
You always get the ID of the related entity/line.
The JSON contains of three fields.
Field | Type | Description |
---|---|---|
entities | array | Entities of a workflow. |
lines | array | Lines between the entities. |
labels | array | Some labels to display. |
configuration | object | Defines some configuration that will be applied to the whole chart. |
The fields are explained now into more detail.
One entity in the array contains the following attributes:
Attribute | Type | Description |
---|---|---|
id | string | Unique id of the entity |
text | string | Text of the entity |
type | string | Type of entity. Default is 'entity'. For workflow operations use: 'operation' |
x | integer | X coordinate of the entity |
y | integer | Y coordinate of the entity |
background_color | string(hex) | Background Color of the entity |
color | string(hex) | Font Color of the entity |
fa_unicode | string | Unicode for FontAwesome Icon (note: don't forget to specify which version of FontAwesome you use - see ) |
radius | integer | Radius of the corners of the entity |
class | string | Class Name for css styling |
One line in the array contains the following attributes:
Attribute | Type | Description |
---|---|---|
id | string | Unique id of the line |
from | object | Object that contains: - 'element' - the id from the source entity, - 'point' - where the line starts at this entity (top, right, bottom, left) |
to | object | Object that contains: - 'element' - the id from the target entity, - 'point' - where the line ends at this entity (top, right, bottom, left) |
One label in the array contains the following attributes:
Attribute | Type | Description |
---|---|---|
id | string | Unique id of the label |
value | string | The text of the label |
x | integer | X coordinate of the label |
y | integer | Y coordinate of the label |
color | string(hex) | Font Color of the label |
The configuration contains the following attributes:
Attribute | Type | Description | Default value |
---|---|---|---|
line_color | string(hex) | Color of all lines | '#000000' (=black) |
arrow_type | 'default' or 'none' | At the moment there are only two arrow type: default or none | 'default' |
read_only | boolean | If true, the chart will be read_only | false |
font_awesome | integer | Version of Font Awesome that you want to use: 4 or 5 are allowed | undefined |
grid_type | 'static' or 'dynamic' | If 'static' - grid lines will always be shown. Otherwise the grid line will only be shown if the dragged entity is near enough -tjis is called 'dynamic'. | 'dynamic' |
grid_x | array | Array of objects - 'value': the x coordinate of the line - 'width': width of the line - 'color': color of the line |
[] |
grid_y | array | Array of objects - 'value': the y coordinate of the line - 'width': width of the line - 'color': color of the line |
[] |
The configuration is completely optional. All non-existent values are set automatically.
Use FontAwesome icons
workflow-svg.js support FontAwesome Icons in Version 4 and 5. What you need to do:
- import FontAwesome CSS, e.g.:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
- provide in the JSON (see chapter above) in the config part
font_awesome: 5
(or 4 if you imported version 4) - add on the entities the unicode of the FontAwesome Icon you want to use, e.g.:
fa_unicode:'f256'