Generate mxlibrary - how to properly encode contents of the xml property?

[webketje]

Hi, thanks for this awesome program!

Draw.io allows to save symbol libraries, and I would like to know how to generate one (for easily keeping an icon font library up to date). A basic one-shape library looks like this:

<mxlibrary>[
  {
    "xml":"jVHLDoIwEPya3rG9eFUQTp78gkZW2qQPUlaBv3ehq8QDiYcmOzM72+lWqNJPTdK9ucYWnFAXocoUI+bKTyU4J2RhW6EqIWVBR8h6Rz2satHrBAH/MchseGn3hMxkYsDZMUEG2w8EzqOxCLde3xdlpMzEGfQUujpQ+YgBa+2tm4moCdCc0whD9MBqGV1MJIYYForvhoQw7eZfKQ7fAM3CNFPLaFs03MFvLAzYzrDtyJweMu6+1m0bVPBCPnBb/Kr9/Msb",
    "w":120,
    "h":80,
    "aspect":"fixed",
    "title":"Circle"
  }
]</mxlibrary>

I searched for hours in the mxgraph/ drawio repo's for how the "xml" property above has been encoded, but simply can't figure out how to get a similarly encoded string. It looks like it is base64 encoded, but the decode doesn't yield any human-readable string..

The closest I got is in src/main/webapp/js/diagramly/EditorUi.js#L2955.

var xml = Graph.compress(mxUtils.getXml(this.editor.graph.encodeCells(cells)));
var entry = {xml: xml, w: bounds.width, h: bounds.height};
[...]
saveLibrary(evt);

[webketje]

Ok so I found out: the functions of interest are Graph.compress & Graph.uncompress in /src/main/webapp/js/mxgraph/Graph.js.

If you are interested in generating <mxlibrary> contents with NodeJS, this is the way to go:

var fs = require('fs');
var path = require('path');
var pako = require('pako'); // see https://www.npmjs.com/package/pako

function mxLibraryXML(entries) {
  return ["<mxlibrary>", JSON.stringify(entries), "</mxlibrary>"].join("");
}

function mxLibraryEntryXML(contents) {
  return Buffer.from(
    pako.deflateRaw(encodeURIComponent(contents)
  ).toString("base64")
}

// possible options: w (width), h (height), aspect (fixed/variable), title (stencil title)
function mxLibraryEntry(contents, options) {
  return Object.assign({
    xml: mxLibraryEntryXML(contents),
  }, options);
}

var test = mxLibraryEntry(fs.readFileSync(path.join(__dirname, 'test.xml')));

console.log(mxLibraryXML(test))

With a test.xml similar to this (created in draw.io):

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="" style="group;aspect=fixed;connectable=0;editable=0;" vertex="1" connectable="0" parent="1">
      <mxGeometry width="16" height="16" as="geometry"/>
    </mxCell>
    <mxCell id="3" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=none;aspect=fixed;fillColor=none;connectable=0;" vertex="1" parent="2">
      <mxGeometry width="16" height="16" as="geometry"/>
    </mxCell>
    <mxCell id="4" value="" style="shape=image;aspect=fixed;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMTU3LjUyIDI3MmgzNi45NkwxNzYgMjE4Ljc4IDE1Ny41MiAyNzJ6TTM1MiAyNTZjLTEzLjIzIDAtMjQgMTAuNzctMjQgMjRzMTAuNzcgMjQgMjQgMjQgMjQtMTAuNzcgMjQtMjQtMTAuNzctMjQtMjQtMjR6TTQ2NCA2NEg0OEMyMS41IDY0IDAgODUuNSAwIDExMnYyODhjMCAyNi41IDIxLjUgNDggNDggNDhoNDE2YzI2LjUgMCA0OC0yMS41IDQ4LTQ4VjExMmMwLTI2LjUtMjEuNS00OC00OC00OHpNMjUwLjU4IDM1MmgtMTYuOTRjLTYuODEgMC0xMi44OC00LjMyLTE1LjEyLTEwLjc1TDIxMS4xNSAzMjBoLTcwLjI5bC03LjM4IDIxLjI1QTE2IDE2IDAgMCAxIDExOC4zNiAzNTJoLTE2Ljk0Yy0xMS4wMSAwLTE4LjczLTEwLjg1LTE1LjEyLTIxLjI1TDE0MCAxNzYuMTJBMjMuOTk1IDIzLjk5NSAwIDAgMSAxNjIuNjcgMTYwaDI2LjY2QTIzLjk5IDIzLjk5IDAgMCAxIDIxMiAxNzYuMTNsNTMuNjkgMTU0LjYyYzMuNjEgMTAuNC00LjExIDIxLjI1LTE1LjExIDIxLjI1ek00MjQgMzM2YzAgOC44NC03LjE2IDE2LTE2IDE2aC0xNmMtNC44NSAwLTkuMDQtMi4yNy0xMS45OC01LjY4LTguNjIgMy42Ni0xOC4wOSA1LjY4LTI4LjAyIDUuNjgtMzkuNyAwLTcyLTMyLjMtNzItNzJzMzIuMy03MiA3Mi03MmM4LjQ2IDAgMTYuNDYgMS43MyAyNCA0LjQyVjE3NmMwLTguODQgNy4xNi0xNiAxNi0xNmgxNmM4Ljg0IDAgMTYgNy4xNiAxNiAxNnYxNjB6Ii8+PC9zdmc+;connectable=0;editable=0;movable=0;resizable=1;rotatable=0;cloneable=0;deletable=0;recursiveResize=0;imageBackground=none;noLabel=1;fontColor=none;" vertex="1" parent="2">
      <mxGeometry x="1" width="13.97" height="16" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

[davidjgraph]

Also, see answer to https://softwarerecs.stackexchange.com/questions/42394/is-there-an-xml-renderer-for-draw-io-graphs