在mxgraph中，要实现一个自定义的图形使非常容易的。只需要： * 继承mxShape * 覆盖redrawPath方法 * 注册自定义的图形

例子

/**
 * Class: NoteShape
 * 
 * Implementation of the noteShape shape.
 *
 * Note Shape, supports size style
 * 
 * Constructor: NoteShape
 *
 * Constructs a new noteShape shape.
 */
function NoteShape() { };
/**
 * Extends <mxCylinder>.
 */
NoteShape.prototype = new mxCylinder();

NoteShape.prototype.constructor = NoteShape;
NoteShape.prototype.size = 30;

/**
 * Function: redrawPath
 *
 * Draws the path for this shape. This method uses the <mxPath>
 * abstraction to paint the shape for VML and SVG.
 */
NoteShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
{
    var s = Math.min(w, Math.min(h, mxUtils.getValue(this.style, 'size', this.size) * this.scale));

    if (isForeground)
    {
        path.moveTo(w - s, 0);
        path.lineTo(w - s, s);
        path.lineTo(w, s);
        path.end();
    }
    else
    {
        path.moveTo(0, 0);
        path.lineTo(w - s, 0);
        path.lineTo(w, s);
        path.lineTo(w, h);
        path.lineTo(0, h);
        path.lineTo(0, 0);
        path.close();
        path.end();
    }
};
// Register the NoteShape with note
mxCellRenderer.prototype.defaultShapes['note'] = NoteShape;

使用，这里直接给出在xml中使用