Manual » Overview

Interface

Graph Editor

The graph editor contains a number of elements that can be intimidating for a first time user, but should be simple to understand after a few uses.

The main portion of the graph editor is the graph itself:

Graph Editor Graph Image

Above the graph is the menubar:

Graph Editor Menubar Image

To the right of the graph is the node explorer:

Graph Editor Node Explorer Image

In the bottom right corner is the info panel:

Graph Editor Info Panel Image

If you click on the 'D' button next to the Proxy connector, you can see the dashboard:

Graph Editor Dashboard Image

You can read more about each element in the graph editor below.

Node Explorer

The node explorer has three tabs, "Nodes", "Graph", and "Packages".

The nodes tab shows the available nodes that you can drag and drop into the graph. You can search the available nodes by using the search bar at the top of the Node tab.

Graph Editor Node Explorer Image

Graph Explorer (Tab)

The Graph tab shows the nodes in your current graph. You can drag and drop nodes from this tab into the dashboard when the dashboard is in edit mode. This is important to remember when creating a dashboard since you may be in preview mode.

Package Explorer (Tab)

The Package tab shows packages that you can add into your graph. By default, scriptflow will provide you with the basenodes package to get started, but as more packages are developed, they can add more functionality to scriptflow. For example, the randomdata package adds a node called "RandomData" that will provide a way to easily create fake data to test with.

Info Panel

The info panel provides information on a node or on the graph itself depending on what is selected in the graph. It also provides a Readme panel that can provide a node's entire readme in Markdown format. If you don't know how to use a node, its always useful to read the node's Readme first. If it's not helpful, please tell us in the Forums so that we can improve it.

Graph Editor Info Panel Image

Dashboard

After clicking on the round 'D' button, you will be shown the dashboard for the graph. You can also view the dashboard by using the menubar's View > Dashboard button. The dashboard is useful for consumers of your graph to quickly use the tool or visualization you've created without seeing the details of how you created it (the graph itself).

Adding a node

Adding a node is as simple as dragging and dropping it from the node explorer. You can also add a node by using the menu bar and choosing Edit > Add Node, then searching for the node you want.

Selecting a node

Simply click on a node to select it. You can also use box select to select multiple nodes at once.

Moving a node

After selecting a node, you can drag a node by clicking and holding on the node, then dragging the node.

Zooming

You can zoom the editor by scrolling on your trackpad or mouse. In addition, you can use the zoom slider in the top right corner of the editor to zoom as well.

Panning the Editor

You can pan the editor by clicking and dragging on the background of the graph (not on a node).

Box Select

You can box select by going into Box Select mode (Edit > Box Select), then dragging your mouse across the editor to select multiple nodes. This is useful for moving or deleting multiple nodes at once.

Select All

You can select all nodes by using Edit > Select All.

Delete

You can delete selected nodes (a single node or multiple) by using your keyboard's Backspace key or using Edit > Delete from the menu bar.

Making a connection between nodes

To make a connection between two nodes, you want to click on a node's input or output circle, then drag and drop the connection onto another node.

Since this is such a common task, scriptflow makes it easier by allowing you to use your keyboard to connect to another node when dragging. After you click on a node's input or output circle, a group of numbers will appear over the other circles that you can connect to. Instead of having to manually drag your connection, you can simply hit the appropriate number on your keyboard to quickly make the connection.

Deleting a connection

To delete a connection, you can either right click on a node's input circle or click on the connection itself to select it, then use the Backspace button to delete the connection.

Note that if you right click on a node's output circle, it will delete all connections attached to that output. Since node inputs can only have one connection attached to them, it is safer to right click on a node's input connection instead.

Cut / Copy / Paste

When selecting a node or a group of nodes, you can use the menubar's Edit > Cut/Copy/Paste commands to perform those common use cases.

Saving

When you're done creating a graph and its associated dashboard, you can save your graph by using File > Save. Scriptflow will require that you name your graph and if you have a paid plan, you can determine whether you want to save a private graph or a public graph. For private graphs, you have the option to save credentials directly in the graph - public graphs will never save your credentials.

Next

Learn about organizing graphs.