App.diagrams.net – Custom Default Scale and HTML Export of Diagrams

draw.io

When I export a diagram as html file, is it a way to specify a custom scale of the diagram at the open of the windows (e.g. to fit window)?
Is there any documentation about the embed-static.min.js script embeded in the html file generated?

Best Answer

You can't do this from within draw.io without writing a plugin. But it can be done as a post process.

You will need to add a 'viewBox' attribute to the SVG that draw.io has created. This allows the SVG to be scaled proportionally with CSS like a normal img. And you need to add some basic CSS to limit the SVG to 100% width.

I used one of the standard templates to test this, so I didn't get 'embed-static.min.js'. My file had 'embed.js'. I don't know what difference that makes.

After the 'embed.js' but before the closing </body> tag, add the following:

<style>

/* edit both the mxgraph class and naked svg inside */
div.mxgraph {
    max-width: 100%;
}
div.mxgraph svg {
    width: 100%;
    min-width: 100% !important; /* or whatever you need to override the default */
}

</style>
<script>
var svg1 = document.getElementsByTagName("svg")[0];   // Get the first <svg> element in the document
var att = document.createAttribute("viewBox");       // Create a "viewBox" attribute
att.value = "0 0 1122 662";                           // Set the value of the viewBox attribute
svg1.setAttributeNode(att);
</script>

Where the javascript sets the 'viewBox' with att.value = "0 0 1122 662"; 0 0 starts us in the top-left of the svg container. 1122 is the unscaled width needed to display the full svg, and 662 is the height. This is what provides the aspect ratio.

I had to do a lot of digging through draw.io's g+ support page to find anything on this. But, Julian Moore seems to have done a faire amount of examples.

Also, there are a couple plugin examples that show how to take advantage of the mxGraph API in draw.io. A nice intro to the topic here. (Although, it's weirdly titled "Visio Alternative", the post outlines plugin install, and provides an example to play around with.)

Worth looking at if you have to adapt something for a production setup.

Edit: This answer assumes you were trying to limit the Draw.io diagram to the page. So, the provided example scales down the SVG so no scrollbars are visible and the entire diagram is visible.

Related Topic