mxgraph - DrawIo mxGraph : Using XmlToSvg loses shapes information

Question

我正在尝试使用 Java 将 XML 转换为 SVG，但看起来形状信息在此过程中丢失了。

给定一个简单的draw.io图:

运行后XmlToSvg.java我得到:

我将其保存为未压缩的 XML。我正在使用 mxGraph Repo 中的 mxgraph-all.jar

您知道是否有隐藏设置可以保留形状和颜色？

Answer 1

简短版本

尽管 GitHub 页面上有这样的声明，但除了 JavaScript 之外，没有任何实现真正功能齐全且已准备好投入生产。特别是 Java 实现(以及 .Net 和 PHP 服务器端)不支持开箱即用的“立方体”形状。

更多详情

颜色

您没有提供示例 XML，但当我生成类似的图表时，我得到类似的内容

<?xml version="1.0" encoding="UTF-8"?>
<mxGraphModel dx="1426" dy="816" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850"
              pageHeight="1100" background="#ffffff" math="0" shadow="0">
    <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;" parent="1" vertex="1">
            <mxGeometry x="445" y="60" width="230" height="150" as="geometry"/>
        </mxCell>
        <mxCell id="3" value="" style="ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1">
            <mxGeometry x="500" y="320" width="120" height="120" as="geometry"/>
        </mxCell>
        <mxCell id="4" value="" style="endArrow=classic;html=1;" parent="1" source="3" target="2" edge="1">
            <mxGeometry width="50" height="50" relative="1" as="geometry">
                <mxPoint x="430" y="510" as="sourcePoint"/>
                <mxPoint x="480" y="460" as="targetPoint"/>
            </mxGeometry>
        </mxCell>
        <mxCell id="5" value="" style="shape=cube;whiteSpace=wrap;html=1;" parent="1" vertex="1">
            <mxGeometry x="80" y="320" width="170" height="110" as="geometry"/>
        </mxCell>
    </root>
</mxGraphModel>

这里重要的是这个 XML 不包含任何有关颜色的信息。因此，关于“保留颜色”的整个想法是错误的。在 Java 实现中，您可以使用 mxStylesheet 类的实例配置“默认颜色”，并使用它来初始化 mxGraph 对象。例如，要将颜色更改为黑白，您可以执行以下操作:

mxStylesheet stylesheet = new mxStylesheet();
// configure "figures" aka "vertex"
{
    Map<String, Object> style = stylesheet.getDefaultVertexStyle();
    style.put(mxConstants.STYLE_FILLCOLOR, "#FFFFFF");
    style.put(mxConstants.STYLE_STROKECOLOR, "#000000");
    style.put(mxConstants.STYLE_FONTCOLOR, "#000000");
}
// configure "lines" aka "edges"
{
    Map<String, Object> style = stylesheet.getDefaultEdgeStyle();
    style.put(mxConstants.STYLE_STROKECOLOR, "#000000");
    style.put(mxConstants.STYLE_FONTCOLOR, "#000000");
}

mxGraph graph = new mxGraph(stylesheet);

您可以查看mxStylesheet.createDefaultVertexStyle和 mxStylesheet.createDefaultEdgeStyle了解一些详细信息。

形状

“椭圆”形状未正确处理，因为没有代码可以解析“ellipse;whiteSpace=wrap;html=1;”并理解该形状应该是“ellipse”(将其替换为包含显式 shape< 的“双椭圆”样式 “ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;aspect=fixed;”/ 值)。在 JS 实现中，样式的第一部分似乎选择一个处理函数，该函数将处理字符串的其余部分并执行实际工作。 Java实现中似乎根本没有这样的功能。您可以通过使用“命名样式”功能来解决此问题，并在同一 mxStylesheet 对象中定义相应“处理程序”的默认形状，如下所示:

// I just copied the whole list of mxConstants.SHAPE_ here
// you probably should filter it by removing non-primitive shapes
// such as mxConstants.SHAPE_DOUBLE_ELLIPSE
String[] shapes = new String[] {
        mxConstants.SHAPE_RECTANGLE,
        mxConstants.SHAPE_ELLIPSE,
        mxConstants.SHAPE_DOUBLE_RECTANGLE,
        mxConstants.SHAPE_DOUBLE_ELLIPSE,
        mxConstants.SHAPE_RHOMBUS,
        mxConstants.SHAPE_LINE,
        mxConstants.SHAPE_IMAGE,
        mxConstants.SHAPE_ARROW,
        mxConstants.SHAPE_CURVE,
        mxConstants.SHAPE_LABEL,
        mxConstants.SHAPE_CYLINDER,
        mxConstants.SHAPE_SWIMLANE,
        mxConstants.SHAPE_CONNECTOR,
        mxConstants.SHAPE_ACTOR,
        mxConstants.SHAPE_CLOUD,
        mxConstants.SHAPE_TRIANGLE,
        mxConstants.SHAPE_HEXAGON,
};
Map<String, Map<String, Object>> styles = stylesheet.getStyles();
for (String sh : shapes)
{
    Map<String, Object> style = new HashMap<>();
    style.put(mxConstants.STYLE_SHAPE, sh);
    styles.put(sh, style);
}

您仍然可能会注意到 mxConstants.SHAPE_ 列表不包含“cube”。在 JS 实现中，“立方体”是一种复合形状，由 examples/grapheditor/www/js/Shape.js 中的专门处理程序处理。这不是核心库的一部分!这意味着，如果您想在 Java 代码中支持此类高级形状，则必须推出代码来自行处理。

附注经过所有这些更改(修改)，我在第一个片段中使用 XML 中的 Java 代码得到的图像是: