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

βš™οΈ 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:

    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 compatibility score

    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 compatibility score

    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 compatibility score

    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.

    Screenshot 2021-05-14 at 14 57 17

    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
    Maintainer changes

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


    Dependabot compatibility score

    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

    Dependabot compatibility score

    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 compatibility score

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