Outputting SVG files from mxGraph

Question

My team and I are looking at using mxGraph to programmatically generate diagrams. We've created a graph and saved it as an XML file. How do we go from there to an SVG file?

I understand mxGraph uses SVG files natively for the display, and that it can write SVG files that have XML encoded in them so they can be reopened in diagrams.net. How can I get mxGraph to put our graph on an SVG canvas and then serialize it to disk?

// from https://stackoverflow.com/a/57829704
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM();
const fs = require('fs');

global.window = dom.window;
global.document = window.document;
global.XMLSerializer = window.XMLSerializer;
global.navigator = window.navigator;

const mxgraph = require("mxgraph")({
    mxImageBasePath: "./src/images",
    mxBasePath: "./src"
});


const {mxGraph, mxCodec, mxUtils, mxConstants, mxSvgCanvas2D} = mxgraph;

function makeHelloWorld() {
  // Extracted from https://github.com/jgraph/mxgraph/blob/master/javascript/examples/helloworld.html
  const graph = new mxGraph();

  // Gets the default parent for inserting new cells. This
  // is normally the first child of the root (ie. layer 0).
  var parent = graph.getDefaultParent();

  // Adds cells to the model in a single step
  graph.getModel().beginUpdate();
  try {
    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
    var e1 = graph.insertEdge(parent, null, '', v1, v2);
  } finally {
    // Updates the display
    graph.getModel().endUpdate();
  }
  return graph;
}

const helloWorldGraph = makeHelloWorld();

function graphToXML(graph) {
    var encoder = new mxCodec();
    var result = encoder.encode(graph.getModel());
    return mxUtils.getXml(result);
}

const xml = graphToXML(helloWorldGraph);

fs.writeFileSync('./graph.xml', xml);

Everything up to this point works--we can output an XML file. Now we have to get from there to an SVG.

I've created an SVG canvas, like so:

function createSvgCanvas(graph) {
    const svgDoc = mxUtils.createXmlDocument();
    const root = (svgDoc.createElementNS != null) ? svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');
    if (svgDoc.createElementNS == null) {
        root.setAttribute('xmlns', mxConstants.NS_SVG);
        root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
    } else {
        root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', mxConstants.NS_XLINK);
    }
    const bounds = graph.getGraphBounds();
    root.setAttribute('width', (bounds.x + bounds.width + 4) + 'px');
    root.setAttribute('height', (bounds.y + bounds.height + 4) + 'px');
    root.setAttribute('version', '1.1');
    svgDoc.appendChild(root);
    const svgCanvas = new mxSvgCanvas2D(root);
    return svgCanvas;
}

The problems are:

1. The new canvas is sized for the graph, but it doesn't have the graph on it yet.
2. I need to figure out how to turn the SVG canvas into an SVG file on disk.

EDIT: I've added the following to the end of the program:

const canvas = createSvgCanvas(helloWorldGraph);
const imgExport = new mxImageExport();
imgExport.drawState(helloWorldGraph.getView().getState(helloWorldGraph.model.root), canvas); // adapted from https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxImageExport-js.html

const xml2 = mxUtils.getXml(canvas)

const svgString = '<?xml version="1.0" encoding="UTF-8"?>\n'
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'
+ xml2
fs.writeFileSync('./graph.svg', svgString);

This gets me "Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'." I've tried a few things, but I'm not familiar enough with mxGraph to get the Node it needs out of my canvas.

Answer 1

For point 1, you can have a look at the draw.io code which provides details about how to setup the canvas.

• https://github.com/jgraph/drawio/blob/v13.2.3/src/main/webapp/js/diagramly/EditorUi.js#L1756
• https://github.com/jgraph/drawio/blob/v13.2.3/src/main/webapp/js/mxgraph/Graph.js#L7780

But this code is intended to be used in a browser, so you may have issue when running in your script which relies on JSDOM.

You will have to use an mxImageExport to use the canvas. Then wrap the produced node to generate the svg string (in the following svgRoot is the Element produced by the custom code and updated by the mxImageExport)

'<?xml version="1.0" encoding="UTF-8"?>\n'
 + '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'
 + mxUtils.getXml(svgRoot)

For point 2 in a script once you have the svg string, you can write it directly into a file as you did to store the mxgraph model in the xml file.

For point 2 in a browser You can use the download and href attributes of the Anchor element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes)

1st, generate an href data containing the encoding value of the svg string produced with point 1

'data:image/svg+xml' + encodeURIComponent(svg)

Then create the anchor with this href data and trigger it when clicking on a button for instance. More details in https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server

Answer 2

To generate SVG files from XML, you can download the desktop version of diagrams.net from http://get.diagrams.net and run it on the command line.

Documentation for the command line flags can be found here or by running draw.io --help.

/Applications/draw.io.app/Contents/MacOS/draw.io -x -f svg graph.xml

However, SVG files generated in this way lack the embedded XML data which would allow them to be reopened in diagrams.net. It may be possible to reinsert this data using regex or another method.