How to add a complex shape easily to MxGraph?

Question

I'm aware that I can add shapes to MxGraph by drawing them with stencils like:

<shape name="or" aspect="variable">
    <background>
        <path>
            <move x="0" y="0"/>
            <quad x1="100" y1="0" x2="100" y2="50"/>
            <quad x1="100" y1="100" x2="0" y2="100"/>
            <close/>
        </path>
    </background>
    <foreground>
        <fillstroke/>
    </foreground>
</shape>

or draw with JavaScript as:

BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
    var dy = this.extrude * this.scale;
    var dx = this.extrude * this.scale;

    path.moveTo(0, dy);
    path.lineTo(w - dx, dy);
    path.lineTo(w, 0);
    path.moveTo(w - dx, dy);
    path.lineTo(w - dx, h);
};

I feel those two options are too primitive to create a complex shape. Draw.io uses fancy graphics like below and I feel that drawing them with the code as below would be an overkill and someone might have used some converter to do that directly from an SVG.

I inspected those elements those are drawings (Rendered as SVG) and not plain images which can be easily put on top of a vertex in MxGraph

Is there any easy way to create custom objects without writing code manually as below?

score 3 · Answer 1 · answered Jan 18 '18 at 07:09

There is a converter, but it's rather limited and there is no documentation/support:

https://github.com/jgraph/svg2xml

All three of the above stencils are created in JS. Some of the more visual parts were rewritten in JS and the reference was in SVG. And no, there isn't an SVG 2 JS tool.

score 1 · Answer 2 · answered Sep 18 '20 at 10:11

The easiest way to achieve using SVG as source for shape is to convert the SVG into mxGraph stencils or Javascript code. This integrates well with mxGraph but as as there is a conversion step, there are drawbacks: you have to reconvert the SVG when it changes to reflect changes to mxGraph drawing.

Alternatives exist as described in the svg-shapes-instead-of-stencils answer but you will have to write custom code.

For conversion tooling, you can have a look at mxgraph-svg2shape which provides a tool to directly convert SVG to JS code. It is based on the svg2xml tool mentionned in other answers.

It generates code that you can directly insert in a custom Shape redrawPath , paintForeground or paintBackground functions.

// foreground
canvas.begin();
canvas.moveTo(19.87, 0);
canvas.curveTo(11.98, 0, 5.55, 6.42, 5.55, 14.32);
canvas.lineTo(5.55, 18.4);

canvas.close();
canvas.fillAndStroke();

How to add a complex shape easily to MxGraph?

2 Answers2