MxGraph: Is it possible to render a graph in HTML without SVG?

Question

I'm looking for a way to render a graph in HTML, solely using mxGraph Javascript, without the use of an SVG canvas. The user manual says:

mxGraph also includes the feature to render entirely using html, this limits the range of functionality available, but is suitable for more simple diagrams."

However, I've tried the following without success:

var editor = new mxEditor();
var graph = new mxGraph(graphContElem, new mxGraphModel(), 'fastest'); // fastest maps to stricthtml
graph.setHtmlLabels(true);
graph.dialect = mxConstants.DIALECT_STRICTHTML;
editor.graph = graph;
editor.createGraph();

Adding this cell:

var prototype = new mxCell('<input type="text" value="test" />', new mxGeometry(0, 0, w, h), style);
prototype.setVertex(true);
... import cells ...

Leads to this:

<svg style="width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;">
...
    <g transform="translate(104,61)">
        <foreignObject style="overflow:visible;" pointer-events="all" width="173" height="19">
            <div style="display:inline-block;font-size:11px;font-family:Arial,Helvetica;color:#774400;line-height:1.2;vertical-align:top;white-space:nowrap;text-align:center;">
                <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">
                    <input type="text" value="test">
                </div>
            </div>
        </foreignObject>
    </g>
    ...
</svg>

My goal is the development of a form editor; therefore the cells of the graph would be HTML widgets or web components, as, for example, input fields.

Is this possible with mxGraph? Thanks in advance!

Answer 1

The documentation needs updating, mxGraph hasn't supported that mode for a long time.