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:
Above the graph is the menubar:
To the right of the graph is the node explorer:
In the bottom right corner is the info panel:
If you click on the 'D' button next to the Proxy connector, you can see the dashboard:
You can read more about each element in the graph editor below.
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 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.
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.
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.
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).
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.
You can select all nodes by using Edit > Select All.
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.
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.
Learn about organizing graphs.