The following types of stencils have specific and unique formatting controls:, Flowchart Diagram Stencils, Smart Shapes, Charts, and Grids and Tables.
Some of these objects have specific controls that open automatically in the Format Panel when you click on the object.
Others have options that can be controlled directly on the page (Charts), or within the object itself (Grids)
This article will explain each of these object types, and show you how to format them.
Flowchart Diagram Stencils and Connectors
Our more specialized categories of diagram stencils (UML, Use Case, and ERD Model) – can be formatted and connected like Flowchart Diagram stencils. The only difference is that, by design, the dedicated Connector Points and Replace function have been removed from these types of stencils.
With Flowchart Diagram stencils, you can create – and improvise – any kind of diagram. These stencils have their own dedicated “Flowchart Diagrams” category in the Stencils Panel.
Flowchart Diagram stencils are formatted like other stencils but have two special features, Replace and Diagram Extenders, explained further below.
Flowchart stencils are designed to work – and to be styled – in combination with Diagram Connectors. Connectors can also be used to connect any Moqups object, stencil or image – even one of your own templates! After you style a connector, any subsequent connector you create will automatically adopt that style – until you change it again.
Using Diagram Connectors
To connect any two objects on the page, enter Diagram Mode by clicking the Diagram button in the top-toolbar (or press ‘D’) and you’ll immediately see groups of pale blue dots (connecting points) appear around the edges of the objects on the page. You can connect to one of these dots – or to anywhere else on the object’s edge.
To draw a line between any two objects, click on one of these dots, and drag the cursor towards the second object. As the line approaches a connecting point, it will snap and “stick” – showing that it’s attached. And, it will remain connected, even as you move, resize or rotate objects!
To exit Diagramming mode, just click anywhere on an empty surface on the page (or hit ‘D’ or Esc).
Formatting Diagram Connectors
Setting the Connector Style Proactively:
You can set the default style of connectors, proactively, just as you would with any other object – with the Default Styles options in the Format Panel. The Default Styles categories, including the Connector category, appear in both Edit and Diagram mode when no object has been selected.
Here, you can set your connector’s color, width, and stroke-style, pick from a range of line-styles (orthogonal, orthogonal rounded, curved or straight), and choose your start-and-end markers. Unless you make another change, all the connectors you draw going forward, will adopt these default style settings.
Formatting Connectors Retroactively:
In Edit Mode, you can format connectors, retroactively, 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.
Just as in Diagram Mode, you can set your connector color, width, and stroke-style, pick from a range of line-styles (orthogonal, orthogonal rounded, curved or straight), and choose your start-and-end markers. But, in Edit Mode, you have the additional options of adjusting connector opacity, and add both Drop Shadow and Blur.
Replace Flowchart Diagram Stencils
You can quickly update and replace any Flowchart 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.
Selecting Flowchart Diagram, UML, or ERD Model stencils 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.
Smart Shapes are simple stencils that have specific formatting capabilities. They include the Polygon, Star, Triangle, Arrow, and Wedge stencils. Each Smart Shape stencil has Custom Handles that help you get the exact shape you need – without ever taking your hand off the mouse.
You’ll find Smart Shapes in the Stencil Library under the Shapes category. Once you’ve added it to the page, just click on the tiny blue dot(s), and drag – in a variety of directions – to quickly and intuitively change the properties of the shape. You can make a variety of beautiful shapes without the need for sliders, complicated bezier curves, or complex drawing tools. Just click and drag.
Callout and Note Stencils
Callouts are great for mocking up UI elements like tooltips and popovers menus. However, used in combination with Note stencils, they can also play an essential part in task, product, and project management – as a way of annotating ongoing designs.
For instance, your team might use...
- Notes to explain and delineate basic page and UI rules
- Callouts to point towards actionable items – areas of the page that need the team’s attention
- Comments for ongoing conversations about your project’s requirements and specifications
The Note stencil is a text-based stencil and can be formatted in much the same way, except for color selection. It has its own special Note Style section in the Format Panel that lets you select from a preset color palette that mimics sticky-notes – making Notes instantly recognizable on any design.
The Callout stencil is both a text-based and a Smart Shape stencil. As such, it can be styled in the Format Panel and then, using the Custom Handle, your can quickly expand the width of its ‘tail’, and then drag it to any length and in any direction.
Charts and graphs are useful in all kinds of apps, websites and presentations.
Because data visualization makes complicated information easier to parse, it can help reveal new and unexpected patterns. And, in turn, these patterns can clarify key business drivers, help analysts identify urgent business questions, and provide actionable insights.
That’s why presenting data graphically has become such an essential and everyday part of business analytics – especially in the form of Business Intelligence dashboards.
With our Charts stencils, you can create stunning visualizations and quickly mockup realistic BI dashboards using bar charts, pie charts, line charts, area charts, column charts, donut charts, and more.
You’ll find a full range of charts and graphs in the Charts category of the Stencils panel. Just drag and drop, or double-click, to add one to your page. Then, entering your data values manually, or by pasting the numeric (CSV) values directly from Excel or Google Docs.
To style a Chart stencil:
- Select the stencil to reveal the Chart Style section of the Format Panel.
- Pick the visualization that best suits your data, no matter which stencil you originally chose, from the Chart type options.
- Choose from a range of pre-set Chart theme colors; if you want to change the colors, you can do this is the Chart Data Editor (see below).
- Depending on the Chart type you can customize a range of options including:
- Applying and styling a Grid
- Creating and locating a Legend
- Applying and customizing the Value axis (as Line, Ticks or Labels & placement)
- Applying and customizing the Category axis (as Line, Ticks or Labels & placement)
- Adjusting the Plot and Padding
- Styling and coloring the Text
And, as with any other stencil, you can also apply a Drop Shadow or Blur.
To format, label and change the content of a Charts Stencil:
- Double-click on the selected stencil to open the Chart Data Editor at the bottom of the app
- Edit the Chart like a spreadsheet and the visualization will update as you adjust the cell values.
- Click on the Legend (Series) or Category cells to rename them.
- To Insert or Delete columns and rows, hover over Legend or Category names and the drop-down menu arrow will show your options.
- To customize the Chart’s colors individually, click on the color-picker button of any row on the leftmost side of the data editor; you can customize colors even if you have chosen a Chart theme in the Format Panel.
Grids and Tables
Syntax-based stencils take the form of tables, lists and menus. You’ll find them in the Common, Navigation, and Legacy categories.
Syntax-based stencils come with a default ‘syntax’ text that controls the formatting options. When you customize that text, the content within each cell, as well as the number of columns, rows, and list items will adjust automatically.
The Grid Style section of the Format Panel lets you choose Grid Options for header and row coloring, and for the addition of a Sortable drop-down arrow in the header. You can also choose to make Cell Borders visible or invisible, and apply customizable Cell Padding.
The Grid stencil also has its own unique Fills and Strokes section where you can choose colors for headers and rows.
Questions & Answers
How do I add icons to Grid stencils?
Icons cannot be added to Grid stencils.
As a workaround, create your own, customised grid and save it as a template. The advantage of creating a template is that you maintain control of each individual element, and you can save templates for reuse.