Wiring Editor

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":"Main Controller","loc":"86.728515625 199","leftArray":[],"topArray":[],"bottomArray":[],"rightArray":[{"portColor":"#eaeef8","portId":"right0"},{"portColor":"#fadfe5","portId":"right1"}]},
{"key":2,"name":"Unit Two","loc":"342.5 199","leftArray":[{"portColor":"#66d6d1","portId":"left1"},{"portColor":"#fae3d7","portId":"left2"}],"topArray":[],"bottomArray":[{"portColor":"#eaeef8","portId":"bottom0"},{"portColor":"#eaeef8","portId":"bottom1"}],"rightArray":[]},
{"key":3,"name":"Unit Three","loc":"389 351","leftArray":[{"portColor":"#66d6d1","portId":"left0"},{"portColor":"#6cafdb","portId":"left2"}],"topArray":[{"portColor":"#66d6d1","portId":"top0"}],"bottomArray":[{"portColor":"#6cafdb","portId":"bottom0"}],"rightArray":[]},
{"key":4,"name":"Unit Four","loc":"138 351","leftArray":[],"topArray":[{"portColor":"#6cafdb","portId":"top0"}],"bottomArray":[{"portColor":"#6cafdb","portId":"bottom0"}],"rightArray":[{"portColor":"#6cafdb","portId":"right0"},{"portColor":"#66d6d1","portId":"right1"}]}
],
  "linkDataArray": [
{"from":4,"to":2,"fromPort":"top0","toPort":"bottom0","points":[138,313,138,303,138,273.125,337.5,273.125,337.5,249,337.5,235]},
{"from":3,"to":2,"fromPort":"top0","toPort":"bottom1","points":[389,313,389,299,389,270,347.5,270,347.5,245,347.5,235]},
{"from":4,"to":3,"fromPort":"right0","toPort":"left0","points":[176,346,194,346,279.5,346,279.5,346,333,346,351,346]},
{"from":4,"to":3,"fromPort":"right1","toPort":"left2","points":[176,356,186,356,279.5,356,279.5,356,341,356,351,356]},
{"from":1,"to":2,"fromPort":"right0","toPort":"left1","points":[156.544921875,194,174.544921875,194,246.5224609375,194,246.5224609375,194,286.5,194,304.5,194]},
{"from":1,"to":2,"fromPort":"right1","toPort":"left2","points":[156.544921875,204,166.544921875,204,246.5224609375,204,246.5224609375,204,294.5,204,304.5,204]},
{"from":3,"to":4,"fromPort":"bottom0","toPort":"bottom0","points":[389,389,389,403,138,403,138,401,138,399,138,389]}
]}