Buffer Editor

{ "class": "GraphLinksModel",
  "copiesArrays": true,
  "copiesArrayObjects": true,
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
{"key":"C1","name":"Unit One","loc":"-25.574964750701383 196.3160717356572","leftArray":[{"portId":"left0","portColor":"#000000"},{"portId":"left1","portColor":"#00ff00"},{"portId":"left2","portColor":"#000000"},{"portId":"left3","portColor":"#00ff00"},{"portId":"left4","portColor":"#000000"},{"portId":"left5","portColor":"#00ff00"},{"portId":"left6","portColor":"#000000"},{"portId":"left7","portColor":"#00ff00"},{"portId":"left8","portColor":"#000000"},{"portId":"left9","portColor":"#ffff00"},{"portId":"left10","portColor":"#000000"},{"portId":"left11","portColor":"#ffff00"},{"portId":"left12","portColor":"#000000"},{"portId":"left13","portColor":"#ffff00"},{"portId":"left14","portColor":"#000000"},{"portId":"left15","portColor":"#ffff00"},{"portId":"left16","portColor":"#000000"},{"portId":"left17","portColor":"#00ff00"},{"portId":"left18","portColor":"#000000"},{"portId":"left19","portColor":"#00ff00"},{"portId":"left20","portColor":"#000000"},{"portId":"left21","portColor":"#00ff00"},{"portId":"left22","portColor":"#000000"},{"portId":"left23","portColor":"#00ff00"}],"topArray":[{"portColor":"#ff9800","portId":"top0"},{"portId":"top1","portColor":"#000000"},{"portId":"top2","portColor":"#ffcc00"},{"portId":"top3","portColor":"#000000"}],"bottomArray":[],"rightArray":[{"portColor":"#000000","portId":"right0"},{"portColor":"#888888","portId":"right1"},{"portId":"right2","portColor":"#888888"},{"portId":"right3","portColor":"#000000"},{"portId":"right4","portColor":"#888888"},{"portId":"right5","portColor":"#888888"},{"portId":"right6","portColor":"#ddddbb"},{"portId":"right7","portColor":"#ddddbb"},{"portId":"right8","portColor":"#8827e7"},{"portId":"right9","portColor":"#000000"},{"portId":"right10","portColor":"#8827e7"},{"portId":"right11","portColor":"#000000"},{"portId":"right12","portColor":"#8827e7"},{"portId":"right13","portColor":"#000000"},{"portId":"right14","portColor":"#8827e7"},{"portId":"right15","portColor":"#000000"},{"portId":"right16","portColor":"#0000ff"},{"portId":"right17","portColor":"#ff0000"},{"portId":"right18","portColor":"#0000ff"},{"portId":"right19","portColor":"#ff0000"},{"portId":"right20","portColor":"#0000ff"},{"portId":"right21","portColor":"#ff0000"},{"portId":"right22","portColor":"#0000ff"},{"portId":"right23","portColor":"#ff0000"}]},
{"name":"NTC10K","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"}],"topArray":[],"bottomArray":[],"key":"NTC1","loc":"-551.1296205847993 23.48544088160405"},
{"name":"NTC10K","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"}],"topArray":[],"bottomArray":[],"key":"NTC2","loc":"-468.92462058479913 72.5251239611851"},
{"name":"NTC10K","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"}],"topArray":[],"bottomArray":[],"key":"NTC3","loc":"-552.1632829862677 117.56480704076617"},
{"name":"Pulsed Flow\nSensor","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"},{"portId":"right2","portColor":"#d6effc"}],"topArray":[],"bottomArray":[],"key":"FS1","loc":"-381.7961150175177 382.06480704076614"},
{"name":"Keep-Warm\nTimer ","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#ebe3fc"},{"portId":"right1","portColor":"#d6effc"}],"topArray":[],"bottomArray":[],"key":"timerDHW","loc":"-254 507.125"},
{"name":"Room\nThermostat","leftArray":[],"rightArray":[{"portId":"right1","portColor":"#d6effc"},{"portId":"right2","portColor":"#d6effc"}],"topArray":[],"bottomArray":[],"key":"stat","loc":"-253 439.125"},
{"name":"Pressure \nTemperature Sensor","leftArray":[],"rightArray":[{"portId":"right1","portColor":"#d6effc"},{"portId":"right2","portColor":"#d6effc"},{"portId":"right0","portColor":"#6cafdb"},{"portId":"right3","portColor":"#d6effc"}],"topArray":[],"bottomArray":[],"key":"RPS1","loc":"-433.137502668535 266.188369363003"},
{"name":"NTC10K","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"}],"topArray":[],"bottomArray":[],"key":"NTC4","loc":"-468.7532829862677 163.6673070407662"}
],
  "linkDataArray": [
{"from":"NTC1","to":"C1","fromPort":"right0","toPort":"left0","points":[-508.78049949104934,18.48544088160405,-490.78049949104934,18.48544088160405,-265,18.48544088160405,-265,81.3160717356572,-157.57496475070138,81.3160717356572,-143.57496475070138,81.3160717356572]},
{"from":"NTC1","to":"C1","fromPort":"right1","toPort":"left1","points":[-508.78049949104934,28.48544088160405,-498.78049949104934,28.48544088160405,-279,28.48544088160405,-279,91.3160717356572,-165.57496475070138,91.3160717356572,-143.57496475070138,91.3160717356572]},
{"from":"C1","to":"NTC2","fromPort":"left2","toPort":"right0","points":[-143.57496475070138,101.3160717356572,-173.57496475070138,101.3160717356572,-296.0752321208753,101.3160717356572,-296.0752321208753,67.5251239611851,-406.57549949104913,67.5251239611851,-424.57549949104913,67.5251239611851]},
{"from":"C1","to":"NTC2","fromPort":"left3","toPort":"right1","points":[-143.57496475070138,111.3160717356572,-181.57496475070138,111.3160717356572,-312.0752321208753,111.3160717356572,-312.0752321208753,77.5251239611851,-414.57549949104913,77.5251239611851,-424.57549949104913,77.5251239611851]},
{"from":"C1","to":"NTC3","fromPort":"left4","toPort":"right0","points":[-143.57496475070138,121.3160717356572,-189.57496475070138,121.3160717356572,-354.69456332160956,121.3160717356572,-354.69456332160956,112.56480704076617,-491.81416189251775,112.56480704076617,-509.81416189251775,112.56480704076617]},
{"from":"C1","to":"NTC3","fromPort":"left5","toPort":"right1","points":[-143.57496475070138,131.3160717356572,-197.57496475070138,131.3160717356572,-370.69456332160956,131.3160717356572,-370.69456332160956,122.56480704076617,-499.81416189251775,122.56480704076617,-509.81416189251775,122.56480704076617]},
{"from":"FS1","to":"C1","fromPort":"right1","toPort":"bottom0","points":[-324.6501189237677,382.06480704076614,-302.6501189237677,382.06480704076614,-130.57496475070138,382.06480704076614,-130.57496475070138,360.19043938821164,-130.57496475070138,338.3160717356572,-130.57496475070138,324.3160717356572]},
{"from":"FS1","to":"C1","fromPort":"right2","toPort":"bottom1","points":[-324.6501189237677,392.06480704076614,-294.6501189237677,392.06480704076614,-120.57496475070138,392.06480704076614,-120.57496475070138,369.19043938821164,-120.57496475070138,346.3160717356572,-120.57496475070138,324.3160717356572]},
{"from":"stat","to":"C1","fromPort":"right1","toPort":"bottom2","points":[-199.10498046875,434.125,-185.10498046875,434.125,-110.57496475070138,434.125,-110.57496475070138,394.22053586782863,-110.57496475070138,354.3160717356572,-110.57496475070138,324.3160717356572]},
{"from":"stat","to":"C1","fromPort":"right2","toPort":"bottom3","points":[-199.10498046875,444.125,-177.10498046875,444.125,-100.57496475070138,444.125,-100.57496475070138,403.22053586782863,-100.57496475070138,362.3160717356572,-100.57496475070138,324.3160717356572]},
{"from":"C1","to":"timerDHW","fromPort":"bottom4","toPort":"right0","points":[-90.57496475070138,324.3160717356572,-90.57496475070138,370.3160717356572,-90.57496475070138,502.125,-137.8084784691007,502.125,-185.0419921875,502.125,-199.0419921875,502.125]},
{"from":"C1","to":"timerDHW","fromPort":"bottom5","toPort":"right1","points":[-80.57496475070138,324.3160717356572,-80.57496475070138,378.3160717356572,-80.57496475070138,512.125,-128.8084784691007,512.125,-177.0419921875,512.125,-199.0419921875,512.125]},
{"from":"NTC4","to":"C1","fromPort":"right0","toPort":"left6","points":[-426.4041618925177,158.6673070407662,-412.4041618925177,158.6673070407662,-334.9895633216096,158.6673070407662,-334.9895633216096,141.3160717356572,-289.5749647507014,141.3160717356572,-143.57496475070138,141.3160717356572]},
{"from":"NTC4","to":"C1","fromPort":"right1","toPort":"left7","points":[-426.4041618925177,168.6673070407662,-404.4041618925177,168.6673070407662,-326.9895633216096,168.6673070407662,-326.9895633216096,151.3160717356572,-281.5749647507014,151.3160717356572,-143.57496475070138,151.3160717356572]},
{"from":"FS1","to":"C1","fromPort":"right0","toPort":"top2","points":[-324.6501189237677,372.06480704076614,-310.6501189237677,372.06480704076614,-215.11254183723455,372.06480704076614,-215.11254183723455,38.316071735657204,-20.574964750701383,38.316071735657204,-20.574964750701383,68.3160717356572]},
{"from":"C1","to":"RPS1","fromPort":"left13","toPort":"right2","points":[-143.57496475070138,211.3160717356572,-233.57496475070138,211.3160717356572,-193,211.3160717356572,-193,261.188369363003,-329.25957298103503,261.188369363003,-351.25957298103503,261.188369363003]},
{"from":"C1","to":"RPS1","fromPort":"left14","toPort":"right0","points":[-143.57496475070138,221.3160717356572,-225.57496475070138,221.3160717356572,-182,221.3160717356572,-182,271.188369363003,-321.25957298103503,271.188369363003,-351.25957298103503,271.188369363003]},
{"from":"C1","to":"RPS1","fromPort":"left15","toPort":"right3","points":[-143.57496475070138,231.3160717356572,-217.57496475070138,231.3160717356572,-173,231.3160717356572,-173,281.188369363003,-313.25957298103503,281.188369363003,-351.25957298103503,281.188369363003]},
{"from":"C1","to":"RPS1","fromPort":"top0","toPort":"right1","points":[-40.57496475070138,68.3160717356572,-40.57496475070138,54.316071735657204,-243,54.316071735657204,-243,251.188369363003,-337.25957298103503,251.188369363003,-351.25957298103503,251.188369363003]}
]}

