MindFusion.Diagramming for JavaScript is now also available as a Node.js module, and you can use the diagram API you know and love in server code 🙂 A sample server application and the module script are available here:
For example, you can submit to server a diagram drawn interactively by the user and examine its contents there by iterating over the nodes and links members of the Diagram class:
// on client side $.ajax( { type: "post", url: "http://localhost:1234/diagram", contentType: "application/json", data: diagram.toJson(), success: function(data) { console.log('success'); }, error: function(jqXHR, textStatus, err) { console.log(err); } }); // on server side app.post('/diagram', function(req, res) { // won't be required in final release var dummyCanvas = { parentNode:{} }; // create Diagram instance var diagram = new Diagram(dummyCanvas); // load diagram elements drawn by user diagram.fromJson(req.rawBody); // examine diagram contents console.log(diagram.nodes.length + " nodes"); console.log(diagram.links.length + " links"); diagram.nodes.forEach(function (node, index) { console.log("node " + index + ": " + node.getText()); }); // send some response res.send('ok'); });
Or you could build the diagram on server side and send it to the browser to render in client-side Diagram control:
// on server side app.get('/diagram', function(req, res) { // won't be required in final release var dummyCanvas = { parentNode:{} }; // create Diagram instance var diagram = new Diagram(dummyCanvas); // create some diagram items var node1 = diagram.getFactory().createShapeNode(10, 10, 40, 30); var node2 = diagram.getFactory().createShapeNode(60, 10, 40, 30); var link = diagram.getFactory().createDiagramLink(node1, node2); // set nodes' content node1.setText("node.js"); node1.setBrush("orange"); node2.setText("hello there"); // send diagram json res.send( diagram.toJson()); }); // on client side $.ajax( { type: "get", url: "http://localhost:1234/diagram", success: function(data) { diagram.fromJson(data); }, error: function(jqXHR, textStatus, err) { console.log(err); } });
To run the sample Node.js application, run “node server.js” from command line and open http://localhost:1234/client.html in your browser. Draw some nodes and links, edit their text and click Post to see them enumerated in Node’s console. Clicking the Get button will show this diagram built on server side:
For more information on MindFusion’s JavaScript Diagram API, see MindFusion.Diagramming online help
Enjoy!