We built this React template for AI workflow editors and thought others might find it useful.
The goal was to provide the UI layer that many AI products end up needing: a drag-and-drop canvas, editable nodes, connections, validation, undo/redo, copy/paste, keyboard shortcuts, zooming, snaplines, accessibility, proper graph data model, and support for larger graphs.
The full source code is available so it can be used as a starting point for your own workflow editor.
I’d really appreciate any feedback—especially from anyone building workflow tools or AI products.
16% of the global population has a disability, according to the World Health Organization. How can we build diagramming web apps to ensure accessibility for everyone? Dive into this important topic, explore the current state of accessibility, enabling technologies, and the role of AI in creating more inclusive experiences.
Discover various techniques for outlining complex SVG shapes, including unions of shapes. Learn how to balance advanced styling with performance, accuracy, and flexibility. This guide covers key methods and their pros and cons, with practical, code-based examples for building modern, responsive web applications.
Thanks for the suggestion. The JointJS core library, basically anything except of what is described here: http://jointjs.com/rappid/docs (in other words, anything that is downloadable here: http://jointjs.com/download) is licensed under the MPL v2 license. The rest is licensed under our own, commercial, license. Commercial support is indeed optional and covers bug fixes, general advise, help, online troubleshooting and more. We also do custom developments that are priced individually, depending on the project.
Gliffy is a product for end users. Rappid is a showcase of JointJS (JavaScript diagramming library) and its components that can be used to build all kinds of (custom) visual tools and application builders (workflows, business processes, state machines, voice applications and much more...).
Figurepool can be very handy for mindmapping, actually the 'fork icon tool' was added with mindmaps in mind, you just click the icon tool and a new already connected box is added. Just double click the box to add new text label to it.
The scrolling issue seems to be an OS X related bug. I sometimes observe the same. The fact that sometimes two finger swipe is recognized as back button is a Google Chrome on OS X feature. I was able to get around the zoom/scroll issue by pressing the Shift button. Not sure if it'll work for you though. At least you can give it a try...
Nice work your editor! Small note, I'd suggest you not hide some of the functionality behind menu (Bring forward, Send backward, ...). There is plenty of space in the upper menu and it might be better if the user saw these buttons directly and be able to manipulate them with one click.
Figurepool is indeed built with Raphael from scratch. I'm also using JointJS though, a diagramming lib that I built some time ago. My goal is to build a mixture of vector graphics and diagramming tool.
You're absolutely right about the "Save & Sign up" button. Will do it soon...