> For the complete documentation index, see [llms.txt](https://giantgrey.gitbook.io/databrain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://giantgrey.gitbook.io/databrain/add-ons/progress/progress-graph.md).
# Progress Graph
The progress graph editor allows you to visually design your progression/techtree graphs with a node editor.
## Global Properties
* Small Nodes: If enabled, the editor shows smaller nodes
* Canvas Width & Height: Defines the node canvas size, this values are being used when building the runtime UI. The appropriate UI RectTransform parent container (node canvas) will be set to this size.
## Create new node
1. First, create a new Progress Graph object. Select the Progress Graph type in the hierarchy and click on + Create
2. You can now see an empty node canvas. Right click on it and select Progress Node.
## Connect Nodes
* To connect nodes, simply right click on the first node, select "Connect" and then click on another node you want to connect to.
## Node Properties
A Progress node has multiple properties by default. A Progress Node is a DataObject which can be derived from to add additional custom data fields if you like.
* **Research State:** The research state of this node (Locked, Unlocked, InProgress, Complete)
* **Research Time:** The time it takes to research this node
* **Research Costs:** The costs in ProgressResources it takes to be able to research this node
## Custom Node
You can create custom progress nodes by simply deriving from the ProgressNode class.\
This is an example custom node code:
```csharp
public class CustomProgressNode : ProgressNode
{
public float additionalFields;
// Called when this node research has been started
public override void ResearchStarted()
{
Debug.Log("my custom research has started");
}
// Called when research has been completed
public override void ResearchCompleted()
{
Debug.Log("my custom research is completed");
}
}
```
