Documentation

API docs

Language for Flow-Based Programming

In addition to the JSON format described above, FBP has its own Domain-Specific Language (DSL) for easy graph definition. The syntax is the following:

  • 'somedata' -> PORT Process(Component) sends initial data somedata to port PORT of process Process that runs component Component
  • A(Component1) X -> Y B(Component2) sets up a connection between port X of process A that runs component Component1 and port Y of process B that runs component Component2

You can connect multiple components and ports together on one line, and separate connection definitions with a newline or a comma (,).

Components only have to be specified the first time you mention a new process.

You can find more information in the README of the stand-alone FBP parser.

Example:

'somefile.txt' -> SOURCE Read(ReadFile) OUT -> IN Split(SplitStr)
Split OUT -> IN Count(Counter) COUNT -> IN Display(Output)
Read ERROR -> IN Display

Loading and running graphs

NoFlo supports the FBP language fully. You can either load a graph with a string of FBP-language commands with:

fbpData = "<some FBP language connections>"

noflo = require "noflo"
noflo.graph.loadFbp fbpData, (graph) ->
  console.log "Graph loaded"
  console.log graph.toDOT()
var fbpData = "<some FBP language connections>";

var noflo = require("noflo");
noflo.graph.loadFbp(fbpData, function(graph) {
  console.log("Graph loaded");
  console.log(graph.toDOT());
 });

The .fbp file suffix is used for files containing FBP language. This means you can load them also the same way as you load JSON files, using the noflo.loadFile method, or the NoFlo shell. Example:

$ noflo examples/linecount/count.fbp

Inline FBP in web applications

In addition to separate files, FBP graph definitions can also be defined inline in HTML. The typical way to do this is to utilize a script tag. For example, the following would change the contents of an element identified with the ID header to say Hello World:

<script type="application/fbp" id="main">
  '#header' -> SELECTOR GetHeader(dom/GetElement)
  'Hello World' -> HTML WriteContent(dom/WriteHTML)
  GetHeader ELEMENT -> CONTAINER WriteContent
</script>

Loading and running inline FBP is quite simple:

// Get the FBP contents
var fbp = document.getElementById('main').textContent.trim();

// Load the NoFlo graph based on the FBP string
noflo.graph.loadFBP(fbp, function (graph) {

  // Run the graph
  noflo.createNetwork(graph);
});
# Get the FBP contents
fbp = document.getElementById('main').textContent.trim()

# Load the NoFlo graph based on the FBP string
noflo.graph.loadFBP fbp, (graph) ->
  # Run the graph
  noflo.createNetwork graph