Buffer Editor

{ "class": "GraphLinksModel",
  "copiesArrays": true,
  "copiesArrayObjects": true,
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
{"key":"CYL1","name":"Buffer \nStore","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":"left19","portColor":"#00ff00"},{"portId":"left23","portColor":"#00ff00"}],"topArray":[{"portColor":"#ffffff","portId":"top0"},{"portId":"top1","portColor":"#ffffff"},{"portId":"top2","portColor":"#ffffff"},{"portId":"top3","portColor":"#ffffff"},{"portId":"top4","portColor":"#ffffff"},{"portId":"top5","portColor":"#ff0000"},{"portId":"top6","portColor":"#ffffff"},{"portId":"top7","portColor":"#ffffff"},{"portId":"top8","portColor":"#ffffff"},{"portId":"top9","portColor":"#ffffff"},{"portId":"top10","portColor":"#ffffff"}],"bottomArray":[],"rightArray":[{"portColor":"#ff0000","portId":"right0"},{"portColor":"#ff0000","portId":"right1"},{"portId":"right2","portColor":"#ff0000"},{"portId":"right3","portColor":"#ff0000"},{"portId":"right4","portColor":"#ff0000"},{"portId":"right5","portColor":"#ff0000"},{"portId":"right6","portColor":"#ff0000"},{"portId":"right7","portColor":"#e39f35"},{"portId":"right8","portColor":"#e39f35"},{"portId":"right9","portColor":"#e39f35"},{"portId":"right10","portColor":"#fbe264"},{"portId":"right11","portColor":"#fbe264"},{"portId":"right12","portColor":"#fbe264"},{"portId":"right13","portColor":"#ffff00"},{"portId":"right14","portColor":"#ffff00"},{"portId":"right15","portColor":"#ffff00"},{"portId":"right16","portColor":"#8bc34a"},{"portId":"right17","portColor":"#8bc34a"},{"portId":"right18","portColor":"#2196f3"},{"portId":"right19","portColor":"#2196f3"}]},
{"name":"NTC10K","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#6cafdb"},{"portId":"right1","portColor":"#66d6d1"}],"topArray":[],"bottomArray":[],"key":"NTC4","loc":"-488.7532829862677 212.6673070407662"},
{"name":"Kitchen","leftArray":[{"portId":"left0","portColor":"#6cafdb"}],"rightArray":[],"topArray":[],"bottomArray":[],"key":"outlet1","loc":"94 24.125"},
{"name":"Bathroom","leftArray":[{"portId":"left0","portColor":"#6cafdb"}],"rightArray":[],"topArray":[],"bottomArray":[],"key":"outlet2","loc":"90 -47.875"}
],
  "linkDataArray": [
{"from":"NTC4","to":"CYL1","fromPort":"right0","toPort":"left6","points":[-446.4041618925178,207.6673070407662,-432.4041618925178,207.6673070407662,-301.4895633216096,207.6673070407662,-301.4895633216096,161.3160717356572,-202.57496475070138,161.3160717356572,-88.57496475070138,161.3160717356572]},
{"from":"NTC4","to":"CYL1","fromPort":"right1","toPort":"left7","points":[-446.4041618925178,217.6673070407662,-424.4041618925178,217.6673070407662,-293.4895633216096,217.6673070407662,-293.4895633216096,171.3160717356572,-194.57496475070138,171.3160717356572,-88.57496475070138,171.3160717356572]},
{"from":"CYL1","to":"outlet1","fromPort":"top5","toPort":"left0","points":[-25.574964750701383,88.3160717356572,-25.574964750701383,38.316071735657204,-25.574964750701383,24.125,8.800164109024308,24.125,43.17529296875,24.125,53.17529296875,24.125]},
{"from":"outlet2","to":"CYL1","fromPort":"left0","toPort":"top5","points":[41.078125,-47.875,31.078125,-47.875,-25.574964750701383,-47.875,-25.574964750701383,-4.779464132171398,-25.574964750701383,38.316071735657204,-25.574964750701383,88.3160717356572]}
]}

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)