Fork of Flowchart original: https://github.com/joyceworks/flowchart-vue

Flowchart & Flowchart designer component for VueJS 3

Usage

shell script

npm install flowchart-vue-awelite



yarn add flowchart-vue-awelite

vue





API



Props



Property|Description|Type|Default

-|-|-|-

nodes|Collection of nodes|

Array|[{id: 1, x: 140, y: 270, name: 'Start', type: 'start'}, {id: 2, x: 540, y: 270, name: 'End', type: 'end'}]



connections|Collection of connections|

Array|[{source: {id: 1, position: 'right'}, destination: {id: 2, position: 'left'}, id: 1, type: 'pass', }]



width|Width of canvas|

String \| Number|800



height|Height of canvas|

String \| Number|600



locale|Display language, available values:

'en', 'zh'|String|'en'



readonly|Read-only|

Boolean

|false

render|Custom render function|

null



readOnlyPermissions|Allows to specify more granular read-only mode permissions|

Object|{ allowDragNodes: false, allowSave: false, allowAddNodes: false, allowEditNodes: false, allowEditConnections: false, allowDblClick: false, allowRemove: false }





Events



Event|Description|Handler

-|-|-

editnode|Node double-click event|

(node) => void



editconnection|Connection double-click event|

(connection) => void



save|Save event|

(nodes, connections) => void



dblclick|Background double-click event|

(position: {x: number, y: number}) => void



connect|Connect event|

(connection, nodes, connections) => void



disconnect|Disconnect event|

(connection, nodes, connections) => void



add|Add node event|

(node, nodes, connections) => void



delete|Delete node event|

(node, nodes, connections) => void



select|Select node event|

nodes => void



selectconnection|Select connection event|

connections => void



render|Node render event, children is a collection of svg elements |

(node: Node, children: { header, title, body, content }) => vod



nodesdragged|Notifies which nodes dragging just ended|

(nodes) => void



removeConfirmationRequired|Notifies that remove confirmation required. Pass nodes and connections selected to remove|

(nodes, connections) => void



movediff|Notifies about change in chart view position|

(diff: {x: number, y: number}) => void





$3



Property|Description        |Type|Default

-|-|-|-

id|ID|

Number|+new Date()



x|Horizontal position of node|

Number

|-

y|Vertical position of node|

Number

|-

type|Type of node|

String|'operation'



width|Width of node|

Number|120



height|Height of node|

Number|60



approvers|Approvers of node, eg: [{name: 'admin'}]|

Array

|[]

connectors|Defines which connectors should be rendered|

Array

|['top', 'right', 'bottom', 'left']

theme|Defines colors for specified node elements|

Object|{ borderColor: "#bbbbbb", borderColorSelected: "#666666", headerTextColor: "black", headerBackgroundColor: "#f1f3f4", bodyBackgroundColor: "white", bodyTextColor: "black" }





$3



Property|Description        |Type|Default

-|-|-|-

id|ID|

Number|+new Date()



source|Source of connection|

Object

|-

destination|Destination of connection|

Object

|-

type|Type of connection|

String|pass





$3



Property|Description        |Type|Default

-|-|-|-

id|Node id|

Object

|-

position|Starting/Ending position of node|

Object

|-



$3

If you want you can pass value as slot. It allows you to add new UI elements to chart playground.

These slot elements aren't selectable - are ignored while selection. Moreover actions on click and on double click are disabled

in area filled by passed elements. 

You can use this functionality to e.g. in quite easy way add toolbar inside.

vue

Fork of Flowchart original: https://github.com/joyceworks/flowchart-vue

Flowchart & Flowchart designer component for VueJS 3

Usage

shell script

npm install flowchart-vue-awelite



yarn add flowchart-vue-awelite

vue





API



Props



Property|Description|Type|Default

-|-|-|-

nodes|Collection of nodes|

Array|[{id: 1, x: 140, y: 270, name: 'Start', type: 'start'}, {id: 2, x: 540, y: 270, name: 'End', type: 'end'}]



connections|Collection of connections|

Array|[{source: {id: 1, position: 'right'}, destination: {id: 2, position: 'left'}, id: 1, type: 'pass', }]



width|Width of canvas|

String \| Number|800



height|Height of canvas|

String \| Number|600



locale|Display language, available values:

'en', 'zh'|String|'en'



readonly|Read-only|

Boolean

|false

render|Custom render function|

null



readOnlyPermissions|Allows to specify more granular read-only mode permissions|

Object|{ allowDragNodes: false, allowSave: false, allowAddNodes: false, allowEditNodes: false, allowEditConnections: false, allowDblClick: false, allowRemove: false }





Events



Event|Description|Handler

-|-|-

editnode|Node double-click event|

(node) => void



editconnection|Connection double-click event|

(connection) => void



save|Save event|

(nodes, connections) => void



dblclick|Background double-click event|

(position: {x: number, y: number}) => void



connect|Connect event|

(connection, nodes, connections) => void



disconnect|Disconnect event|

(connection, nodes, connections) => void



add|Add node event|

(node, nodes, connections) => void



delete|Delete node event|

(node, nodes, connections) => void



select|Select node event|

nodes => void



selectconnection|Select connection event|

connections => void



render|Node render event, children is a collection of svg elements |

(node: Node, children: { header, title, body, content }) => vod



nodesdragged|Notifies which nodes dragging just ended|

(nodes) => void



removeConfirmationRequired|Notifies that remove confirmation required. Pass nodes and connections selected to remove|

(nodes, connections) => void



movediff|Notifies about change in chart view position|

(diff: {x: number, y: number}) => void





$3



Property|Description        |Type|Default

-|-|-|-

id|ID|

Number|+new Date()



x|Horizontal position of node|

Number

|-

y|Vertical position of node|

Number

|-

type|Type of node|

String|'operation'



width|Width of node|

Number|120



height|Height of node|

Number|60



approvers|Approvers of node, eg: [{name: 'admin'}]|

Array

|[]

connectors|Defines which connectors should be rendered|

Array

|['top', 'right', 'bottom', 'left']

theme|Defines colors for specified node elements|

Object|{ borderColor: "#bbbbbb", borderColorSelected: "#666666", headerTextColor: "black", headerBackgroundColor: "#f1f3f4", bodyBackgroundColor: "white", bodyTextColor: "black" }





$3



Property|Description        |Type|Default

-|-|-|-

id|ID|

Number|+new Date()



source|Source of connection|

Object

|-

destination|Destination of connection|

Object

|-

type|Type of connection|

String|pass





$3



Property|Description        |Type|Default

-|-|-|-

id|Node id|

Object

|-

position|Starting/Ending position of node|

Object

|-



$3

If you want you can pass value as slot. It allows you to add new UI elements to chart playground.

These slot elements aren't selectable - are ignored while selection. Moreover actions on click and on double click are disabled

in area filled by passed elements. 

You can use this functionality to e.g. in quite easy way add toolbar inside.

vue