Block Editor

How to Use in Articles

The following elements have been given an id (view in the source) that can then be passed to a diagram using an iframe tag.

This way it is possible to create a design on this page and then include it into articles using pure JSON.

{ "class": "GraphLinksModel",
  "nodeDataArray": [
{"text":"Block 1","key":-1,"loc":"210 -120"},
{"text":"Buffer Store","key":-2,"loc":"-160 -30","figure":"Cylinder1","size":"60 140"},
{"text":"Pump","key":-3,"loc":"-10 -30","figure":"Ellipse","size":"60 60"},
{"text":"Block 2","key":-4,"loc":"210 10"},
{"text":"Boiler 1","key":-5,"loc":"-430 -80","figure":"Procedure","size":"80 80"},
{"text":"Boiler 2","key":-6,"loc":"-430 20","figure":"Procedure","size":"80 80"}
],
  "linkDataArray": [
{"from":-2,"to":-3,"points":[-130,-30,-120,-30,-85,-30,-85,-30,-50,-30,-40,-30]},
{"from":-3,"to":-1,"points":[20,-40,30,-40,85,-40,85,-120,140,-120,150,-120]},
{"from":-3,"to":-4,"points":[20,-20,30,-20,85,-20,85,10,140,10,150,10]},
{"from":-5,"to":-2,"points":[-390,-80,-380,-80,-290,-80,-290,-53.33333333333333,-200,-53.33333333333333,-190,-53.33333333333333]},
{"from":-6,"to":-2,"points":[-390,20,-380,20,-290,20,-290,-6.666666666666664,-200,-6.666666666666664,-190,-6.666666666666664]}
]}

{ "class": "GraphLinksModel",
  "nodeDataArray": [
{"text":"Block 1","key":-1,"loc":"210 -60"},
{"text":"Buffer Store","key":-2,"loc":"-110 40","figure":"Cylinder1","size":"60 140"},
{"text":"Pump","key":-3,"loc":"20 -10","figure":"Ellipse","size":"60 60"},
{"text":"Block 2","key":-4,"loc":"210 30"},
{"text":"Boiler 1","key":-5,"loc":"-460 -110","figure":"Procedure","size":"80 80","group":-9},
{"text":"Loading\nValve","key":-7,"loc":"-320 -70","figure":"Ellipse","size":"80 60","group":-9},
{"text":"Pump","key":-8,"loc":"-460 0","figure":"Ellipse","size":"60 60","group":-9},
{"isGroup":true,"text":"NEW GROUP","key":-9,"loc":"-390 -60","group":-14},
{"isGroup":true,"text":"NEW GROUP","key":-10,"loc":"-390 190","group":-14},
{"text":"Pump","key":-11,"loc":"-460 250","figure":"Ellipse","size":"60 60","group":-10},
{"text":"Boiler 1","key":-12,"loc":"-460 140","figure":"Procedure","size":"80 80","group":-10},
{"text":"Loading\nValve","key":-13,"loc":"-320 180","figure":"Ellipse","size":"80 60","group":-10},
{"isGroup":true,"text":"NEW GROUP","key":-14,"loc":"-390 56.33671875000002","fill":"lightgray"}
],
  "linkDataArray": [
{"from":-2,"to":-3,"points":[-80,40,-70,40,-45,40,-45,-10,-20,-10,-10,-10]},
{"from":-3,"to":-1,"points":[50,-20,60,-20,100,-20,100,-60,140,-60,150,-60]},
{"from":-3,"to":-4,"points":[50,0,60,0,100,0,100,30,140,30,150,30]},
{"from":-5,"to":-7,"points":[-420,-110,-410,-110,-390,-110,-390,-70,-370,-70,-360,-70]},
{"from":-8,"to":-5,"points":[-460,-30,-460,-40,-460,-50,-460,-50,-460,-60,-460,-70]},
{"from":-7,"to":-8,"points":[-360,-60,-370,-60,-395,-60,-395,0,-420,0,-430,0]},
{"from":-11,"to":-12,"points":[-460,220,-460,210,-460,200,-460,200,-460,190,-460,180]},
{"from":-12,"to":-13,"points":[-420,140,-410,140,-390,140,-390,170,-370,170,-360,170]},
{"from":-13,"to":-11,"points":[-360,190,-370,190,-395,190,-395,250,-420,250,-430,250]},
{"from":-2,"to":-7,"points":[-140,-2,-150,-2,-206,-2,-206,-80,-262,-80,-280,-80]},
{"from":-2,"to":-13,"points":[-140,54,-158,54,-214,54,-214,170,-270,170,-280,170]},
{"from":-7,"to":-2,"points":[-280,-60,-270,-60,-214,-60,-214,26,-158,26,-140,26]},
{"from":-13,"to":-2,"points":[-280,190,-262,190,-206,190,-206,82,-150,82,-140,82]}
]}