Flowchart

Flowchart & Flowchart designer component for Vue.js(flowchart-react for React.js).


Usage

``shell script
yarn add flowchart-vue
`

`vue


`

See more at src/views/App.vue.

Demo

- 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.

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





``