Skip to content
Get packs

Flowy

A small, dependency-free JavaScript library for building draggable flowchart editors in web pages.

GitHub Download source
Stars
12.1k
Forks
1k
Licence
MIT
Language
JavaScript
Last update
2.3 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Flowy is a JavaScript library that lets a web app show a canvas where users drag blocks and snap them together into flowcharts. Developers use it to add flowchart-style editing, such as for simple automation builders or mind-mapping tools, without writing the drag and drop logic themselves. The README describes it as vanilla JavaScript with no dependencies.

  • Add a drag-and-drop flowchart canvas to a web app using the flowy() function and .create-flowy blocks
  • Export a flowchart's state with flowy.output() and save it as JSON
  • Re-load a saved flowchart with flowy.import()
  • Use onSnap and onRearrange callbacks to allow or block connections between blocks

Great for

  • Web developers adding a visual flowchart editor to an existing web app
  • Teams building simple automation or workflow builder interfaces
  • Developers who want a small library with no dependencies
  • Projects that need mobile-friendly drag and drop of connected blocks

Not ideal for

  • People who just want to draw diagrams without coding, since it is a library for developers and has no ready-made editor app in the README
  • Projects that need a npm install workflow, since the README lists npm install as an unchecked feature and documents CDN links instead
  • Projects needing to delete individual blocks, since the README says there is no method for that yet
Step-by-step guide: how to use FlowyInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Use it in the browser (or self-host)

    Link the stylesheet and script via jsDelivr (add to your HTML)

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

    Run it

    • Add the stylesheet and script tags from the README to your HTML page
    • Create a canvas element, for example <div id="canvas"></div>
    • Create draggable blocks with the create-flowy class, for example <div class="create-flowy">Grab me</div>
    • Call flowy(canvas, onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y) with your canvas element and optional callbacks
  3. 3

    Get the most out of it

    • Use the onSnap callback and return true or false to control which blocks can attach to each other
    • Use the onRearrange callback to decide whether dropped blocks are deleted or re-attached to their previous parent
    • Save your work with flowy.output() and restore it later with flowy.import(), but only with trusted input
    • Adjust spacing_x and spacing_y to change the default 20px and 80px spacing between blocks

Downloads

Source code (.zip)master branch · straight from GitHub

Strengths

  • Vanilla JavaScript with no dependencies, according to the README
  • Includes callbacks for grabbing, releasing, snapping and rearranging blocks
  • Supports exporting and importing flowchart data

Trade-offs

  • The README lists npm install as not yet supported, so setup is via CDN links
  • Import accepts raw HTML without sanitizing it, which the README warns can create XSS risks unless the input is fully trusted
  • Individual blocks cannot be removed with a method; only all blocks can be deleted at once

How it compares

ProjectStarsTypeLevelUpdatedBest for
flowy (this)12.1kLibraryintermediate2.3 years agoWeb developers adding a visual flowchart editor to an existing web app
mermaid91kDev toolbeginner4 days agoDevelopers who want diagrams stored as text alongside their code and docs
anime74.2kLibrarybeginner3 months agoFront-end developers adding motion to websites or web apps
react-grid-layout22.5kLibraryintermediate4 days agoReact developers building dashboards with movable panels
draggable18.5kLibraryintermediate11 months agoFront-end developers who want full control over how drag and drop feels and behaves
dnd-kit17.8kLibraryintermediate6 days agoDevelopers building sortable lists or grids in a React, Vue, Svelte, or Solid app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.