Code to render SVG as in-line PNG image/href for saving with more readable naming (code from https://jsfiddle.net/07a93Lt6/5/ via https://stackoverflow.com/a/43951900; thanks https://stackoverflow.com/users/239247/anatoly-techtonik)

page-body.html

<div id="diagram_image">
  <svg id="inputSvg" xmlns="http://www.w3.org/2000/svg" xmlns:inkspace="http://www.inkscape.org/namespaces/inkscape" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 120">
    <defs id="defs_block">
      <filter height="1.504" id="filter_blur" inkspace:collect="always" width="1.1575" x="-0.07875" y="-0.252">
        <feGaussianBlur id="feGaussianBlur3780" inkspace:collect="always" stdDeviation="4.2" />
      </filter>
    </defs>
    <title>blockdiag</title>
    <desc/>
    <rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="67" y="46" />
    <rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="259" y="46" />
    <rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="451" y="46" />
    <rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="64" y="40" />
    <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="128" y="66">discovery</text>
    <rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="256" y="40" />
    <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="320" y="66">execution</text>
    <rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="448" y="40" />
    <text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="512" y="66">reporting</text>
    <path d="M 192 60 L 248 60" fill="none" stroke="rgb(0,0,0)" />
    <polygon fill="rgb(0,0,0)" points="255,60 248,56 248,64 255,60" stroke="rgb(0,0,0)" />
    <path d="M 384 60 L 440 60" fill="none" stroke="rgb(0,0,0)" />
    <polygon fill="rgb(0,0,0)" points="447,60 440,56 440,64 447,60" stroke="rgb(0,0,0)" />
  </svg>
</div>

<img id="outputPngImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

<span id="outputPngLinkSpan">
  <a href="">PNG (Save link as..)</a>
</span>

render-script.js

class SVGtoPNGDataURL {
  constructor() {
    this.canvas = document.createElement('canvas'); // Not shown on page
    this.canvas2DContext = this.canvas.getContext('2d');
    this.loaderImage = new Image; // Not shown on page
  }
  
  // Generate PNG data URL from SVG and send it to callback function when ready
  go(svgElement, dataUrlCallback) {
    var svgAsXML = (new XMLSerializer).serializeToString( svgElement );

    this.loaderImage.width = this.canvas.width  = svgElement.clientWidth;
    this.loaderImage.height = this.canvas.height = svgElement.clientHeight;
    var self = this;
    this.loaderImage.onload = function() {
      self.canvas2DContext.drawImage( self.loaderImage, 0, 0, self.loaderImage.width, self.loaderImage.height );
      dataUrlCallback(self.canvas.toDataURL());
    };
    this.loaderImage.src = 'data:image/svg+xml,' + encodeURIComponent( svgAsXML );
  }
};

var converter = new SVGtoPNGDataURL();

var inputSvgElement = document.querySelector('#inputSvg'), // Inline SVG element
    outputPngImage = document.querySelector('#outputPngImage'),    // Where to draw the result
    outputPngLink = document.querySelector('#outputPngLinkSpan a');

converter.go(inputSvgElement, dataUrlCallback=function(dataURL) {
  outputPngImage.src = dataURL;
  outputPngLink.href = dataURL;
});