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>

Settings form components (for advanced use)

The node / connection settings popups are built from standalone components that can be imported directly, so a host app can embed the same form in its own panel, or assemble a custom one:

import NodeSettingsForm from 'w-flow-vue/src/components/ui/NodeSettingsForm.vue'
import ConnSettingsForm from 'w-flow-vue/src/components/ui/ConnSettingsForm.vue'
import SettingsGroup from 'w-flow-vue/src/components/ui/SettingsGroup.vue'
import { NODE_SETTING_GROUPS, CONN_SETTING_GROUPS, visibleGroups } from 'w-flow-vue/src/js/settingsGroups.mjs'

• NodeSettingsForm / ConnSettingsForm — the full form. Props: node / conn, defNode / defConn, excludes (field keys to hide), defaultOpenGroups (which groups start expanded, default ['basic'] — read once on create, not a controlled prop), maxHeight (CSS length; the form scrolls inside itself past this, opt.settingsPopupMaxHeight defaults to '400px'), textFontSize. Emits update(key, value) and delete. Both mount standalone — every inject has a default, and each form imports its own settingsForm.css — so they work and look right outside WFlowVue.
• SettingsGroup — one collapsible group. Props: title, open, headingLevel (default 3); emits update:open (so :open.sync works). The disclosure triangle points right when collapsed and down when expanded (the symbol shows the current state, as in macOS Finder), and the whole header row is clickable. Markup follows the W3C ARIA APG accordion pattern: the header button is wrapped in a role="heading" element with aria-level.
• settingsGroups.mjs — the grouping definition ({ key, title, fields }, array order is display order) plus visibleGroups(groups, excludes). Import it to drive your own layout, or to decide which fields to exclude.

These are .vue / .mjs sources, so your build must handle Vue 2 SFCs (the same way this package consumes w-component-vue). The prebuilt dist/w-flow-vue.umd.js bundle only exports the WFlowVue component itself.

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.