How to output/input in flowy.js flowchart

1

I’m trying to use a library called flowy which is a drag and drop flowchart but I’m having trouble outputting flowchart data from a data object.

I see on the github page flowy.output(); and flowy.import(output)

but I’m havimg trouble implementing.

Also how can I save a flow diagram that I create?

I tried making a json object to import but I don’t seem to get any blocks outputted. Here is a jsfiddle of what I’m working with.

<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>
//<div class="create-flowy">The block to be dragged</div>
//<div class="create-flowy">The block</div> 
<div id="canvas" class="create-flowy"></div>
<div id="block-id">

</div>

var spacing_x = 50;
var spacing_y = 100;
// Initialize Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
function onGrab(block){
	// When the user grabs a block
}
function onRelease(){
	// When the user releases a block
}
function onSnap(block, first, parent){
	// When a block snaps with another one
  return true;
}
function onRearrange(block, parent){
	// When a block is rearranged
}

// As an object
flowy.output();

flowy.import({
	"html": "",
	"blockarr": [],
	"blocks": [
		{
			"id": 1,
			"parent": 0,
			"data": [
				{
				"name": "blockid",
				"value": "1"
				},
        {
      "id": 2,
      "parent": 1,
      "connector": 2,
      "data": {
      "name": "block-id",
				"value": "2"
      }
    },
			],
			"attr": [
				{
				"id": "block-id",
				"class": "create-flowy"
				}
			]
		}
	]
})

Thanks so much!