将 draw.io 图表渲染为 png

Question

我正在尝试渲染 draw.io 保存的（另存为->设备）。xml 图表。

保存图表用作输入示例：

<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>

然后我必须以编程方式将其呈现为 png，因此我编写了 C# 代码，为此目的使用 mxgraph 库：

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();
        }
    }
}

运行后得到了一定的输出：

Source diagram

Output image

似乎是 this 问题，问题是缺少 draw.io 预期输出的样式表。有一种简单的方法可以将它全部添加到我的 c# mxGraph 实例中吗？

或者，另一方面，在 draw.io 中使用原生 javascript 从 xml 渲染 png 是一种清晰的方法吗？（函数，产生 rendering/exporting e.t.c）

感谢任何帮助。

Answer 1

我知道这是一岁了，但我遇到了同样的问题，但在 SO 上找不到任何相关信息。最终我想出了一个笨拙但可行的解决方案，因为总比没有好，所以我会把它放在这里。

我找到了一个名为 draw 的 npm 包。io-export (link to github)。截至 2019 年，它是最新的并且有效。

它不仅允许您将 draw.io 图转换为 png，而且它连接到 draw.io 网站以执行此操作，因此应避免任何格式问题。

不过您必须从命令行调用它，因此由于您使用的是 C#，我建议您在此 SO answer.

上查找如何执行此操作

将 draw.io 图表渲染为 png

Render draw.io diagram to png

javascript

c#

rendering

mxgraph

draw.io