Flowchart & Flowchart designer component for Vue.js([flowchart-react](https://github.com/joyceworks/flowchart-react) for React.js).
npm install flowchart-vueFlowchart & Flowchart designer component for Vue.js(flowchart-react for React.js).


``shell script`
yarn add flowchart-vue
`vue`
:remove-requires-confirmation="true"
@editnode="handleEditNode"
@dblclick="handleDblClick"
@editconnection="handleEditConnection"
@removeconfirmationrequired="initRemovingConfirmation"
@save="handleChartSave" ref="chart">
See more at src/views/App.vue.
- GitHub Pages
- CodeSandbox
- Flowchart Vue Demo
- Development Environment
` shell`
git clone https://github.com/joyceworks/flowchart-vue.git
cd flowchart-vue
yarn install
yarn run serve
Then open http://localhost:yourport/ in browser.
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'}]Array
connections|Collection of connections||[{source: {id: 1, position: 'right'}, destination: {id: 2, position: 'left'}, id: 1, type: 'pass', }]String
width|Width of canvas| \| Number|800String
height|Height of canvas| \| Number|600'en'
locale|Display language, available values: , 'zh'|String|'en'Boolean
readonly|Read-only||falsenull
render|Custom render function|Object
readOnlyPermissions|Allows to specify more granular read-only mode permissions||{ allowDragNodes: false, allowSave: false, allowAddNodes: false, allowEditNodes: false, allowEditConnections: false, allowDblClick: false, allowRemove: false }
Event|Description|Handler
-|-|-
editnode|Node double-click event|(node) => void(connection) => void
editconnection|Connection double-click event|(nodes, connections) => void
save|Save event|(position: {x: number, y: number}) => void
dblclick|Background double-click event|(connection, nodes, connections) => void
connect|Connect event|(connection, nodes, connections) => void
disconnect|Disconnect event|(node, nodes, connections) => void
add|Add node event|(node, nodes, connections) => void
delete|Delete node event|nodes => void
select|Select node event|connections => void
selectconnection|Select connection event|(node: Node, children: { header, title, body, content }) => vod
render|Node render event, children is a collection of svg elements |(nodes) => void
nodesdragged|Notifies which nodes dragging just ended|(nodes, connections) => void
removeConfirmationRequired|Notifies that remove confirmation required. Pass nodes and connections selected to remove|(diff: {x: number, y: number}) => void
movediff|Notifies about change in chart view position|
Property|Description |Type|Default
-|-|-|-
id|ID|Number|+new Date()Number
x|Horizontal position of node||-Number
y|Vertical position of node||-String
type|Type of node||'operation'Number
width|Width of node||120Number
height|Height of node||60Array
approvers|Approvers of node, eg: [{name: 'admin'}]||[]Array
connectors|Defines which connectors should be rendered||['top', 'right', 'bottom', 'left']Object
theme|Defines colors for specified node elements||{ borderColor: "#bbbbbb", borderColorSelected: "#666666", headerTextColor: "black", headerBackgroundColor: "#f1f3f4", bodyBackgroundColor: "white", bodyTextColor: "black" }
Property|Description |Type|Default
-|-|-|-
id|ID|Number|+new Date()Object
source|Source of connection||-Object
destination|Destination of connection||-String
type|Type of connection||pass
Property|Description |Type|Default
-|-|-|-
id|Node id|Object|-Object
position|Starting/Ending position of node||-
`vue``