---
title: Creating a Diagram
description: Step-by-step guide to building a diagram in ControlCom Connect: the Diagrams list, the create dialog, the editor and its element library, arranging a drawing, binding an element to a Variable, publishing, and viewing the result.
source: https://documentation.controlcomtech.com/platform/diagrams-detail/creating
---

# Creating a Diagram

A diagram is a drawing you assemble on a canvas and publish to your Organization: equipment symbols, the lines
connecting them, labels, and elements bound to Device Variables so the drawing reports what the equipment is doing.
This guide walks the whole path once, from an empty canvas to a published one-line.

> **Workflow Stage: Visualize**

## What you will build

The example is a 480 V one-line for a hospital central plant. A utility service runs through a main disconnect and a
revenue meter, a 750 kW generator sits on the emergency side, an automatic transfer switch selects between the two
sources, and four branch feeders come off the essential bus. One element on the drawing is bound to a Device Variable
so it reports the utility demand.

Nothing about the drawing itself depends on live data, so you can follow this guide on an Organization that has no
hardware reporting yet and bind elements later.

## Before you start

Creating a diagram requires the Create Diagram permission, which the Administrator role has by default. Editing an
existing one requires Update Diagram.

Elements that display readings need the earlier stages of the workflow finished: your hardware Connected through the
Edge Server, readings Collected from it, and those readings Stored in the platform. Laying out the equipment first and
binding elements once data starts arriving is a reasonable order to work in.

## Creating the diagram

Open **Visualization → Diagrams** in the sidebar. The list shows every diagram in the Organization, with tabs for
**Diagrams** and **Instances**, a name search, and a **Locked In Device** column for drawings scoped to a single Device.