How to Use in Articles

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

The second element has also been hidden from view.

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

{ "class": "GraphLinksModel",
  "copiesArrays": true,
  "copiesArrayObjects": true,
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
{"key":1,"name":"Unit One","loc":"-25.574964750701383 196.3160717356572","leftArray":[{"portId":"left0","portColor":"#000000"},{"portId":"left1","portColor":"#00ff00"},{"portId":"left2","portColor":"#000000"},{"portId":"left3","portColor":"#00ff00"},{"portId":"left4","portColor":"#000000"},{"portId":"left5","portColor":"#00ff00"},{"portId":"left6","portColor":"#000000"},{"portId":"left7","portColor":"#00ff00"},{"portId":"left8","portColor":"#000000"},{"portId":"left9","portColor":"#44aaaa"},{"portId":"left10","portColor":"#000000"},{"portId":"left11","portColor":"#44aaaa"},{"portId":"left12","portColor":"#000000"},{"portId":"left13","portColor":"#44aaaa"},{"portId":"left14","portColor":"#000000"},{"portId":"left15","portColor":"#44aaaa"},{"portId":"left16","portColor":"#000000"},{"portId":"left17","portColor":"#00ff00"},{"portId":"left18","portColor":"#000000"},{"portId":"left19","portColor":"#00ff00"},{"portId":"left20","portColor":"#000000"},{"portId":"left21","portColor":"#00ff00"},{"portId":"left22","portColor":"#000000"},{"portId":"left23","portColor":"#00ff00"}],"topArray":[{"portColor":"#ff0000","portId":"top0"},{"portId":"top1","portColor":"#000000"}],"bottomArray":[{"portColor":"#00ff00","portId":"bottom0"},{"portId":"bottom1","portColor":"#d6effc"},{"portId":"bottom2","portColor":"#ebe3fc"},{"portId":"bottom3","portColor":"#d6effc"},{"portId":"bottom4","portColor":"#00ff00"},{"portId":"bottom5","portColor":"#fae3d7"},{"portId":"bottom6","portColor":"#6cafdb"},{"portId":"bottom7","portColor":"#6cafdb"},{"portId":"bottom8","portColor":"#ebe3fc"},{"portId":"bottom9","portColor":"#d6effc"},{"portId":"bottom10","portColor":"#eaeef8"},{"portId":"bottom11","portColor":"#fae3d7"}],"rightArray":[{"portColor":"#eaeef8","portId":"right0"},{"portColor":"#fadfe5","portId":"right1"}]},
{"name":"NTC10K","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"}],"topArray":[],"bottomArray":[],"key":-2,"loc":"-412.56962058479934 29.89544088160406"},
{"name":"NTC10K","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"}],"topArray":[],"bottomArray":[],"key":-3,"loc":"-412.56962058479917 100.73012396118509"},
{"name":"NTC10K","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"}],"topArray":[],"bottomArray":[],"key":-4,"loc":"-411.7057829862677 171.56480704076617"}
],
  "linkDataArray": [
{"from":-2,"to":1,"fromPort":"right0","toPort":"left0","points":[-368.22049949104934,24.89544088160406,-350.22049949104934,24.89544088160406,-212.89773212087536,24.89544088160406,-212.89773212087536,81.3160717356572,-107.57496475070138,81.3160717356572,-93.57496475070138,81.3160717356572]},
{"from":-2,"to":1,"fromPort":"right1","toPort":"left1","points":[-368.22049949104934,34.89544088160406,-358.22049949104934,34.89544088160406,-220.89773212087536,34.89544088160406,-220.89773212087536,91.3160717356572,-115.57496475070138,91.3160717356572,-93.57496475070138,91.3160717356572]},
{"from":1,"to":-3,"fromPort":"left2","toPort":"right0","points":[-93.57496475070138,101.3160717356572,-123.57496475070138,101.3160717356572,-248.78522837706498,101.3160717356572,-248.78522837706498,95.73012396118509,-350.22049949104894,95.73012396118509,-368.22049949104894,95.73012396118509]},
{"from":1,"to":-3,"fromPort":"left3","toPort":"right1","points":[-93.57496475070138,111.3160717356572,-131.57496475070138,111.3160717356572,-258.89773212087516,111.3160717356572,-258.89773212087516,105.73012396118509,-358.22049949104894,105.73012396118509,-368.22049949104894,105.73012396118509]},
{"from":1,"to":-4,"fromPort":"left4","toPort":"right0","points":[-93.57496475070138,121.3160717356572,-255.57496475070138,121.3160717356572,-241.01068999028178,121.3160717356572,-241.01068999028178,166.56480704076617,-353.3566618925176,166.56480704076617,-367.3566618925176,166.56480704076617]},
{"from":1,"to":-4,"fromPort":"left5","toPort":"right1","points":[-93.57496475070138,131.3160717356572,-247.57496475070138,131.3160717356572,-230.46581332160952,131.3160717356572,-230.46581332160952,176.56480704076617,-345.3566618925176,176.56480704076617,-367.3566618925176,176.56480704076617]}
]}

Improvements

• Number terminals
• Fix widths with top/bottom terminals
• Hover text over terminals
• Change colour of blocks
• Position terminals (drag along sides)
• Menu to change line thickness, type, colour, arrows.
• Optional wire labels = controller number + terminal number (e.g. 101)