You may see the name Rappid in our documentation, code and other materials. Rappid has been replaced by a new brand, JointJS+. This change has no effect on functionality. To avoid confusion, please consider Rappid and JointJS+ as synonyms. Read more here.


This plugin imports a graph represented as an XML string in the GEXF format and makes it a JointJS graph.

The plugin contains only one function joint.format.gexf.toCellsArray(xmlString, makeElement, makeLink), where:

argument description
xmlString an XML string representing a graph in GEXF format
makeElement(data) a function that takes an object with id and label (and width, height, x, y, z, color, shape if present in the XML) properties and returns a JointJS element for this node.
makeLink(data) a function that takes an object with source and target properties and returns a JointJS link for that edge.


Include joint.format.gexf.js file into your HTML:

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


const xmlString = `<?xml version="1.0" encoding="UTF-8"?>
<gexf xmlns="" xmlns:viz="" version="1.2">
    <graph mode="static" defaultedgetype="directed">
            <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 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"/>
            <edge id="0" source="0" target="1" />

const cells = joint.format.gexf.toCellsArray(
    function makeElement(data) {
        return new joint.shapes.standard.Rectangle({
           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: }