как я могу добавить пользовательские формы в mxgraph

// Подборка фигуры

function CollateShape()
{
    mxEllipse.call(this);
};
mxUtils.extend(CollateShape, mxEllipse);
CollateShape.prototype.paintVertexShape = function(c, x, y, w, h)
{
    c.begin();
    c.moveTo(x, y);
    c.lineTo(x + w, y);
    c.lineTo(x + w / 2, y + h / 2);
    c.close();
    c.fillAndStroke();

    c.begin();
    c.moveTo(x, y + h);
    c.lineTo(x + w, y + h);
    c.lineTo(x + w / 2, y + h / 2);
    c.close();
    c.fillAndStroke();
};

mxCellRenderer.registerShape('collate', CollateShape);

Вы можете добавить новые фигуры, создав новую палитру боковой панели или добавив пользовательские фигуры в существующую.

Вот пример:

Допустим, вы хотите добавить новые фигуры в палитру Basic, перейдите в свой Sidebar.js и найдите функцию Sidebar.prototype.addBasicPalette, здесь вы можете добавить любую фигуру:

/**
 * Adds the general palette to the sidebar.
 */
Sidebar.prototype.addBasicPalette = function(dir)
{
    this.addStencilPalette('basic', mxResources.get('basic'), dir + '/basic.xml',
        ';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2',
        null, null, null, null, [
            this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;top=0;bottom=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
            this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;right=0;top=0;bottom=0;fillColor=none;routingCenterX=-0.5;', 120, 60, '', 'Partial Rectangle'),
            this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;bottom=0;right=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
            this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;top=0;left=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
            this.createEdgeTemplateEntry('html=1;verticalAlign=bottom;endArrow=block;', 80, 0, 'is_a', 'Is_A', null, 'uml sequence message call invoke dispatch'),
           // on the line above i created a new arrow with 'is_a' on the top

    ]);
};