Finegram User Guide

Even though the goal of Finegram is to be as intuitive and easy to use as possible, it also contains a lot of features that you might miss if you are not aware of them.

This document lists every feature available in the app, along with pro tips and other useful information.

I highly recommend reading through the document once, so you’ll be aware of all the capabilities in the app. It only takes 5-10 minutes.

Note: This page contains up to 5MB of lazy-loaded video files. They won’t load until you scroll to them.

Note: You can print this page to save it as a PDF (without the videos, of course).

Installing Finegram

You can download Finegram at https://finegram.com

Files

Opening and saving files

Finegram saves and opens .svg files
You can use the file extension .finegram.svg, but it’s not mandatory
On Mac, you can open an .svg file in Finder with Finegram via right-click -> Open with -> Finegram.

File format

Finegram diagrams are ordinary .svg files
They contain Finegram-related metadata in hidden SVG comments
Example of what a diagram with a single layer looks like:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60" viewBox="190 220 120 60">
  <!-- finegram:i=layer-1&t=s&st=rect&sx=190&sy=220&sw=120&sh=60&sba=%23FFFFFF&sbo=%234B5563&stn=&stl=%231F2937 -->
  <rect x="190" y="220" width="120" height="60" fill="#FFFFFF" stroke-width="1" stroke="#4B5563" />
</svg>

You can delete the  comments, and the file will still work as a standalone SVG. However, you won’t be able to edit it with Finegram anymore.

Arranging layers

Inserting layers

Click a layer icon from the sidebar to insert a new layer at the center of the viewport
You can also use keyboard shortcuts to achieve the same thing:
To insert a Rect layer, press ⇧R
To insert a Rounded layer, press ⇧D
To insert a Line layer, press ⇧L
To insert an Arrow layer, press ⇧W
To insert an Area layer, press ⇧A

Drawing layers

You can activate "draw mode" for a layer type by using the appropriate keyboard shortcut:
To start drawing a Rect layer, press R
To start drawing a Rounded layer, press D
To start drawing a Line layer, press L
To start drawing an Arrow layer, press W
To start drawing an Area layer, press A

In draw mode, click and hold to draw a new layer anywhere

Alternatively, simply click once anywhere to plop a new layer at that position

Selecting layers

Click on a layer to select it

On Mac, hold ⇧ or ⌘ to append to or omit from the selection
On Windows, hold ⇧ or Ctrl to append to or omit from the selection

Click the canvas and drag to select layers within an area

On Mac, hold ⇧ or ⌘ to invert the selection
On Windows, hold ⇧ or Ctrl to invert the selection

Selecting layers (advanced)

Under the Select toolbar you can find more specific selection actions, such as:
Select all
Select inverse
Select by different layer types
Select layers with the current visual style

Duplicating layers

On Mac, press ⌘D to duplicate layers
On Windows, press Ctrl D to duplicate layers

On Mac, hold ⌘ and drag to duplicate selected layers
On Windows, hold Ctrl and drag to duplicate selected layers

Deleting layers

On Mac, press Del to delete layers
On Windows, press Backspace to delete layers

Moving layers

Drag a layer to move it around

You can drag multiple layers simultaneously

By default layers snap to a 10x10 grid
On Mac, hold ⌥ to drag without snapping
On Windows, hold Alt to drag without snapping

In the Position panel, you can set precise layer coordinates
To nudge selected layers by a relative amount, see Nudging layers

Nudging layers

Use the arrow keys ↑ ↓ ← → to nudge layers by 1 pixel at a time

Hold ⇧ to nudge 10 pixels at a time

In the Position panel, nudge layers by a relative amount via prefixing the value with =+ or =-
For example, to move all selected layers 50 pixels to the right, type =+50 to the X field

Resizing layers

Click and drag a resize anchor of a layer to resize it
Hold ⇧ to keep the aspect ratio

Use the following keyboard shortcuts to resize layers:
On Mac, use ⌘↑ ⌘↓ ⌘← ⌘→
On Windows, use Ctrl ↑ Ctrl ↓ Ctrl ← Ctrl →

Hold ⇧ to resize 10 pixels at a time

Aligning layers

Use the alignment buttons to align layers in relation to each other

Keyboard shortcuts for horizontal alignment:

On Mac, press ⌥A (left) ⌥H (center) ⌥D (right)
On Windows, press Alt A (left) Alt H (center) Alt D (right)

Keyboard shortcuts for vertical alignment:

On Mac, press ⌥W (top) ⌥V (middle) ⌥S (bottom)
On Windows, press Alt W (top) Alt V (middle) Alt S (bottom)

Changing layer order

You can move layers upwards in the stack to make them appear on top of nearby layers
You can move layers downwards in the stack to make them appear under nearby layers
On Mac, press ⌥↑ to move layers upwards (closer) in the stack
On Mac, press ⌥↓ to move layers downwards (farther) in the stack
On Windows, press Alt ↑ to move layers upwards (closer) in the stack
On Windows, press Alt ↓ to move layers downwards (farther) in the stack

Use the below shortcuts to instantly move layers to the top or the bottom of the stack:
On Mac, press ⇧⌥↑ to move layers on top of all other layers
On Mac, press ⇧⌥↓ to move layers below all other layers
On Windows, press Shift Alt ↑ to move layers on top of all other layers
On Windows, press Shift Alt ↓ to move layers below all other layers

Copying and pasting layers

You can copy and paste layers using the standard copy and paste keyboard shortcuts of your operating system
On Mac, use ⌘C and ⌘V to copy and paste layers
On Windows, use Ctrl C and Ctrl V to copy and paste layers
When you copy layers, the data inserted into your syste, clipboard is actually just plain SVG code. You can paste it into e.g. a code editor if you wish.

Shape layers

Changing layer colors

In the Colors panel, you can set Fill, Border and Text colors
You cannot set the text color to be transparent

Editing text

In the Text panel, you can edit the text displayed in the layer

You can double-click a layer to edit its text in-place

You can press Enter to edit the selected layers’ text in-place

Notes about text editing:

You can edit text in multiple layers simultaneously
Rich-text formatting is not supported (e.g. bold or italic text, or hyperlinks)

There are several keyboard shortcuts for exiting text editing mode:

On Mac, press Escape or ⌘Enter
On Windows, press Escape or Ctrl Enter

Text align

Use the alignment buttons to change text align

Changing corner style

In the Shape panel, you can change the corner style between Sharp and Rounded

Line layers

Changing line color

In the Colors panel, you can set the line color
You cannot set the line color to be transparent

Changing line ends

In the Line ends panel, you can change the line end style
The left side corresponds to the leftmost point of the line, and the right side to the rightmost

You can use the button in the middle to swap the left and right options

Linking line to a layer edge

While dragging a line end and hovering a Shape or an Image layer, line anchors appear at the edges of the hovered layer
Drop the line end on top of one of these anchors and it will be linked to that point
Line anchors exist every 10px along the side of the hovered layer, so it is easy to precicely link multiple lines into one layer

Drawing a line from a layer edge

While hovering a Shape or an Image layer, line anchors appear at the edges of the hovered layer
Click and drag from one of these anchors to start a new linked line from that point
Line anchors exist every 10px along the side of the hovered layer

Area layers

What are Area layers

Use case and traditional methods:

Often when diagramming, you want to contain a set of layers inside a larger visually distinguished area
In most diagramming apps, you can achieve this by creating a rectangle shape and moving it to the bottom of the layer stack, and optionally locking it to prevent accidental changes
This works, but for such a common use case it is often cumbersome to do manually

In Finegram, there is a special Area layer type which has special functionality to make this use case much easier:

Area layers stay behind other layers automatically
Area layers are not selected when you draw a selection area, unless the Area layer is completely enclosed in the selection area
Area layers are not selected when you click inside them, except if you click their edge specifically

Do you know how to make Area layers even better? Don’t hesitate to send a suggestion!

Selecting Area layers

You can select an Area layer by clicking its edge

When selecting layers in an area, Area layers become selected if they are completely enclosed within the selection area

Changing layer colors

In the Colors panel, you can set Fill and Border colors

Editing text

In the Text panel, you can edit the text displayed at the top of the layer

You can double-click the layer edge to edit its text in-place

You can press Enter to edit the selected layers’ text in-place

Notes about text editing:

You can edit text in multiple layers simultaneously
Rich-text formatting is not supported (e.g. bold or italic text, or hyperlinks)

There are several keyboard shortcuts for exiting text editing mode:

On Mac, press Escape or ⌘Enter
On Windows, press Escape or Ctrl Enter

Text align

Use the alignment buttons to change text align

Text layers

Using text layers

Text layers are Shape layers with no fill and no border, and with Fit to text enabled and Padding disabled.

See Shape layer related topics on how to edit text and change colors:

Changing layer colors
Editing text

Image layers

Pasting images to the diagram

After copying an image to the clipboard, simply paste it into the diagram using the standard paste keyboard shortcut of your operating system
On Mac, use ⌘V
On Windows, use Ctrl V

Dragging images to the diagram

You can drag an image file directly into the diagram

Supported image formats

The following image formats are supported:

image/png
image/jpeg
image/gif
image/svg+xml

Notes about images:

Images are embedded in the SVG file as base64 encoded strings
Each unique image you add into the diagram increases its filesize and the increase can be dramatic depending on the image size
It’s recommended to use small vector SVG files whenever possible, because they are generally small while allowing for unlimited scaling up
When using raster formats (e.g. PNG, JPEG or GIF) it’s recommended to first resize them to as small as possible before adding them to the diagram
Finegram optimizes images that are used multiple times in the same diagram by only including their base64 encoded source once in the SVG

Image browser

Finegram’s image browser contains a library of commonly used images, such as 1,000+ icons for AWS, Azure, GCP and Kubernetes architecture and 2,000+ generic icons from the Material iconset.

Press the letter I or click the sidebar button to open the image browser
Click on an image to add it to the diagram
Alternatively drag an image to the diagram

Adding your own images:

From the toolbar, click Help and then Show FinegramImageLibraries in Finder/Explorer
Copy your custom images to the user directory
Restart Finegram for the images to become available

Notes about FinegramImageLibraries:

On Mac the path is ~/Library/Application Support/Finegram/FinegramImageLibraries
On Windows the path is %APPDATA%/Finegram/FinegramImageLibraries
Users should add any custom images to the user subdirectory
The subdirectories default-aws, default-azure, default-gcp, default-kubernetes and default-material-icons are managed by Finegram and changes to them by the user will be overwritten

Diagram properties

Background

In the Diagram panel, you can set the Background color
Leave it empty for a transparent background
Note that the background grid visible in the editor is not included in the exported SVG

Padding

Change the Padding value if you want more or less whitespace at the edges of the diagram when it is exported.

Watermark

Watermarks are a built-in way to include an image, such as your company logo, at the bottom corner of the exported diagram.

In the Watermark panel, you can select an image to use as watermark
Alternatively drag an image to the drop zone
You can also drag an image from the Image browser
After selecting an image you can customize the Margin, which is the vertical spacing between the diagram contents and the watermark
You can also customize the Width and Height of the image
For information about supported and recommended image formats see Supported image formats