Append html code to mxgraph diagrm befor export

Question

I am not an English native speaker so please ignore my grammar mistakes.

The question is,

I am drawing shapes on the div using mxgraph and javascript and then exporting it to PNG and SVG, it is working fine.

There is another legends div that is designed using HTML, CSS, and JS.

#diagramFilterStickyHeaderParentDiv{
    /*  border: 2px solid green; */
    width: 100%;
    height: 4em;
    position: relative;
    top: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
}

#diagramFilterStickyHeader{
    /*  border: 2px solid red; */
    height: 100%;
    background-color: #7a7a7996;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    /*     justify-content: space-evenly; */
    align-items: center;
    width: 95%;
}
.diagramFilterCircleParentDiv{
/*  border: 1px solid black; */
/*     width: 10em; */
    margin-left: 10px;
    margin-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
    cursor: pointer;
    display: flex;
}

.circle{
    /*     background-color: blue; */
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 3px;
    border-radius: 50%;
    margin-right: 10px;
}
.circleText{
    color: black;
}

.diagramFilterCircleParentDiv:hover{
    /*  background-color: #0D7E8A; */
    color: white;
    overflow: visible;
    transform: scale(1.2);
}
.circleText:hover{
    background-color: #0D7E8A;
    color: white;
}

<div id="diagramFilterStickyHeaderParentDiv" style="display: flex;">
    <div id="diagramFilterStickyHeader">
        <div class="diagramFilterCircleParentDiv">
            <span class="circle" style="background-color:#191908"></span>
            <span class="circleText">Null</span>
        </div>
        <div class="diagramFilterCircleParentDiv">
            <span class="circle" style="background-color:#000000"></span>
            <span class="circleText">Core System</span>
        </div>
        <div class="diagramFilterCircleParentDiv">
            <span class="circle" style="background-color:#391804"></span>
            <span class="circleText">Support System</span>
        </div>
        <div class="diagramFilterCircleParentDiv">
            <span class="circle" style="background-color:#c6db6d"></span>
            <span class="circleText">Other</span>
        </div>
    </div>
</div>

Now, I want that legend div should be at the top of the diagram and then I can download it bot the diagram with the legend div(at the top of the diagram) as a PNG and SVG.

Here is the code that is used to download the mxgraph diagram as PNG and SVG

   function exportAsPNG(){
    var format = 'png';
    var bg = '#ffffff';
    var scale = 1;
    var b = 1;
    
    var imgExport = new mxImageExport();
    var bounds = graph2.getGraphBounds();
    var vs = graph2.view.scale;
    
    // New image export
    var xmlDoc = mxUtils.createXmlDocument();
    var root = xmlDoc.createElement('output');
    xmlDoc.appendChild(root);
    
    // Renders graph2. Offset will be multiplied with state's scale when painting state.
    var xmlCanvas = new mxXmlCanvas2D(root);
    xmlCanvas.translate(Math.floor((b / scale - bounds.x) / vs)+30, Math.floor((b / scale - bounds.y) / vs));
    xmlCanvas.scale(scale / vs);
    
    imgExport.drawState(graph2.getView().getState(graph2.model.root), xmlCanvas);

    // Puts request data together
    var w = Math.ceil(bounds.width * scale / vs + 2 * b)+100;
    var h = Math.ceil(bounds.height * scale / vs + 2 * b)+50;
    var xml = mxUtils.getXml(root);
        
    if (bg != null)
    {
        bg = '&bg=' + bg;
    }
    
    new mxXmlRequest('Export', 'filename='+modelName+'.' + format + '&format=' + format +
        bg + '&w=' + w + '&h=' + h + '&xml=' + encodeURIComponent(xml)).
        simulate(document);
    $('#exportGraph').empty();
}

and for svg

function exportAsSVG() {
    var background = '#ffffff';
    var scale = 1;
    var border = 1;

    var imgExport = new mxImageExport();
    var bounds = graph2.getGraphBounds();
    var vs = graph2.view.scale;

    // Prepares SVG document that holds the output
    var svgDoc = mxUtils.createXmlDocument();
    var root = (svgDoc.createElementNS != null) ?
        svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');

    if (background != null) {
        if (root.style != null) {
            root.style.backgroundColor = background;
        }
        else {
            root.setAttribute('style', 'background-color:' + background);
        }
    }

    if (svgDoc.createElementNS == null) {
        root.setAttribute('xmlns', mxConstants.NS_SVG);
        root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
    }
    else {
        // KNOWN: Ignored in IE9-11, adds namespace for each image element instead. No workaround.
        root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', mxConstants.NS_XLINK);
    }

    root.setAttribute('width', (Math.ceil(bounds.width * scale / vs) + 2 * border) + 100 + 'px');
    root.setAttribute('height', (Math.ceil(bounds.height * scale / vs) + 2 * border) + 50 + 'px');
    root.setAttribute('version', '1.1');

    // Adds group for anti-aliasing via transform
    var group = (svgDoc.createElementNS != null) ?
        svgDoc.createElementNS(mxConstants.NS_SVG, 'g') : svgDoc.createElement('g');
    group.setAttribute('transform', 'translate(0.5,0.5)');
    root.appendChild(group);
    svgDoc.appendChild(root);

    // Renders graph2. Offset will be multiplied with state's scale when painting state.
    var svgCanvas = new mxSvgCanvas2D(group);
    svgCanvas.translate(Math.floor((border / scale - bounds.x) / vs) + 30, Math.floor((border / scale - bounds.y) / vs));
    svgCanvas.scale(scale / vs);

    // Displayed if a viewer does not support foreignObjects (which is needed to HTML output)
    svgCanvas.foAltText = '[Not supported by viewer]';
    imgExport.drawState(graph2.getView().getState(graph2.model.root), svgCanvas);

    var xml = encodeURIComponent(mxUtils.getXml(root));
    var xml1 = mxUtils.getXml(root);
    new mxXmlRequest('Echo', 'filename=' + modelName + '.svg&format=svg' + '&xml=' + xml).simulate(document);
    $('#exportGraph').empty();
}

Any help will be grateful for me.

Thanks in advance.