Simple Diagram Panel

The Simple Diagram panel can be used to edit or display simple nodes-and-edges diagrams. These diagrams are intentionally kept very simple: Users can create nodes, give them a label and color, and then draw edges between those nodes.

Canvas Controls

The pointer tools along the left edge decide what a click or drag on the canvas does:

  • Hand: Drag anywhere on the canvas, including on a node, to move around the diagram. Clicking a node or edge still selects it, but nothing can be moved or edited. Diagrams open with this tool for users who can only view them.

  • Select: Select, move and connect nodes, and edit their labels. Diagrams open with this tool for users who can edit them.

  • Add nodes: While this tool is on, each click on an empty area of the canvas adds a node there. Existing nodes and edges are left alone. Click Add nodes again, or press Esc, to go back to Select. This tool is only offered to users who can edit the diagram.

In the bottom-right corner:

  • Zoom out and Zoom in change the zoom level, which is shown between them. The zoom level ranges from 45% to 250%. The mouse wheel zooms as well.

  • Overview shows a miniature of the whole diagram above the zoom controls. Drag the frame in the miniature to move around the diagram. Click Overview again to hide it.

With any tool, hold Space or Ctrl (Cmd on Mac) and drag to move around the diagram.

Navigation & Selection

  • Add Node: Turn on Add nodes and click an empty area of the canvas. The new node opens for naming straight away. Press Enter to keep the name and place another node, or Esc to keep the name and stop adding nodes. A node left without a name shows an Add title prompt.

  • Drag Node from another panel: Drag a resource from the resource tree or another panel onto the canvas to add a node with the resource’s label. The node copies the label only and is not linked to the resource.

  • Pan View: Use the Hand tool, or hold Space or Ctrl (Cmd on Mac) and drag the canvas

  • Zoom: Use the mouse wheel or the zoom controls in the bottom-right corner

  • Bulk Selection: With the Select tool, click and drag on an empty area to use the Marquee tool to select multiple items

Node & Edge Manipulation

These use the Select tool.

  • Move Node: Click and drag the center of a node

  • Create Edge: Drag from the border of a node (blue highlight)

    • Edges are drawn as curves. Several edges between the same two nodes curve apart, so that each stays visible.

    • To cancel edge creation while dragging, Right-click.

  • Delete: Select an item and press Backspace or Delete

Labels & Styling

  • Edit Labels: Double-click a node, edge, or an existing label to modify its text content

  • Long Edge Labels: An edge label longer than about 30 characters is shortened to one line, ending in an ellipsis. Hover over it to see the full text, or double-click it to edit.

  • Color Styling: Select one or more nodes to reveal the Context Menu. Its color button opens the color dialog. The selected nodes take on the color as you pick it, with an outline in a darker shade of the same color.

Keyboard Shortcut Summary

Action

Input

New Node

Add nodes, then click the canvas

Stop Adding Nodes

Esc, or click Add nodes again

New Edge

Drag Node Border

Pan Canvas

Hand + Drag, or Space / Ctrl + Drag

Zoom

Mouse Wheel

Edit Text

Double-Click

Delete Selection

Del / Backspace

The interpretation of those nodes and edges is up to the user, but may be used for conceptual diagramming and brainstorming on assets that may later be turned into a more formal structure.

The diagrams themselves are represented as assets in RDF using a dedicated diagrams ontology. Nodes become instances of diagrams:Node and edges become instances of diagrams:Edge. Nodes store the x/y position and width/height information in an extensible data model. This means that the diagrams and its content can be linked to other assets via user-defined relationships.

The RDF-based representation also means that Data Foundation features like importers, exporters, SPARQL query and ADS scripting can be applied on them. For example, diagrams can be generated programmatically from other data.

A consequence of the representation is also that edit permissions are required to modify the diagram, even to move or resize nodes.

Toolbar Features

  • Refresh diagram forces a manual refresh of the visualization from the underlying RDF representation. This is usually not necessary because the diagram should update itself after any edit, regardless of where they originated from.

  • Fit diagram in view zooms and pans so that the whole diagram is visible.

  • Focus diagram globally selects the asset that represent the diagram itself. This can be used, for example, to edit the label of the diagram, or add descriptive comments.

  • Remove from diagram opens a menu with:

    • Remove selected nodes from diagram deletes the selected nodes and edges, along with any edges connected to those nodes. Only available when at least one node is selected. Pressing Del or Backspace does the same, and also works on selected edges alone.

    • Remove all nodes from diagram clears the diagram after asking for confirmation. You can use the Undo Button or the Change History Panel to revert if you did this by accident.

  • Export diagram can be used to save the diagram as an image.

  • Select a diagram shows the available diagrams, allowing users to switch between them. This includes diagrams that are stored in the current asset collection, but also any included asset collection. Diagrams that are stored in included collections are always read-only.

  • Create simple diagram can be used to create a new, empty diagram.

  • Delete diagram permanently deletes the selected diagram, including all of its nodes and edges. This cannot be undone.

See Also

Further Reading on TQ Data Foundation