Diagrams & Flowcharts

Diagrams & Flowcharts

Diagrams are powerful tools that can help teams map out complex systems, illustrate complicated hierarchies, organize ideas, structure websites, plan implementations, and design user flows. 

They’re essential to any project’s success – and a key part of a project’s rhythm and flow at every stage of development and implementation. And, as projects evolve, teams need up-to-date diagrams and flowcharts immediately at hand – for reference, guidance and documentation. 

In the Stencils Library, you’ll find a wide range of Flowchart, UML, Use Case, and ERD Model diagram stencils, all designed to attach quickly to our smart Connectors.

In this article, we’ll explain each of our Diagram stencil categories. We’ll also show you how to add diagram stencils to the page, and how to attach, format and label their Connectors. 

Finally, you’ll learn some tips and tricks, like how to swap out one diagram stencil for another, or expand flows with just a quick click of the Extender arrows.

Diagram Stencil Categories

In the Stencils Library, you’ll find four categories of diagram stencils. With them, your team can create and improvise any kind of diagram:

Flowchart Diagrams

UML

Use Case

ERD Model

To see examples of all these kinds of diagrams, check out our collection of free, curated Diagrams & Flowchart Templates. Use these examples to jump-start your project, understand best-practices, or just to experiment.

---

Adding, Styling, and Naming Diagram Stencils

Just like all Moqups stencils, you can add diagram stencils to the page, as objects, by single click or drag and drop. And, as with other kinds of objects, you can style them by using the Format Panel.

When you type text into any diagram stencil those stencils automatically adopt the text as their name. This makes it easy to identify specific diagram elements in the Outline Panel, especially in complex flow and process diagrams.

 

---

Attaching Connectors in Diagram Mode

Our smart Connectors can be used to connect any Moqups object, stencil or image – not just our dedicated diagram stencils!

To connect any two objects on the page: 

1. Enter Diagram Mode by clicking the Diagram button in the top-toolbar (or press ‘D’) 
2. You’ll immediately see groups of pale blue dots (connecting points) appear around the edges of the objects on the page. 
3. Click on one of these dots, and drag the cursor towards the second object. 
4. As the connector approaches the second object, it will snap and “stick” –  showing that it’s attached. You can connect to one of the connecting points, or to anywhere else on the object’s edge. The connectors remain attached, even as you move, resize or rotate objects.
5. To exit Diagramming mode, just click anywhere on an empty surface on the page (or hit ‘D’ or Esc).

---

Formatting Connectors

Connectors can be used to connect any Moqups object, but they are designed to work – and be styled – in combination with our diagram stencils. New connectors inherit the style of the last connector used on that page.

You can format connectors in Edit Mode, either individually, or as a selection. Clicking on any connector will open the Connector Style section of the Format Panel. 

When you select a single connector, that connector’s name is displayed at the top of the panel. This makes it easy to locate and identify that connector in the Outline Panel.

When you select multiple connectors, the panel displays the number of connectors in that group, in order to help you confirm your selection before applying any style changes or transformations.

You can set your connector’s color, width, stroke-style, and pick from a range of line-styles (orthogonal, orthogonal rounded, curved or straight). You can also choose from a range of start-and-end markers, adjust the connector’s opacity, and add both Drop Shadow and Blur.

Unless you make a change, all the connectors you draw, going forward, will adopt these style settings.

---

Labeling Connectors

An essential component for diagramming is the ability to add labels directly to connector lines. This is especially important for workflow diagrams, where you may need to indicate Yes or No decisions. Labels are also useful for delineating connector lines in complex diagrams, making it easier to identify them – and to navigate.

To add one or more labels to any connector, simply double-click on the connector line. And, once you add a connector label, it will automatically remain attached to that line – and adjust intelligently as you modify and update your diagram.

And you can quickly reuse your labels by cloning them. Copy-and-paste, or just drag a label while holding down the Alt/Option key – just as you would do with any other Moqups objects.

We’ve also designed a terrific feature to speed your workflow: The ability to detach and reconnect labels. Just click and pull any label away from a line; the label will automatically detach and, as you drag it towards a different line, it will seamlessly and intelligently snap into place.

---

Diagram Extenders

Diagram Extenders make expanding your flows as simple as a keystroke, and they work on all diagram stencils.

Selecting any diagram stencil on the page will reveal arrows on all four sides of those objects. Clicking on any arrow will duplicate that object, automatically connect them, and then open the new object’s text-edit mode for quick renaming.

When there is an unlocked diagram stencil immediately adjacent from the one you are ‘extending’, clicking the extenders will automatically connect those two objects. Otherwise, the extender will create a new diagramming object.

---

Using Sticky Containers

Within the Flowchart Diagrams category, the Container stencil is used to create both process and swimlane diagrams, and to group objects in network diagrams.

Because of its specific use cases, the container has some unique formatting features: stickiness and orientation.

You can use containers to group and organize any kind of object, and for any reason – in fact, we encourage you to improvise – but there are three primary use cases that are worth noting here:

---

Replace Diagram Stencils

You can quickly update and replace diagram stencils that are already part of a diagram on the page. To swap out a stencil, just drag the new stencil over an existing one, and drop when the ‘replace’ symbol appears.

Replace works on all Flowchart Diagram stencils, and select Use Case stencils where appropriate.

Paste lists and CSV data in diagram format

Our Paste in Format feature makes it easy to turn your lists and data into instantly populated flowcharts:

1. Copy a list or CSV from your desktop
2. Use Ctrl/Cmd +V to paste that data onto your Moqups page
3. Click the Flowchart button on the Pick a Format modal