![The Diagrams list in ControlCom Connect showing four diagrams with search and the New Diagram button](https://documentation.controlcomtech.com/images/diagrams/01-diagrams-list.png)

*The Diagrams list, with the New Diagram button in the top right*

Click **New Diagram** in the top right. The chevron beside it opens a short menu with the same action plus **New
Folder**, if you would rather set up folders before you start drawing.

The create dialog asks for one thing, the **Diagram Name**. When the Organization already has folders, a **Folder**
picker appears underneath so you can file the new drawing as you create it.

![The Create Diagram dialog with the name Main Switchgear One-Line entered](https://documentation.controlcomtech.com/images/diagrams/02-create-diagram-dialog.png)

*Naming the drawing before creating it*

Click **Create**. The diagram is created and ControlCom Connect opens it directly in the editor.

## The diagram editor

![The ControlCom Connect diagram editor on a new diagram, with an empty canvas and the stage settings on the right](https://documentation.controlcomtech.com/images/diagrams/03-diagram-editor.png)

*The editor on a new diagram: panel rail on the left, canvas in the middle, canvas settings on the right*

The top bar holds **Back**, undo and redo, the element tools, the grouping and alignment tools, a light and dark
toggle, **Find & Replace** for swapping one Variable binding for another across the whole drawing or just the current
selection, **History**, **Preview**, and **Publish**.

The narrow rail on the left switches the panel next to it between five views.

| Panel         | What it holds                                                                                                                                                      |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Elements**  | Every element on the canvas in stacking order. Drag rows to reorder them, drop one onto a group to move it inside, and use the row menu to rename, lock or delete. |
| **Templates** | Reusable drawings published as templates, which drop onto the canvas as an instance reference.                                                                     |
| **Colors**    | Every color already used in the drawing. Selecting one highlights the elements using it, and changing it replaces that color everywhere at once.                   |
| **Library**   | The searchable library of shapes, icons and equipment symbols.                                                                                                     |
| **Diagrams**  | A search box over the Organization's diagrams, instances and templates, for jumping to another one without leaving the editor.                                     |

With nothing selected, the panel on the right holds the canvas settings: **Stage Width** and **Stage Height** in
pixels, **Enable dark mode**, the canvas **Fill**, the **Grid** controls (**Gridlines**, **Snap**, **Snap Size** and
**Grid Color**), and **Allow Pan & Zoom**, which decides whether people viewing the published drawing can move around
it. **Local Properties** at the bottom defines values the drawing carries internally, which interactions can set and
elements can read.

A new diagram starts at 1000 by 600 pixels with gridlines and snapping on and dark mode off. Turn **Enable dark mode**
on to give the drawing a second palette that follows the site theme; each color then takes a light value and a dark
one.

At the bottom right of the canvas are fit to view, zoom out, the current zoom level (click it to return to 100 percent)
and zoom in. Holding `Space` lets you drag the canvas itself around.

## Adding elements

The tools in the top bar drop an element straight onto the canvas: rectangle, circle, arc, line, text, value, wrapper
and instance reference. The **+** beside them opens the full list, grouped as Basic Shapes, Text & Data, Charts,
Interactive, Media and Advanced. Whichever route you take, the new element arrives selected with its properties open on
the right.

Equipment symbols come from the **Library** panel. It opens on a Quick Add row (rectangle, circle, line, text and
image) above a set of categories: Elements, Icons, Valves, Instruments, Equipment, Piping, three food and beverage
sets, and Electrical. The search box at the top searches all of them at once.

![The Electrical category of the diagram element library, showing symbols such as disconnect switch, fuse, contactor and power meter](https://documentation.controlcomtech.com/images/diagrams/04-element-library.png)

*The Electrical category of the library, where the symbols for this one-line come from*

The Electrical category carries the symbols this drawing is built from. It covers disconnect switches, fuses,
contactors and relays; ammeters, voltmeters, wattmeters, power meters and instrument transformers; motor starters and
motors; a PLC, an HMI panel and a control station; and passive parts such as capacitors, inductors, rectifiers and
inverters. Clicking a symbol adds it as a group, and the individual paths inside it stay editable.

Draw the connections with the line tool. A line is a series of points rather than a single segment, so the run from the
meter down and across to the transfer switch is one element with three points, not two lines meeting at a corner. When
a line is selected, the bar that floats above the canvas sets its style (straight, elbow, smooth elbow or curved), its
color, its width and its arrowheads.

## Arranging the drawing

![The finished Main Switchgear One-Line in the diagram editor, showing utility and generator sources feeding a transfer switch and four branch feeders](https://documentation.controlcomtech.com/images/diagrams/05-one-line-diagram.png)

*The finished one-line, with every element listed by name in the Elements panel*

Snapping keeps elements on the grid as you drag them. Arrow keys nudge a selection by one pixel, and `Shift` with an
arrow key moves it by the snap size.

Select two or more elements and the alignment tools in the top bar become active: align left, center, right, top,
middle and bottom, then distribute horizontally or vertically once three are selected. `Ctrl+G` groups a selection so
it moves as one and `Ctrl+U` ungroups it, while `[` and `]` send the selection to the back and bring it to the front.
Right-clicking the canvas offers the same actions plus copy, paste, delete and lock.

Rename elements as you go. The Elements panel is how you find things in a drawing this dense, and a list reading
"Rectangle, Rectangle, Line" is far harder to work with later than one reading "ATS-1, Essential Bus, Normal Source".
Rename is in the row menu, next to **Lock**, which pins an element so it cannot be moved by accident.

## Binding elements to data

A **Value** element displays the current reading of a Device Variable. Add one, then open the **Value** section of its
properties and click the picker.

![The variable picker dialog with columns for Devices, Folders and the selected device Variables](https://documentation.controlcomtech.com/images/diagrams/06-variable-picker.png)

*Picking the Device and then the Variable the element reports*

The picker lists the Organization's Devices on the left, the Variable folders of whichever Device is selected in the
middle, and its Variables on the right, each column with its own search box. Choose the Device, choose the Variable,
then click **Select Variable**.

![The properties panel for a bound Value element showing Layout, Value, Typography, Fill, Stroke and Visibility sections](https://documentation.controlcomtech.com/images/diagrams/07-element-properties.png)

*The element properties after binding, with the Device and Variable shown on the picker button*

The picker button now names the Device and Variable it is bound to. **Logic Editor** beside it replaces that direct
binding with an expression, which is what you use when one Variable is not enough: combining two readings, or choosing
what to display based on a condition.

While you are editing, a Value element draws the placeholder `12345` so you can size and position it against text of a
realistic length. The published drawing shows the actual reading, or `-----` until the Device reports one.

Most other elements can be driven by data through the same logic editor. **Fill** and **Stroke** accept color logic, so
a breaker symbol can turn red when its Variable says it is open. **Visibility** accepts a rule that shows or hides the
element, with an optional fade or slide. **Pulse** animates an element while a condition holds.

The **Interactions** section at the bottom of the properties panel makes an element clickable. An interaction can be
**Navigate to Dashboard**, **Navigate to Diagram**, **Slide Out Dashboard**, **Pan to Area**, **Send Command** or
**Set Local Property**. Send Command has to be the only interaction on an element, since it writes back to the Device.

## Publishing your changes

Everything so far lives in the editor only. Click **Publish**, or press `Ctrl+S`, to write it to the platform.

![The Publish Diagram dialog confirming the diagram name before saving](https://documentation.controlcomtech.com/images/diagrams/08-publish-diagram.png)

*Publishing confirms the name, so the dialog doubles as the place to rename a drawing*

The dialog confirms the **Diagram name** and then saves. If someone else published the same drawing while you were
working, ControlCom Connect stops rather than overwriting their work: **Load latest version** discards your edits and
reloads theirs, and **Overwrite anyway** keeps yours.

Every publish is kept. **History** in the top bar lists the previous versions with the date each was published and
restores any of them. Restoring replaces the current configuration outright, so it asks for confirmation first.
Leaving the editor with unpublished edits also prompts before those edits are discarded.

## Viewing the diagram

Click **Back** to return to the list, then open the drawing by name.

![The published Main Switchgear One-Line as viewers see it, filling the page with zoom controls in the top right](https://documentation.controlcomtech.com/images/diagrams/09-diagram-view.png)

*The published one-line as everyone with access sees it*

The published drawing fills the page. The controls in the top right reopen the editor, reset the view, fit the drawing
to the window, and zoom in and out. Bound elements update in place as new readings arrive, and the interactions you
configured are live, so clicking an element runs its action.

The zoom and pan controls appear only while **Allow Pan & Zoom** is on. Turn it off for a drawing that should always be
seen whole, such as a one-line on a control room display.

## Next steps

A drawing is most useful once the elements on it are bound, and knowing which readings are worth showing is the job of
the Analyze stage. Use the [Data Explorer](https://documentation.controlcomtech.com/platform/explorer) to query and compare your Variables first, then come
back and bind the ones that matter.

Diagrams and dashboards answer different questions about the same data. A dashboard tells you what the numbers are; a
diagram tells you where in the system they come from. The two combine, since a dashboard can embed a diagram through
its Diagram widget, and an element here can open a dashboard through an interaction. For the dashboard side, see
[Creating a Dashboard](https://documentation.controlcomtech.com/platform/dashboards/creating).

After Visualize comes the Report stage, where Assets Reports turn the same stored data into formatted compliance
reports. For the wider picture of what diagrams are for, see the
[diagrams overview](https://documentation.controlcomtech.com/platform/diagrams-detail/overview).