SankeyMATIC Manual

Exporting & Publishing

Manual Sections: The Basics: Nodes, Flows & Colors
Labels & Units
Exporting & Publishing
Flow Cross-Check
Syntax Reference
Scaling Diagrams for Comparison
Unusual Facts & Settings

Export Controls

Screenshot of SankeyMATIC's Export controls

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.

Choose your resolution depending on where and how you want to use the graphic.


Exporting at 1x scale: Basic

1x scale is best when:

  • Keeping the file 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.

Exporting at 2x scale: Retina

2x is best for publishing images in web pages for both high and low resolution screens. (See below.)

Exporting at 4x scale: Print

4x is best for printable output.

Example Export

This is the same 70 x 50 diagram...

Exported at 1x:
70 x 50 pixels
File size: 2.3K
Image exported at 1x scale
Exported at
2x:
140 x 100 pixels
File size: 4.6K
Image exported at 2x scale

Exported at 4x:

280 x 200 pixels

File size: 9.3K

Image exported at 4x scale

Publishing diagrams on the Web

To make your diagrams look sharp even on high resolution screens (meaning Retina/HiDPI devices):

  • 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 those above).

If the Gallery looks good enough for you, then this approach will work for your web pages too.


SankeyMATIC aids you during the export process by reminding you of the correct dimensions to use in your IMG tag.

Example: When exporting the above example image at 2x, SankeyMATIC showed this helpful hint:

Screenshot of Export's help for image dimensions

Here is a complete IMG tag and the resulting sharp image (view on a Retina-capable device to see the effect):

<img src="export‑2x.png" width="70" height="50" alt="Exported at 2x, scaled to 1x" />

Exported at 2x, scaled to 1x

On a retina screen, this still looks acceptably sharp, even when zoomed-in.