w-flow-vue

A vue component for flowchart and workflow diagram editing.

Documentation

To view documentation or get support, visit docs.

Example

To view some examples for more understanding, visit examples:

all examples: web [source code]

Installation

Using npm(ES6 module):

npm i w-flow-vue

In a browser(UMD module):

Add script for vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

Add script for w-flow-vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/w-flow-vue.umd.js"></script>

Required setup for Vue 2 apps

Node and connection popups are rendered inside SVG foreignObject. Vue 2 has a known bug (vuejs/vue#7330) where components inside foreignObject inherit the SVG namespace, so their HTML content renders as SVGElement with zero size. Add this global mixin once in your app entry (e.g. main.js) before mounting:

import Vue from 'vue'

// Fix Vue 2 bug #7330: components inside SVG foreignObject inherit
// SVG namespace, causing HTML elements to render as SVGElement (0x0).
Vue.mixin({
    beforeCreate() {
        if (this.$vnode && this.$vnode.ns === 'svg') this.$vnode.ns = undefined
    },
    beforeMount() {
        if (this.$vnode && this.$vnode.ns === 'svg') this.$vnode.ns = undefined
    },
    beforeUpdate() {
        if (this.$vnode && this.$vnode.ns === 'svg') this.$vnode.ns = undefined
    },
})

The mixin only clears the inherited namespace on component boundaries; SVG tags still resolve to the SVG namespace via getTagNamespace, so normal SVG rendering is unaffected.