.. _SimpleDiagramPanel:

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.

**Navigation & Selection**

* **Add Node**: Click any empty area on the canvas
* **Pan View**: Hold **Ctrl** (Windows) or **Cmd** (Mac) and **drag** the canvas
* **Bulk Selection**: Click and **drag** on an empty area to use the **Marquee tool** to select multiple items

**Node & Edge Manipulation**

* **Move Node**: Click and **drag** the center of a node
* **Create Edge**: Drag from the border of a node (**blue highlight**)
    * 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
* **Color Styling**: Select one or more nodes to reveal the **Context Menu**. Use the color picker to change the color of the selection

**Keyboard Shortcut Summary**

+----------------------+-------------------------------+
| Action               | Input                         |
+======================+===============================+
| New Node             | Click Canvas                  |
+----------------------+-------------------------------+
| New Edge             | Drag Node Border              |
+----------------------+-------------------------------+
| Pan Canvas           | **Ctrl** + Drag               |
+----------------------+-------------------------------+
| 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**

* **Remove all nodes from diagram** clears the diagram.
  You can use the :ref:`UndoButton` or the :ref:`ChangeHistoryPanel` to revert if you clicked on this by accident.

* **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.

* **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.

* **Delete selected items** deletes the selected nodes or edges.

* **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.


**See Also**

* :ref:`ThreeDGraphPanel`
* :ref:`EDGDiagramPanel`
* :ref:`GraphExplorerPanel`

**Further Reading on TQ Data Foundation**

* :ref:`introduction`