SankeyMATIC Manual

Exporting, Publishing, Sharing

Exporting a Diagram as an Image File

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”.

Examples:

(These images were
generated from the
same 70x50 diagram.)

1x scale
Image exported at 1x scale
Size: 70px x 50px
File size: 2.3K

2x scale
Image exported at 2x scale
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.

4x scale
Image exported at 4x scale
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 img tag.

Example: When exporting the above example image at 2x scale, 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 width="70" height="50" src="export-2x.png" alt="Basic Sankey diagram example exported at 2x, displayed/scaled as 1x" />

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:

Original diagram:

Sample Sankey Diagram with ordinary layout

Diagram with no labels:

  • Un-check “Labels & Units” > “Show labels”
Sample Sankey Diagram with no labels

Only Nodes:

  • Un-check “Labels & Units” > “Show labels”
  • Set “Colors” > “Flow Opacity” to 0.0
Sample Sankey Diagram with only Nodes displayed

Only Flows:*

  • Un-check “Labels & Units” > “Show labels”
  • Set “Advanced” > “Node Opacity” to 0.0
  • Set “Advanced” > “Border” to 0px
Sample Sankey Diagram with only flows displayed

Only Labels:*

  • Check “Labels & Units” > “Show labels”
  • Set “Colors” > “Flow Opacity” to 0.0
  • Set “Advanced” > “Node Opacity” to 0.0
  • Set “Advanced” > “Border” to 0px
Sample Sankey Diagram with only labels displayed

* 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.

SankeyMATIC Manual — Index