The CGMES DiagramLayout Editor is a specialized web application designed for viewing and editing power system diagram layouts based on the Common Grid Model Exchange Standard (CGMES). This guide explains how to use the application effectively, including all available interactions and keyboard shortcuts.
-
Enter a valid SPARQL endpoint URL in the "SPARQL Endpoint URL" field
-
Select the appropriate CGMES version (2.4.15 or 3.0)
-
Click "Load diagram profiles" to query available diagrams
-
Select a diagram from the dropdown menu
-
Click "Render diagram" to display the diagram on the canvas
|
Tip
|
The application remembers your last endpoint URL for convenience. |
The application interface consists of these main sections:
-
Header: Title of the application
-
Configuration Panel: SPARQL endpoint, CGMES version, diagram selection
-
Grid Controls: Toggle grid visibility, snap-to-grid, and adjust grid size
-
Canvas: Interactive diagram rendering area
-
Navigation Map: Miniature diagram view in the lower right corner
-
Status Bar: Current status and cursor coordinates
| Action | Description |
|---|---|
Pan |
Click and drag on empty canvas space (without pressing Ctrl) |
Zoom In/Out |
Use mouse wheel up/down to zoom in/out at the cursor position |
Navigation Map |
Click or drag in the navigation map to quickly move to different parts of the diagram |
| Action | Description |
|---|---|
Select a Point |
Hold Ctrl and click on a point |
Select Multiple Points |
Hold Ctrl and drag to create a selection rectangle |
Move Points |
Select one or more points, then click and drag any selected point. By default, points snap to the grid when moved. |
Disable Grid Snapping |
Hold Alt while dragging points to temporarily disable the snap-to-grid behavior |
View Point Details |
Hover over a point to see its tooltip with detailed information |
Pin Point Details |
Click the pin icon in the tooltip to keep it visible while working |
Toggle Polygon |
Select a point and use the "Polygon" checkbox that appears |
When moving points in the diagram, there are several behaviors to be aware of:
-
Default Behavior: Selected points snap to the grid when moved, aligning precisely with grid lines.
-
Grid Snapping: When enabled (default), points are automatically aligned to the nearest grid line during movement.
-
Temporary Override: Hold the Alt key while dragging to temporarily disable grid snapping, allowing free movement.
-
Grid Size: Adjustable in the Grid Controls panel - affects the spacing between grid lines and the snapping positions.
-
Multiple Points: When moving multiple selected points, they maintain their relative positions while the entire selection snaps to the grid.
|
Tip
|
You can permanently toggle the snap-to-grid behavior using the checkbox in the Grid Controls panel. |
| Action | Description |
|---|---|
Add a Point |
Double-click on a line segment to add a new point at that position |
Delete a Point |
Double-click on an existing point to remove it (not available for first/last points of a line) |
Copy Objects |
Select points and press Ctrl+C to copy their parent objects |
Paste Objects |
Press Ctrl+V to paste previously copied objects at the cursor position |
Delete Objects |
Select points and press Delete to remove their parent objects (with confirmation) |
Rotate Clockwise |
Select points and click the +90° button in the control panel to rotate 90° clockwise |
Rotate Counter-clockwise |
Select points and click the -90° button in the control panel to rotate 90° counter-clockwise |
Mirror Horizontally |
Select points and click the ↔ button in the control panel to mirror horizontally across the center of selection |
Mirror Vertically |
Select points and click the ↕ button in the control panel to mirror vertically across the center of selection |
The navigation map is a miniature representation of the entire diagram that appears in the lower right corner of the canvas.
| Action | Description |
|---|---|
Toggle Visibility |
Click the +/- button to show or hide the navigation map |
Resize Map |
Drag the resize handle in the bottom-right corner to change the map size |
View Current Position |
The red rectangle in the navigation map shows your current view area in the context of the whole diagram |
Navigate to Location |
Click anywhere in the navigation map to center the main view on that location |
Pan Using the Map |
Click and drag in the navigation map to pan the main view across the diagram |
-
Show/Hide Toggle: Use the button above the map to show or hide it as needed
-
Resizable: Grab the handle in the bottom-right corner to resize the map
-
Complete View: The map always shows the entire diagram regardless of size
-
Visual Reference: Lines and points in the diagram are represented in the map
-
Real-time Updates: The visible area indicator updates as you pan and zoom in the main canvas
|
Tip
|
The navigation map is especially useful for very large diagrams where it’s easy to lose context of where you are in the overall structure. |
| Option | Description |
|---|---|
Show Grid |
Toggle to display a grid on the canvas background |
Snap to Grid |
Toggle to enable/disable automatic alignment of points to the nearest grid lines when moving |
Grid Size |
Adjust the spacing between grid lines (smaller values provide finer control) |
Show Glue Connections |
Toggle to display dotted lines between glued points |
The CGMES DiagramLayout Editor uses a point-based approach for rotation and mirroring operations. This provides granular control over your diagram edits.
| Action | Description |
|---|---|
Rotate Selected Points |
Click the +90° or -90° buttons to rotate the currently selected points. The rotation center is calculated as the geometric center of all selected points. |
Mirror Selected Points |
Click the ↔ or ↕ buttons to mirror the currently selected points horizontally or vertically. The mirror axis passes through the geometric center of the selected points. |
Transform Entire Objects |
To rotate or mirror entire objects, first select all points of those objects. You can use Ctrl+C to copy objects (which selects all their points) or manually select all points of the objects you want to transform. |
The point-based transformation system provides several advantages:
-
Granular Control: You can transform only part of an object by selecting specific points
-
Partial Transformations: Create complex modifications by transforming different parts of objects independently
-
Precise Selection: Use Ctrl+Click to select individual points or Ctrl+Drag to select multiple points
-
Flexible Workflow: Mix partial and complete transformations as needed
| Method | Description |
|---|---|
Ctrl+Click |
Select individual points one at a time |
Ctrl+Drag |
Create a selection rectangle to select multiple points at once |
Ctrl+C |
Copy objects (which selects all their points) |
Ctrl+C then Ctrl+V |
Copy objects (which selects all their points) and use for transformation |
Ctrl+A |
Select all points in the diagram |
|
Note
|
Remember that transformations affect only the selected points. If you’re used to object-based transformations from other tools, take care to select all points of objects you want to transform completely. |
|
Tip
|
To quickly select all points of an object, select any point of that object and press Ctrl+C to copy. This automatically selects all points of the parent object. |
-
Visual Feedback: Selected points are highlighted in red to show what will be transformed
-
Plan Your Selection: Think about which points you want to transform before applying operations
-
Use the Grid: Enable grid snapping to align transformed points precisely
-
Preview Selection: Check your selection before transforming - the status bar shows how many points are selected
-
Mix Techniques: Combine different selection methods for complex transformations
|
Warning
|
Transformations cannot be undone automatically. Always check your selection before applying transformations, especially on complex diagrams. |
The application provides several ways to control grid snapping:
-
Permanent Setting: Use the "Snap to Grid" checkbox in the Grid Controls panel to enable or disable snapping globally
-
Temporary Override: Hold the Alt key while dragging to temporarily disable snapping even when it’s enabled globally
-
Grid Size Adjustment: Change the grid size to make snapping more precise (smaller values) or coarser (larger values)
|
Note
|
When moving multiple points, the first selected point will snap to the grid, and all other points will maintain their relative positions to that point. |
| Shortcut | Function |
|---|---|
Navigation |
|
Arrow Keys |
Pan the canvas by grid size |
Shift + Arrow Keys |
Pan the canvas by 10x grid size |
Alt + Arrow Keys |
Pan the canvas precisely by 1 unit |
Ctrl + + |
Zoom in |
Ctrl + - |
Zoom out |
Ctrl + Shift + + |
Zoom in with larger steps |
Ctrl + Alt + + |
Zoom in with smaller steps |
Ctrl + 0 |
Reset zoom to 100% |
Ctrl + F |
Fit diagram to view |
Space |
Temporarily activate pan mode (hold) |
Selection & Control |
|
Ctrl + Click |
Select a point |
Ctrl + Drag |
Select multiple points within a rectangle |
Esc |
Clear selection or close active tooltip |
Ctrl + A |
Select all objects |
Object Movement |
|
Ctrl + Arrow Keys |
Move selected objects by grid size |
Ctrl + Shift + Arrow Keys |
Move selected objects by 10x grid size |
Ctrl + Alt + Arrow Keys |
Move selected objects precisely by 1 unit |
Alt + Drag |
Move selected points with grid snapping temporarily disabled |
Object Manipulation |
|
Ctrl + C |
Copy selected diagram objects |
Ctrl + V |
Paste copied objects at cursor position |
Ctrl + D |
Duplicate selected objects with offset |
Delete |
Delete selected diagram objects |
When hovering over a point, a tooltip displays detailed information about the point and its parent diagram object:
-
DiagramObject: mRID, name, offset, rotation
-
DiagramObjectPoint: mRID, name, sequence number, x/y/z coordinates
The tooltip provides several interaction options:
-
Pin/unpin the tooltip to keep it visible
-
Copy values to clipboard by selecting the text
-
Close the tooltip with the X button or Esc key
| Action | Description |
|---|---|
Show Glue Connections |
Toggle the "Show Glue Connections" checkbox in the grid controls panel to display dotted lime lines between glued points |
Select Glue Connection |
Hold Ctrl and click on a glue line (dotted lime line) to select both glued points at once, making the "Glued" checkbox visible |
Create Glue Connection |
Select exactly two points from different objects, then check the "glued" checkbox that appears |
Remove Glue Connection |
Select two glued points and uncheck the "glued" checkbox |
Glue Point Behavior |
Points that are glued together maintain their logical connection while allowing independent movement |
Glue point relationships are preserved during these operations:
-
Dragging points: Connected points move together
-
Copying objects: When you copy and paste objects, their glue point connections to other copied objects are preserved
-
Rotation: When rotating objects, their glue point connections are maintained
|
Important
|
When deleting an object that has glue point connections to objects that aren’t being deleted, those connections will be broken. The application will warn you before proceeding. |
-
Use glue points to connect related components in power system diagrams
-
The "Show Glue Connections" toggle helps visualize the logical structure of your diagram
-
When reorganizing a diagram, consider moving groups of connected objects together
-
Check for existing connections before deleting objects to avoid breaking logical relationships accidentally
The editor communicates with the SPARQL endpoint in these ways:
-
Loading diagrams: Queries for all available diagrams
-
Rendering a diagram: Retrieves all objects and points for the selected diagram
-
Updating positions: Sends updates when points are moved
-
Adding/removing points: Creates or deletes point data
-
Toggling polygon property: Updates object properties
-
All coordinates in the system are in CGMES world units
-
The status bar displays the current cursor position in these units
-
Grid settings and measurements use the same coordinate system
-
Saving your work: Changes are written to the SPARQL endpoint immediately after editing
-
Complex diagrams: Use selection rectangle (Ctrl+drag) to select multiple points in dense areas
-
Precision placement: Enable "Snap to Grid" and adjust grid size for accurate positioning
-
Fine-tuning placement: Use Alt+drag for precise adjustments when grid snapping is too restrictive
-
Viewing details: Pin tooltips when you need to refer to point information while working
-
Navigating large diagrams: Use the navigation map to maintain context and quickly move to different areas