Repolode
Submit
alyssaxuu

alyssaxuu/flowy

A minimal vanilla JavaScript library for building draggable, snapping flowchart editors in web apps.

View on GitHub
Stars
12,143
Forks
1,043
Open issues
59
Last commit
2 years ago

What is it?

Flowy is a dependency-free JavaScript library that lets you add flowchart functionality to a web page. You mark elements with the create-flowy class as draggable blocks, place them on a canvas element, and users can drag them onto the canvas where they snap to parent blocks and form connected branches.

The library provides callbacks for grab, release, snap and rearrange events, letting your code approve or reject connections and react to user actions. Flowchart state can be exported with flowy.output() as a JSON structure and restored later with flowy.import(), though the import method inserts raw HTML and should only be used with trusted input. Blocks can be removed in bulk with flowy.deleteBlocks(); individual block removal is not provided.

It is installed by linking a JavaScript file and a CSS file, currently through jsDelivr, and it works on mobile devices. Npm installation is listed as not yet supported.

Key features

  • 01Drag-and-drop blocks with automatic snapping and centering
  • 02Callbacks for grab, release, snap and rearrange events
  • 03Conditional snapping and conditional block removal
  • 04Export and import of flowchart data as JSON
  • 05Works on mobile with no external dependencies

Use cases

  • Building an automation or workflow builder in a web app
  • Creating a mind-mapping or diagram tool with connected nodes
  • Prototyping a simple visual programming interface

Quick start

  1. 1

    Link the stylesheet from jsDelivr

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
  2. 2

    Link the script from jsDelivr

    <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
  3. 3

    Create a canvas element and draggable blocks in your page

  4. 4

    Initialize Flowy on the canvas

    flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

Things to know

  • npm installation is not yet available; use the CDN links or copy the files.
  • Blocks cannot be removed individually; only all blocks can be deleted at once.
  • The import method does not sanitize HTML and is vulnerable to XSS with untrusted input.

Topics

#flowchart#drag-and-drop#javascript#diagrams#visual-programming#vanilla-js#engine#javascript-library#marketing#marketing-automation

FAQ

What is flowy?
A minimal vanilla JavaScript library for building draggable, snapping flowchart editors in web apps. Flowy is a dependency-free JavaScript library that lets you add flowchart functionality to a web page. You mark elements with the create-flowy class as draggable blocks, place them on a canvas element, and users can drag them onto the canvas where they snap to parent blocks and form connected branches.
Is flowy free to use? What license does it have?
flowy is open source under the MIT license. Check the license terms before using it in commercial products.
Is flowy still maintained?
No commits for 6+ months. The last commit to flowy was on Jul 13, 2024.
What can I use flowy for?
Building an automation or workflow builder in a web app Creating a mind-mapping or diagram tool with connected nodes Prototyping a simple visual programming interface
How do I install flowy?
Link the stylesheet from jsDelivr: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> Link the script from jsDelivr: <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script> Create a canvas element and draggable blocks in your page Initialize Flowy on the canvas: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
Where can I get flowy?
The source code and installation instructions are on GitHub: https://github.com/alyssaxuu/flowy

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects