Render draw.io diagram to png

Question

I'm trying to render draw.io saved (SaveAs->Device) .xml diagrams.

Saved diagram using as input example:

<mxGraphModel dx="1426" dy="720" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff" math="0" shadow="0">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="180" y="200" width="120" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="3" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
      <mxGeometry x="360" y="180" width="80" height="80" as="geometry"/>
    </mxCell>
    <mxCell id="4" value="" style="endArrow=classic;html=1;exitX=0.025;exitY=0.638;exitPerimeter=0;" edge="1" parent="1" source="3" target="2">
      <mxGeometry width="50" height="50" relative="1" as="geometry">
        <mxPoint x="180" y="430" as="sourcePoint"/>
        <mxPoint x="230" y="380" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
  </root>
</mxGraphModel>

And then i have to render it to png programmatically, so i writing c# code, using mxgraph library for this purpose:

using System;
using System.Drawing;
using com.mxgraph;

namespace MxGraphRendering
{
    class Program
    {
        static void Main(string[] args)
        {
            var file = mxUtils.ReadFile("../../../export.xml");
            var document = mxUtils.ParseXml(file);
            var codec = new mxCodec(document);
            var graph = new mxGraph();
            codec.Decode(document.DocumentElement, graph.Model);

            var image = mxCellRenderer.CreateImage(graph, null, 1, 
Color.White, false, null);
            image.Save("../../../output.png");
            Console.ReadKey();
        }
    }
}

After it's runned, i've got a certain output:

Source diagram

Output image

Seems to this question, problem is lack of draw.io stylesheets for expected output. There is a simple way to add it all in my c# mxGraph instance?

Or, on the other side, is clear way to render png from xml with native javascript, used in draw.io? (Function, that produce rendering/exporting e.t.c)

Any help is appreciated.

Answer 1

I know this is a year old, but I had the same problem and couldn't find anything on SO about it. Eventually I figured out an awkward but workable solution and since it is better than nothing I'll put it here.

I found an npm package called draw.io-export (link to github). As of 2019 it is up to date and works.

It will not only allow you to convert a draw.io diagram to png, but it connects to the draw.io website to do so and so should avoid any formatting issues.

You do have to call it from the command line though, so since you are using C# I would recommend looking up how to do so on this SO answer.