DrawIo mxGraph: using XmlToSvg loses shape information

I am trying to convert XML to SVG using Java, but it looks like form information is being lost in the process.

Given a simple schedule draw.io:

drawio

After running XmlToSvg.java I get:

convert

I saved it as uncompressed XML. I use mxgraph-all.jarfrom mxGraph Repo

Do you know if there are hidden settings for saving shapes and colors?

+4
source share
1 answer

Short version

, GitHub, , JavaScript, . , Java ( .NET PHP) "Cube" .

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 init 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=doubleEllipse;whiteSpace=wrap;html=1;aspect=fixed;", shape). JS , , , . -, Java . "named styles" "" 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_ " ". JS "" , examples/grapheditor/www/js/Shape.js, ! , Java-, , .

P.S. () , Java XML , :

Image for a simple graph

+3

Source: https://habr.com/ru/post/1677907/


All Articles