How to load a .xml file with custom library in mxgraph?d

[HWAZWD]

I just create my own lib and then export them into a .xml file.

But it seems that they cannot be rendered correctly.

This case first occurred when I load a file with some extra shapes which named "resistors", and found that only when I modify the shape name in .xml file like this:

When I modify "mxgraph.electrical.resistors.resistor_2" to "Attenuator",it works correctly.

Now I defined some cell to my lib,but I didn't find a way to do like that.And they a not shapes but file:

My final purpose is to display my diagram in a vue project and add some event, no need for edit functions:

Any help will be appreciated.

[HWAZWD]

the code to register some shapes:

var req = mxUtils.load('./resistors.xml')
var root = req.getDocumentElement()
var shape = root.firstChild

while (shape != null) {
  if (shape.nodeType == mxConstants.NODETYPE_ELEMENT) {
    mxStencilRegistry.addStencil(shape.getAttribute('name'), new mxStencil(shape))
  }

  shape = shape.nextSibling
}

any way to load a library?
Or libs、mxgraphModel can be convert to shapes?
Not sure whether it's appropriate, I'm working with electrical things, not expert in coding.