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!

Furnivall

The documentation needs updating, we haven't supported that mode for a long time. mxGraph would be massive overkill for your use-case. – Tanah

Ok thank you! I'm already using mxGraph in the project for a BPMN editor so I thought of using it for the form editor too for consistency reasons. But in that case I'll do it otherwise. – Furnivall

@Christian Have you found a library for your use case ? I am trying to find a solution for a similar problem. – Inconceivable

Answer 1

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

Tanah