Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Last update: May 20, 2022

Flowy Vue

🔥 Features

Use Vue components to create a flowchart or hierarchy system
Easily extendable logic
Drag and drop events
Use any component in your node tree, variable widths supported
Based on Shopify Draggable Vue
(Optional) Quasar app extension

📄 Instructions / documentation / examples

Documentation

⚙️ Developments

`npm run serve`

Runs the app in the development mode. Open http://localhost:8080/flowy-vue to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to @hipsjs/flowy-vue or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

GitHub

https://github.com/remcoplasmeyer/flowy-vue

Comments

1. The automated release is failing 🚨
:rotating_light: The automated release from the master branch failed. :rotating_light:

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

Usage documentation

Frequently Asked Questions

Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot :package::rocket:
Reviewed by github-actions[bot] at 2020-05-28 01:58
2. Vuetify support?

I've tried to get vuetify to work in the same way that quasar seems to, but continually get Unknown custom element errors and no rendering. Is there any recommended approach for using other UI frameworks?

Reviewed by ribrewguy at 2021-05-22 16:33
3. Bump url-parse from 1.5.1 to 1.5.7
Bumps url-parse from 1.5.1 to 1.5.7.

Commits

8b3f5f2 1.5.7

ef45a13 [fix] Readd the empty userinfo to url.href (#226)

88df234 [doc] Add soft deprecation notice

78e9f2f [security] Fix nits

e6fa434 [security] Add credits for incorrect handling of userinfo vulnerability

4c9fa23 1.5.6

7b0b8a6 Merge pull request #223 from unshiftio/fix/at-sign-handling-in-userinfo

e4a5807 1.5.5

193b44b [minor] Simplify whitespace regex

319851b [fix] Remove CR, HT, and LF

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.
Reviewed by dependabot[bot] at 2022-02-19 02:47
4. Bump follow-redirects from 1.11.0 to 1.14.7
Bumps follow-redirects from 1.11.0 to 1.14.7.

Commits

2ede36d Release version 1.14.7 of the npm package.

8b347cb Drop Cookie header across domains.

6f5029a Release version 1.14.6 of the npm package.

af706be Ignore null headers.

d01ab7a Release version 1.14.5 of the npm package.

40052ea Make compatible with Node 17.

86f7572 Fix: clear internal timer on request abort to avoid leakage

2e1eaf0 Keep Authorization header on subdomain redirects.

2ad9e82 Carry over Host header on relative redirects (#172)

77e2a58 Release version 1.14.4 of the npm package.

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.
Reviewed by dependabot[bot] at 2022-01-14 10:29
5. Bump url-parse from 1.5.1 to 1.5.3
Bumps url-parse from 1.5.1 to 1.5.3.

Commits

ad44493 [dist] 1.5.3

c798461 [fix] Fix host parsing for file URLs (#210)

201034b [dist] 1.5.2

2d9ac2c [fix] Sanitize only special URLs (#209)

fb128af [fix] Use 'null' as origin for non special URLs

fed6d9e [fix] Add a leading slash only if the URL is special

94872e7 [fix] Do not incorrectly set the slashes property to true

81ab967 [fix] Ignore slashes after the protocol for special URLs

ee22050 [ci] Use GitHub Actions

d2979b5 [fix] Special case the file: protocol (#204)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.
Reviewed by dependabot[bot] at 2021-10-06 17:44
6. DragStop never triggered

It seems like the "@drag-stop" event from is never triggered and instead a @drag-start (or better said multiple) are triggered when dropping a new block onto

I wanted to add a @drag-stop handler to be able to add first-level parent nodes whenever a node is dropped on the component instead of at the end of an existing node but the event is never triggered...

Reviewed by jappyjan at 2021-07-21 18:56
7. Unknown custom element:

app.js:65959 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src/components/Draggable.vue at resources/assets/js/components/CreateStoryV.vue

Reviewed by muhammad-Ali-Nawaz at 2021-05-27 06:02
8. Is the underlying tree data structure exposed?

I have a need to identify whether or not the target node of a dragged node is currently a child of the dragged node (either directly or somewhere further down the line). Presumably there is already some data structure under the hood representing the tree, so it would be great if I could do a lookup to get straight to the target node and easily identify all the children. Is that data structure exposed at all or is there any function I can call that would help? Love the plugin, thanks a lot!

Reviewed by rfynes at 2021-05-21 16:48
9. Zoom in / out and panning

Great library right here, i already intergrated it in my app.

I need a zoom/pan feature (maybe already implemented ?). I would like to have the author's take on how could I go about making it.

maybe trying to add a panzoom library like this one: https://github.com/anvaka/panzoom. or submit a PR for this using js scale and transformation.

Reviewed by blurdylan at 2021-05-18 08:12
10. Flow through answers to questions.
Hi @remcoplasmeyer,

First of all, congratulations on the project, it is brutal 💯 🔥

Now the reason why I write, at the moment I am inserted in a project in which I have to do flow of this kind, however there are some variants that I still haven't been able to understand if it is possible or not to do it with Flowy.

Basically, the objective is to create a script, with multi-selection questions, in which each possible answer takes a path.

Dummy example:

What brought you to our website today? 1. I'm looking to buy 2. I'm just browsing ...

And the objective is that each answer has a certain flow.

I have here a print of an example that is intended.

Do you think it is possible to achieve this with Flowy or if not, its implementation will be very difficult?
Reviewed by saomartinho at 2021-05-14 14:14
11. Support multiple parents (parent Ids)

@remcoplasmeyer Very useful plugin! Just a question, is there any extension for supporting multiple parent Ids or is it planned for a future release? If not, do you have any suggestions/ tips on how to implement this modification?

Reviewed by panosdemetriou at 2021-03-18 14:55
12. Bump async from 2.6.3 to 2.6.4
Bumps async from 2.6.3 to 2.6.4.

Changelog

Sourced from async's changelog.

v2.6.4

Fix potential prototype pollution exploit (#1828)

Commits

c6bdaca Version 2.6.4

8870da9 Update built files

4df6754 update changelog

8f7f903 Fix prototype pollution vulnerability (#1828)

See full diff in compare view

Maintainer changes

This version was pushed to npm by hargasinski, a new releaser for async since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.
Reviewed by dependabot[bot] at 2022-04-29 11:06
13. Multiple "parentId"s per node

How can I set a node to have multiple parentId values so that one node has multiple other nodes pointing to it?

If this is not implemented, I would suggest it as it is a common requirement for flowcharts. Thank you.

Reviewed by fsc-isardar at 2022-04-25 11:54
14. Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6

ef88b93 security notice for additional prototype pollution issue

c2b9819 isConstructorOrProto adapted from PR

bc8ecee test from prototype pollution PR

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.
Reviewed by dependabot[bot] at 2022-03-26 19:21
15. Breaks usages of Vue-draggable on our app

Hi.. really like the look of this but when installed on our app it breaks elements that have been built using vue-draggable. I don't have errors but current draggable elements no longer work correctly. Is there a compatibility issue with the two packages?

Reviewed by treforcoster at 2022-03-03 13:49
16. Bump url-parse from 1.5.1 to 1.5.10
Bumps url-parse from 1.5.1 to 1.5.10.

Commits

8cd4c6c 1.5.10

ce7a01f [fix] Improve handling of empty port

0071490 [doc] Update JSDoc comment

a7044e3 [minor] Use more descriptive variable name

d547792 [security] Add credits for CVE-2022-0691

ad23357 1.5.9

0e3fb54 [fix] Strip all control characters from the beginning of the URL

61864a8 [security] Add credits for CVE-2022-0686

bb0104d 1.5.8

d5c6479 [fix] Handle the case where the port is specified but empty

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.
Reviewed by dependabot[bot] at 2022-02-27 05:36

Simple and lightweight vue chart component without using chart library dependencies

Pure Vue Chart A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies

Apr 20, 2022

A simple currency exchange chart built with Vue.js and Chart.js, using the ExchangeRate API.

Currency Exchange Chart A simple Vue.js app to display exchange rates in charts. Built With Vue - A progressive, incrementally-adoptable JavaScript fr

Mar 31, 2022

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

jQuery Version ES6 Version Web Components Version Angular Version -- the most space-saving solution React Version Foreword First of all, thanks a lot

May 3, 2022

Flowchart & designer component for Vue.js.

Flowchart Flowchart & Flowchart designer component for Vue.js(flowchart-react for React.js). English | 中文 Usage yarn add flowchart-vue <template>

May 23, 2022

Coincharts is a cryptocurrency price chart based off Coinbase's original price chart on.

About Coincharts is a cryptocurrency price chart based off Coinbase's original price chart on https://www.coinbase.com/charts and is a Vue.js port of

Feb 4, 2022

realtime charts with chart.js

vue-desktop-realtime-chart realtime charts with chart.js Setup Install vue-cli yarn install -g @vue/cli Initialize a project vue create vue-desktop En

Jan 20, 2022

Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable

May 15, 2022

A simple and easy-to-use Gantt chart component for Vue.js

vue-ganttastic A simple and easy-to-use Gantt chart component for Vue.js Homepage Homepage of the project Installation You can install and use Vue-Gan

May 20, 2022

Easily bind a chart to the data stored in your Vue.js components.

A plugin for adding charts to Vue Table of Contents Purpose Usage Performance Consideration Build Setup Purpose This plugin is designed to allow Vue.j

May 14, 2022

A nicer look at your GitHub Profile! With charts! but its made with Vuejs/Nuxtjs :)

⚛️ GitProfile A nicer look at your GitHub Profile! With charts! but its made with Vuejs/Nuxtjs :) ?? View it here ??‍?? inspired by Brittany Chiang |

Apr 28, 2022

A simple wrapper for Chart.

VueChart A simple wrapper for Chart. demo Try it out! dependencies Chart setup npm npm i @seregpie/vue-chart ES module Register the component globally

Aug 9, 2021

A simple C2-like level (used in Cytoid) Chart Player.

Notice: The program will rename recently. C2Player-Web A simple C2-like level (used in Cytoid) Chart Player. No resources from Rayark Inc. / Cytoid Of

Apr 11, 2022

A simple C2-like level (used in Cytoid) Chart Player.

Cytusol Player A simple C2-like level (used in Cytoid) Chart Player. No resources from Rayark Inc. / Cytoid Official were used. And it is not Rayark I

Apr 11, 2022

Simple trend charts for Vue.js

Live Demo ?? Installation npm i vue-trend-chart ?? Usage import Vue from "vue"; import TrendChart from "vue-trend-chart"; Vue.use(TrendChart); Exampl

May 12, 2022

Re-implementing Google finance page with Vuejs and D3js.

Google Finance Re-implementing Google finance page with Vuejs and D3js. Try it here: https://vue-google-finance.surge.sh. Want to try locally? Install

Feb 23, 2022

⚡️ Vue components based on the JUI chart available in Vue.js

vue-graph A vue component library based on the JUI charts available in vuejs. Installation NPM npm install --save vue-graph Browser Just download dist

May 13, 2022

📊 Chart.js 3 for Vue 2 and Vue 3

This package is a rewrite of vue-chartjs for Chart.js 3, but written in Typescript with vue-demi and Vue Composition API.

May 21, 2022

📊 Vue.js wrapper for Chart.js

vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Demo & Docs ?? Demo ?? Docs Compatibility

May 24, 2022

Toast UI Chart for Vue

TOAST UI Chart for Vue This is Vue component wrapping TOAST UI Chart. ?? Table of Contents Collect statistics on the use of open source Install Using

Apr 25, 2022

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Flowy Vue

🔥 Features

📄 Instructions / documentation / examples

⚙️ Developments

npm run serve

⭐️ Show Your Support

👏 Contributing

🐞 Bug Report

📝 License

GitHub

Comments

1. The automated release is failing 🚨

:rotating_light: The automated release from the master branch failed. :rotating_light:

No npm token specified.

2. Vuetify support?

3. Bump url-parse from 1.5.1 to 1.5.7

4. Bump follow-redirects from 1.11.0 to 1.14.7

5. Bump url-parse from 1.5.1 to 1.5.3

6. DragStop never triggered

7. Unknown custom element:

8. Is the underlying tree data structure exposed?

9. Zoom in / out and panning

10. Flow through answers to questions.

11. Support multiple parents (parent Ids)

12. Bump async from 2.6.3 to 2.6.4

v2.6.4

13. Multiple "parentId"s per node

14. Bump minimist from 1.2.5 to 1.2.6

15. Breaks usages of Vue-draggable on our app

16. Bump url-parse from 1.5.1 to 1.5.10

Related tags

Simple and lightweight vue chart component without using chart library dependencies

A simple currency exchange chart built with Vue.js and Chart.js, using the ExchangeRate API.

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

Flowchart & designer component for Vue.js.

Coincharts is a cryptocurrency price chart based off Coinbase's original price chart on.

realtime charts with chart.js

Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

A simple and easy-to-use Gantt chart component for Vue.js

Easily bind a chart to the data stored in your Vue.js components.

A nicer look at your GitHub Profile! With charts! but its made with Vuejs/Nuxtjs :)

A simple wrapper for Chart.

A simple C2-like level (used in Cytoid) Chart Player.

A simple C2-like level (used in Cytoid) Chart Player.

Simple trend charts for Vue.js

Re-implementing Google finance page with Vuejs and D3js.

⚡️ Vue components based on the JUI chart available in Vue.js

📊 Chart.js 3 for Vue 2 and Vue 3

📊 Vue.js wrapper for Chart.js

Toast UI Chart for Vue

`npm run serve`

:rotating_light: The automated release from the `master` branch failed. :rotating_light: