User Manual for Gliffy Chrome App

Gliffy is designed to make it easy and intuitive for you to create professional quality flowcharts, diagrams, floor plans, technical drawings and more. While it’s easy to figure out Gliffy on your own, this guide addresses the basics of using Gliffy and will also help you use some of our more advanced features.

 

Getting Started

The free Gliffy Chrome app is an offline app. All diagrams created in the Chrome app are stored locally on your machine and not within Gliffy's servers. Please note, the Chrome app does not have all of the same features and capabilities as Gliffy Online. 

back to top

 

Installing the Chrome App

The free Gliffy Chrome app can be installed from the Google Marketplace listing: https://chrome.google.com/webstore/detail/gliffy-diagrams/bhmicilclplefnflapjmnngmkkkkpfad?hl=en

 

Click on "Free", then you will be asked to confirm if you want to add "Gliffy Diagrams". Click "Add" to accept and install the app. 

back to top

 

Opening the Gliffy Chrome App

Google gives you several ways to open up apps as noted in their help articles: https://support.google.com/chrome_webstore/answer/1054233?hl=en


You can find the item in the store at chrome.google.com/webstore, and click on the Launch App button, or use the Chrome App Launcher to open the app from your desktop. 

 

back to top

 

Document Editor

The Gliffy Document Editor is the heart of the application. The main areas of the Document Editor are: Menu BarToolbarShape Libraries, and Drawing Stage.

 

back to top

 

The Menu Bar

The Menu Bar provides access to the basic commands needed to open and save and your documents.

 

The File Menu lets you Open a .gliffy file saved to your desktop, Save, Save As, Close the diagram, and Export your diagram by saving as JPG or PNG to your desktop. It also allows access to the Document Properties.

*To Print, you must Save as JPG/PNG to your desktop, then print from there

 

The Edit Menu contains standard copy and paste commands, all of which have keyboard shortcuts. Copy and paste are also accessible using the context menu by right-clicking or control+click. You should also take note of the Group and UnGroup commands found here. These commands allow you to combine text boxes, shapes and lines into clusters that can be manipulated as a single object.

The Help Menu gives you access to various help features for Gliffy, including the User Manual, Tips, Rate our App, Shape/Document Shortcuts, and our EULA. 

The Drive icon gives you information about linking up a Gliffy Online account.

Please note, you cannot currently link the offline Chrome app to Drive, but we do provide you with instructions for setting this up with a trial or paid Gliffy Online account

 The Profile/silhouette figure allows you to update your account details (name and email). 

 

back to top

 

The Toolbar

The Toolbar lets you select tools to create lines, shapes, text and more. 

 

  1. Undo/Redo
  2. Group/Ungroup
  3. Bring to Front/Send to Back
  4. Free Text Tool
  5. Ellipse/Rectangle Tool
  6. Connector/Straight Line Tool
  7. Pointer
  8. Pan
  9. Zoom Level
  10. Zoom in/Zoom out
  11. Drawing Guides
  12. Show Grid
  13. Snap to Grid
  14. Snap to Grid

back to top

 

The Shape Library

There are various Shape Libraries available to use located to the left of the Drawing Stage. Click into the various libraries to expand them and reveal the shapes available. 

back to top

 

Customizing and Managing the Shape Library

Clicking on Edit Sidebar will open up the shape library dialog which will allow you to customize what shape libraries you have shown. 

 

Uncheck the libraries you do not want to show, then click Okay to apply your changes. 


You can also click the small arrow next to the Edit Sidebar button to close/minimize the Shape Libraries. Click the arrow again to have them show. 

 

back to top

 

The Drawing Stage

The Drawing Stage allows for a blank slate where you build your diagrams. Use shapes pulled from the Library and elements you've drawn using the Toolbar to create flowcharts, diagrams, schematics, wireframes, floor plans or whatever else you desire.

back to top

 

Document Properties

You can find the properties to change the page or document under File->Document Properties, located in the Menu Bar at the top left of Gliffy.

 

From here you can control the basic setup of your diagram. Define your page size in pixels and you’ll see thin lines that define your document boundaries (5000 x 5000 pixels is the default and the max). You can also select your diagram's background color from here and select whether or not to Export the Border.   

back to top

 

Drafts

Occasionally you may see a Draft message appear in the upper-right corner of your diagram. Draft messages appear when the system detects that it may have work that was left unsaved. These ensure that no work is lost inadvertently.

 

You can Preview Draft to see if it is a version you want to keep, Load Draft (this will override current draft in the editor), or Discard the Draft

back to top

 

Gliffy Basics

back to top

 

Adding Elements to the Drawing Stage

To begin, click the “Flow Chart” tab in the Library and click a “start/end” shape and drag it onto the Drawing Stage, now drop the shape on the drawing stage (Note how if you let your mouse hover over a Library shape you’ll see the shape’s title appear).

While that shape is still selected, type “Start”—the text should appear directly inside the shape. Now, click the  icon in the Toolbar. Use your mouse to draw a rectangle directly onto the drawing stage: click, drag and release. While the rectangle is still selected, type “End”. Finally, click the  icon in the Toolbar. To draw a connector between your “Start” and your “End”, click on the start shape and drag the end of the line to the end shape.

While we’re having fun, go ahead and click on the  icon then click on your new flowchart to zoom in. You can zoom back out using the  icon or by choosing your magnification level from the drop-down menu in the Toolbar. You can also right click on the drawing stage and select one of the zoom settings from the context menu.

back to top

 

Moving and Manipulating Elements

Whether elements on the Drawing Stage come from the Shape Library or whether they're drawn using the Toolbar, you can move and manipulate them the same way. If you click on an element, you can drag and drop it where you choose on the Drawing Stage. Each shape (like the ‘start’ and the ‘rectangle’ in this example) will display its boundary box when selected. You can use the connection points (little squares in the boundary box’s corners and midpoints) to extend the dimensions of the shape. Just click and drag them. To rotate a shape, click and drag over the curled arrow that you’ll see above the shape.

Lines and connectors are slightly different. Instead of boundary boxes, lines and connectors have small circles defining each endpoint and, in the case of connectors with more than two segments, one to control each middle segment. If you click on the line or connector anywhere but on these circles, you’ll move the entire line without changing its shape. Clicking and dragging the circles will move only that portion of the line or connector.

back to top

 

Setting Properties

The Properties Panel for Gliffy gives you the power to change properties on a shape, line or group, quickly and with little hassle. No more hunting around the application interface to change a simple property, now it’s right there with one easy click. When you add or select and object or group of objects on the stage, a small blue button will appear nearby. Click the  button on a shape to display different property options for that object or group.

 

From here you can change the color of your shape, border color, border thickness, gradient, drop shadow, change the X,Y coordinates of your shape, change the width/height, rotate the shape a certain degree, Lock Aspect Ratio, and Lock Shape.

You can easily hit the TAB or ENTER key to quickly commit the values of X, Y, Width, Height or Rotation. 

If you click on a line or connector, your Properties Panel will look like this 

You can do the following quick manipulations within the Properties Panel:

 

  • you can change the arrows at the beginning and the end of the line independently
  • if you have a selection that contains line, shapes and text, you can now change properties of each object type independently via the Properties Panel, without having to select each object type separately.

back to top

 

Saving Documents

The only thing left to do now is to save your document. You can save using the “File” menu in the Menu Bar or use the shortcut Ctrl+S. All diagrams created in the Chrome app are saved locally to your desktop. Make sure to save your diagram with a .gliffy extension. 

Through the File Menu, you’ll also have the option to “Save As”. Many customers use this to create another diagram very similar.

back to top

 

Evenly Distributed Shapes and Alignment

You can align and evenly distribute a group of shapes on your diagram. To do so, select the shapes you’re working with, click the blue properties menu that appears next to your shapes, and then use the various Align and Distribute buttons to make them distributed the way you want. 

 

 Align Options

  1. Align left
  2. Align center
  3. Align right
  4. Align top
  5. Align middle
  6. Align bottom

Aligning takes all the selected shapes and aligns them with the shape that is furthest to the left, center, right, etc. depending on what you select. 

 

Distribute Options

  1. Distribute vertical center
  2. Distribute horizontal center

Distributing takes all the selected shapes and distrubtes them evenly either vertically or horizontally depending on what you select. 

back to top

 

Working with Shapes and Lines

You can add shapes to the Drawing Stage in two ways:

  • Draw them with the Ellipse or Rectangle Tool or
  • Drag them in from the Shape Library. 

You can draw connectors and lines using the Connector Tool and the Line Tool.

back to top

 

Using the Ellipse and Rectangle Tools

The most basic way to draw shapes is using the Ellipse and Rectangle Tools in the Toolbar . These tools work identically; one draws a shape with rounded corners and the other draws a shape with right angle corners.

There’s no trick to using either tool. Just select the tool you want from the Toolbar and draw by clicking, dragging and releasing. The first place on the Drawing Stage that you click defines the first corner of the shape’s boundary box. As you drag your mouse with the button depressed, the box grows. When you release the mouse button, the ellipse or rectangle is created to fill the boundary box you’ve drawn.

back to top

 

Using the Shape Library

If you’re using shapes from the Shape Library, it’s even easier. First find the shape you want. Next click it then drag it onto the Drawing Stage and drop it at the destination.

back to top

 

Moving and Manipulating Shapes

As explained in Gliffy Basics, any shape can be resized, rotated or moved once it’s been placed upon the Drawing Stage. You can use the little squares that appear in any selected shape’s boundary box’s corners or midpoints to extend the dimensions of the shape. Just click and drag them. To rotate a shape, click and drag the curled arrow that you’ll see above the selected shape.

Also worth noting is the ability to lock a shape to its current dimensions. To do this mark the “Lock Shape” box in the shape’s Properties Panel that appears to the right of the shape. 

When you lock a shape, the little squares around the boundary box turn red to indicate the shape is fixed. You will not be able to change the dimensions, or other properties, of the shape until you unlock the shape.

back to top

 

Setting Shape Properties

When you select a shape, you can edit its properties using the Properties Panel . At the top of the shape properties section, you will see several icons that control the shape’s appearance.

  • Shape Color
  • Border Color
  • Border Thickness
  • Gradient
  • Drop Shadow

The   icon lets you choose what color fill you want the selected shape to have.

The  icon controls the color of the shape’s border.

The  icon determines how thick the shape’s border is, or whether it has a border at all.

The  icon allows you to turn the gradient on or off and the fill color will transition from lighter to darker from top to bottom.  

The  icon allows you to add shadows to your shapes that suggest depth. 

If you find your mouse isn’t giving you the level of control you want, you can also use the Size, Position and Rotation properties to specify the exact dimensions, location and angle of rotation of the selected shape. The position coordinates correspond to the position of the upper left corner of the shape’s boundary box.

On the right side of the Properties Panel, you’ll also see check boxes for “Aspect Ratio" and ”Lock Shape”. Marking the “Aspect Ratio” box forces the selected shape to retain its current shape, but not its size. You can still make an ellipse or rectangle larger or smaller, but it will hold its aspect ratio. “Lock Shape” not only secures the aspect ratio, but also secures the size, color and other properties of the selected shape. 

back to top

 

Drawing Guides

Gliffy provides guides to help you line up your shapes with other shapes. To turn on the Drawing Guides, click on the  button in the Toolbar. Now, when you drag a shape from somewhere on the stage or from the shape library, it will detect if another shape in it’s vicinity has a matching edge or center point. If there is a matching edge, the shape you are dragging will “snap” to the other shapes edge, and a green line will appear to show the alignment. The same goes with a center point, except the line will be red. See the image below as an example of a left edge and center point alignment on the X axis.

back to top

 

Group/Ungroup

If you have carefully positioned several elements in relation to each other, and you want to be able to move and manipulate them as if they were a single object, you can add them to a Group:

  1. Select the shapes.
  2. Click the Group button in the toolbar.

To break up the group and treat each element as an individual object again, select the group and click the Ungroup button.

back to top

 

Using the Connector and Line Tools

The Connector and Line Tools work identically to each other. 

The Connector Tool lets you draw a line forced to turn at right angles where necessary and the Line Tool draws a straight line between whichever endpoints you select, with no turns. To draw either a connector or a line, select the appropriate tool from the Toolbar, place your cursor where you want your connector or line to start and click and drag to your desired endpoint.

back to top

 

Moving and Locking Lines and Connectors

Once you’ve drawn a line or connector you’ll notice a characteristic about each endpoint: if it’s a connector with more than two segments, each middle segment has a little circle. These circles work like the squares around the boundary boxes of shapes. If you click and drag on one of the circles, you’ll only adjust that segment of the line/connector. If you click anywhere else, you’ll move the whole line.

Frequently, you’ll want to connect the end of a line to a shape so that if the shape moves, the line will stick to the shape. When you select a line, you’ll see that all the shapes in your diagram become flanked with little ‘ + ‘ symbols. There should be one in the middle of each shape as well. These ‘ + ‘ symbols are standard connection points. If you drag the endpoint of a line or connector to one, you’ll see the little circle turn red. That indicates the line is locked to the connection point. From then on, if you move the shape, the line will remain connected.

back to top

 

Setting Line and Connector Properties

When you select a line or connector, you can change its properties using the Properties Panel (just click the blue button next to the line end, see image below). You can change:

  • Line endings (arrow types)
  • Line Color
  • Line Weight
  • Line Style
  • Line Type

If you select any number of lines or connectors at one time, you can set properties for all of them at once.

 

Use the  or  icon to add directionality to your line (for most lines). The direction of the arrows in this menu point translates as ‘left = line start point’ and ‘right = line end point’. So if you drew your line from right to left, and select the arrow that points to the right, you’ll see your line will get an arrow pointing to the left! If you consistently draw your lines/connectors from start to end, this will make adding arrows much easier.

The  icon allow you to select a color for your connector or line. 

The  icon allow you to change how thick your lines are in pixels. 

The  icon lets you choose from a selection of different patterns for the selected line, from finely dotted to solid.

The   icon allows you to select a type of line or connector. The first choice is a straight line. The next three are connectors: right angle, rounded corner,and Bezier Curve. 

back to top

 

Entity-Relationship arrows

You can adjust your Entity-Relationship arrow ends to make the appropriate shape for your needs. 

If you don't see a pre-made ER arrow you would like to use, pull any of them onto the canvas then click into the blue, shape properties box. 

 

Click into the line properties and you will see a drop-down for both arrow ends. You can choose from here what type of shape you want to create. 

back to top

 

Bring to Front / Send to Back

As your document becomes more complex, you may find you need to control which elements are in the foreground and which are in the background. You can do this by selecting the desired element *be it a shape, a line, or a text box) and using the  icon to bring the selected element to the front or the  icon to send it to the back. In Gliffy Online, you can also send elements to the front or back by selecting them and right clicking to select these options in the context menu. 

back to top

back to top

 

Themes

You can choose to apply color themes to your diagram for quick and easy styling. Clicking the Diagram Themes button from the Toolbar will open up the Themes box on the right side of your diagram.   

 This moveable box can be moved anywhere on your canvas. 

 

Hovering over each theme creates a preview of it applied to the diagram on your drawing canvas. Clicking on the theme applies it to your diagram. To undo an applied theme, select Edit->Undo, or Ctrl+Z.

Completed diagram with no theme: 

 

Diagram Theme applied: 

Please note that themes only work on flowchart and basic shape types. 

back to top

 

Swimlanes

The Swimlane shapes can have up to 12 lanes added to them. You can add additional swimlanes by dragging a swimlane shape out to the editor, then click the blue shape properties box. 

Once you click into the shape properties, you can select the "Number of swimlanes" drop-down menu and select how many lanes you want it to have up to 12. 

back to top

 

Working with Text

There are two ways to add text to your document. Using the Text Tool lets you create text boxes, which can be moved and resized independently from other document elements. You can also enter text directly into elements which is easier, but offers less control.

back to top

 

The Text Tool

Selecting the  icon from the Toolbar allows you to draw a text box so you can immediately start typing in text. Text will automatically wrap at the end of a line to remain within the box you’ve drawn. If you enter more lines than will fit in the box, the text will extend above and below the borders of the text box.

When you’re done entering text, you can move, resize or rotate a text box just as you would any other shape. If you want to edit the text inside the text box, just double-click on it, you’ll notice a flashing cursor indicating you can edit the text.

back to top

 

Entering Text in Elements

Sometimes you’ll want to enter text directly into a shape or over a line. 

To enter text this way, just select the element you want, by double-clicking and start typing. You can edit this text at any time by double clicking on the element. To completely remove text from an element, double click the element, highlight the text and click delete.

back to top

 

Setting Text Properties

Regardless of how you’ve entered text, you can edit the properties of selected text in the Properties Panel . If you select a text box, an element with text typed over it, or any combination of the two, the text properties section will show up in the Properties Panel.

 

Here, you can choose between the five current available fonts (Arial, Helvetica, Courier, Times, and Verdana), change the font size and color, make text bold, italic and/or underlined, and change the alignment of the text. Hyperlinks are not currently available in the Chrome app. 

back to top

 

Working with Images

To add images to your diagram, drag and drop PNG or JPG images directly to the drawing canvas. 

back to top

 

Document & Shape Shortcuts

As you get more proficient using Gliffy, you’ll find that the built in Document & Shape Shortcuts speed up your work. You can see a full list of keyboard shortcuts at any time by clicking the “Help” button in the Menu Bar. 

back to top

 

Exporting Documents

You have access to export your diagram through the File menu in the Menu Bar. Select File->Save as JPG/PNG. You will need to save these to your desktop. Once exported, you can print from your desktop. 

  

If you use File->Save As to save to your Desktop, you will need to associate a .gliffy file type to the file to be re-opened by the Chrome app. 

*There is no direct print option in the Chrome app. You must export as JPG/PNG and print from your desktop

 

back to top