How to use the noflo.graph function in noflo

$(document).ready(function () {
  $('canvas').css('z-index', '-5');
  $('body').append($('<input>').attr('type', 'range').attr('min', '0.1').attr('value', '0.1').attr('max', '255').attr('step', '0.1').attr('id', 'sigma'));
  $('body').append($('<input>').attr('type', 'range').attr('min', '0').attr('value', '1').attr('max', '255').attr('step', '1').attr('id', 'radius'));

  let nofloGraph = new noflo.graph.Graph('wat');

  function getNofloGraph () {
    return nofloGraph;
  }

  let dag = pipeline.DAG({regl, resl, getNofloGraph, pipeline});

  // so we can access stuff easily from the console.
  window.dag = dag;

  nofloGraph.addNode('src-texture', 'texture', {});
  nofloGraph.addNode('fbo', 'framebuffer', {});
  nofloGraph.addNode('blur', 'brute-gaussian', {});
  nofloGraph.addNode('sink-canvas', 'canvas', {});

  for (let node of dag.nodes()) {

$(document).ready(function () {
  // put the canvas in front of everything, but don't let it interfere with the
  // input events and steal focus etc.
  $('body > canvas')
      .css('z-index:', '1000')
      .css('pointer-events', 'none');

  // initialize the graph model
  let nofloGraph = new noflo.graph.Graph({options: {caseSensitive: true}});
  function getNofloGraph () {
    return nofloGraph;
  }

  // initialize the DAG/pipeline
  let dag = pipeline.DAG({regl, resl, getNofloGraph, pipeline, $});

  // so we can access stuff easily from the console.
  window.dag = dag;

  // create a few nodes
  dag.n('src', 'texture');
  dag.n('fbo', 'framebuffer');
  dag.n('blur', 'brute-gaussian');
  dag.n('sink', 'canvas');
  // hardcode some values on to the texture

$.getJSON('clock.json', function (graphDefinition) {
        noflo.graph.loadJSON(graphDefinition, function (graph) {
          window.graph = graph;
          // Which component to start with when loading components
          graph.baseDir = '/dataflow-noflo';

          var dataflow = new Dataflow({appendTo:"#noflo-ui"});

          // Dataflow-Noflo connection
          dataflow.plugins.noflo.registerGraph(graph, dataflow, function (dfGraph) {
            // Run the graph
            noflo.createNetwork(graph, function (network) {
              graph.on('addInitial', function () {
                network.sendInitials();
              });
            });
          });
        });

window.onload = function () {
      // Dependencies
      var Dataflow = require('/meemoo-dataflow').Dataflow;
      require('/dataflow-noflo');
      var noflo = require('noflo');

      // Start dataflow
      var dataflow = new Dataflow({appendTo:"#noflo-ui"});
      // Load blank graph
      var nfGraph = noflo.graph.createGraph("NoFlo");
      nfGraph.baseDir = "/dataflow-noflo";

      // Dataflow-Noflo connection
      dataflow.plugins.noflo.registerGraph(nfGraph, dataflow);
      // Show source
      nfGraph.dataflowGraph.trigger("change");
    };

$.getJSON('draggabilly.json', function (graphDefinition) {
        noflo.graph.loadJSON(graphDefinition, function (graph) {
          window.graph = graph;
          // Which component to start with when loading components
          graph.baseDir = '/dataflow-noflo';

          var dataflow = new Dataflow({appendTo:"#noflo-ui"});

          // Dataflow-Noflo connection
          dataflow.plugins.noflo.registerGraph(graph, dataflow);
      
          // Run the graph
          noflo.createNetwork(graph, function (network) {
            graph.on('addInitial', function () {
              network.sendInitials();
            });
          });
        });

var loadGraph = function (graph) {
      if (graph.processes) {
        var keys = Object.keys(graph.processes);
        for (var i=0; i

$.getJSON(json, function (graphDefinition) {
          nfGraph = noflo.graph.loadJSON(graphDefinition, function (graph) {
            registerGraph(graph);
          });
        });

var loadBlank = function () {
        nfGraph = noflo.graph.createGraph("NoFlo");
        nfGraph.baseDir = "/dataflow-noflo";
        registerGraph(nfGraph);
      };