Exporting, Publishing, Sharing
Exporting a Diagram as an Image File
Once you are satisfied with your diagram, you can export it as a .PNG image file.
A PNG image can be used in nearly any graphics program and for many purposes—slide decks, websites, printed material, etc.
Using the Export controls on the Build screen (shown at right), you can choose one of three resolutions for your output: “1x” or “2x” or “4x”.
(These images were
generated from the
same 70x50 diagram.)
Size: 70px x 50px|
File size: 2.3K
Size: 140px x 100px|
File size: 4.6K
Choose your “Scale” depending on where and how you want to use the image:
“1x” scale = Low-resolution
1x scale can be appropriate when:
- Keeping the image file's size very small is crucial to you.
- You do not expect the image to be shown on a high resolution screen.
(On a hi-res screen the image will appear pixelated or blurry.)
This size is not well-suited for use in a Web page; see below for more details.
“2x” scale = “Retina”
2x scale is best for publishing images in web pages for both high and low resolution screens. (See “Publishing Images of Diagrams on the Web” below.)
“4x” scale = Print-worthy
A 4x-scale image is suitable for printed output. It will appear sharp even when printed at high resolution.
Size: 280px x 200px|
File size: 9.3K
Publishing Images of Diagrams on the Web
To make your diagrams look sharp even on modern high-resolution screens:
- Start with a high resolution source image.
- Scale it down by using the original dimensions of the image in your IMG tag.
An ordinary-resolution screen will display its best approximation of it, which is adequate.
Higher-resolution screens will use the extra information to render the diagram sharply.
All of the diagrams on this website are published this way (except for the examples above).
If the diagrams in the Gallery look sharp enough on your screen, then this approach will work for your web pages too.
SankeyMATIC aids you during the export process by providing you with the correct dimensions to use in your
Example: When exporting the above example image at 2x scale, SankeyMATIC showed this helpful hint:
Here is a complete
img tag and the resulting sharp image (view on a Retina-capable device to see the effect):
<img width="70" height="50" src="export-2x.png" alt="Basic Sankey diagram example exported at 2x, displayed/scaled as 1x" />
On a retina screen, this still looks acceptably sharp, even when zoomed-in.
Hiding Diagram Elements
There may be times when you would like to export specific subsets or 'slices' of a diagram for external editing.
Your options and how to achieve them are as follows:
* Note: When hiding Nodes from display using the Node Opacity control, SankeyMATIC's image export currently leaves some faint marks at the top & bottom of each Node's position.
You will likely want to erase these from the output.
This may be fixed in a future version.