GEXF

JointJS+ provides a GEXF plugin that enables the ability to import a graph represented as an XML string in the GEXF format, and make it a JointJS graph.

Installation

Access toCellsArray via the format namespace.

import { dia, shapes, format } from '@joint/plus';

const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:viz="http://www.gexf.net/1.1draft/viz" version="1.2">
    <graph mode="static" defaultedgetype="directed">
        <nodes>
            <node id="0" label="Hello">
                <viz:position x="15.0" y="40.0" z="0.0"/>
                <viz:size value="50" />
                <viz:color r="239" g="173" b="66" a="0.6"/>
            </node>
            <node id="1" label="World">
                <viz:position x="15.0" y="140.0" z="0.0"/>
                <viz:size value="50" />
                <viz:color r="239" g="173" b="66" a="0.6"/>
            </node>
        </nodes>
        <edges>
            <edge id="0" source="0" target="1" />
        </edges>
    </graph>
</gexf>`;

const cells = format.gexf.toCellsArray(
    xmlString,
    function makeElement(data) {
        return new shapes.standard.Rectangle({
            id: data.id,
            position: { x: data.x, y: data.y },
            size: { width: data.width, height: data.height },
            attrs: {
                label: { text: data.label },
                body: { fill: data.color }
            }
        });
    },
    function makeLink(data) {
        return new shapes.standard.Link({
            source: { id: data.source },
            target: { id: data.target }
        });
    }
);

graph.resetCells(cells);

There is also a UMD version available

Include joint.format.gexf.js in your HTML:

index.html

<script src="joint.js"></script>
<script src="joint.format.gexf.js"></script>

Access toCellsArray through the joint.format namespace:

index.js

const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<gexf xmlns="http://www.gexf.net/1.2draft" xmlns:viz="http://www.gexf.net/1.1draft/viz" version="1.2">
    <graph mode="static" defaultedgetype="directed">
        <nodes>
            <node id="0" label="Hello">
                <viz:position x="15.0" y="40.0" z="0.0"/>
                <viz:size value="50" />
                <viz:color r="239" g="173" b="66" a="0.6"/>
            </node>
            <node id="1" label="World">
                <viz:position x="15.0" y="140.0" z="0.0"/>
                <viz:size value="50" />
                <viz:color r="239" g="173" b="66" a="0.6"/>
            </node>
        </nodes>
        <edges>
            <edge id="0" source="0" target="1" />
        </edges>
    </graph>
</gexf>`;

const cells = joint.format.gexf.toCellsArray(
    xmlString,
    function makeElement(data) {
        return new joint.shapes.standard.Rectangle({
            id: data.id,
            position: { x: data.x, y: data.y },
            size: { width: data.width, height: data.height },
            attrs: {
                label: { text: data.label },
                body: { fill: data.color }
            }
        });
    },
    function makeLink(data) {
        return new joint.shapes.standard.Link({
            source: { id: data.source },
            target: { id: data.target }
        });
    }
);

graph.resetCells(cells);