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.
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.
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.
Click Create. The diagram is created and ControlCom Connect opens it directly in the editor.
The diagram editor
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 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
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 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 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 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 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 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.
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.