flow-builder provides an open source frontend for authoring flow interoperability project specification compliant flows. It enables the importing, editing and exporting of flow json, as well as authoring from scratch. Such flows can then be run using a compatible flow runner such as FLOIP/flow-runner.
Flows are a modern paradign for describing the logic of digital information systems that interact with individuals, often for the purpose of (a) collecting data or (b) providing information through interactive requests. Some common examples of this are in mobile services using voice-based or SMS-based conversations over basic mobile phones. Flows follow the "flowchart" paradigm, consisting of actions (nodes) and connections between actions, which can incorporate decision-making logic.
git clone git@github.com:FLOIP/flow-builder.git
cd flow-builder
yarn install
yarn serve
And visit localhost:8080/trees/create to create a new flow or localhost:8080/trees/1/edit to edit an example flow.
Note, yarn serve
will also hot reload for development.
yarn build
yarn lint
For UI standalone usage, we implemented stub routes under /vue.config.js
, eg: /audiofiles/upload
Therefore, if we want to integrate the flow-builder
repo into other project:
- we should remove those stub routes
- we should create equivalent routes (and their associated controllers) inside the project which will use the flow-builder
This is related to Flow.js
library which is providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.
- On standalone UI, we import the Flow like
import Flow from '@flowjs/flow.js';
and use it inside the file likenew Flow(...)
- But when we integrate the flow-builder into other project, we may need to call a global Flow like
new global.Flow(...)
.
To begin, you can create a new flow by visiting https://floip.github.io/flow-builder/#/. Click on New Flow , from there, you can enter in the pertinent flow information before opening the Flow Builder.
You may also go directly to the following link: https://https://floip.github.io/flow-builder/#/flows/new
Once you have the canvas open you can add blocks to create your flow
Adding and removing connections can be done easily
Each block has a toolbar at the top that appears when hovering over the block. You may select the block, delete the block, duplicate the block, or access the sidebar editor from this toolbar.
If you select multiple blocks, you are able to duplicate or delete them on the Multiple Select Toolbar
Visit https://floip.github.io/flow-builder/#/ and click on the Import/Paste a JSON File Link in order to import an exiting flow via JSON schema or by pasting the JSON file directly
You may also go directly to the following link: https://floip.github.io/flow-builder/#/flows/import
Edits using the builder will then be reflected in the flow JSON in this panel and vice versa.
To export, simply copy the json in this panel to a file.
- You only need to serve it with
yarn storybook:serve
- Then follow the provided url, by default it should be
http://localhost:6006/
(but in case the port6006
is non-available, it may use different one)
app.config.json
is intended to support the configuration needed when integrating this flow building ui into a larger platform or application while builder.config.json
is intended to configure those features which are core to the flow builder - the blocks enabled, languages or content types supported etc.
More detail to follow.
- Documentation on integration of this UI into another app including configuration of routes used for server side persistence
- Validations and human readable validation error messages for the full flow spec - compulsory fields, string formats etc.
- Documentation on extending this library - adding support for new block types or extending existing block types
- More fully featured resource editing including audio upload
- A way to add to the supportable languages
- Guidance for integration into a permissions system for flow editing/viewing
- Add regression testing pipeline for storyshots