Custom styling for the graph editor

You can customize the look of the graph editor by creating your own stylesheets. This allows you to change the appearance of the nodes, groups, and connections in the graph editor.

A common use-case for this is if you introduce a custom node that has a port for a specific type of data, that isn't covered by the default styles, you might want to change the color of the port to make it stand out.

In order to create a custom stylesheet for Map Graph, simply create a new USS file in a Resources folder anywhere inside the assets folder and call it MapGraph. Any USS file called MapGraph will be automatically included in the graph editor.

For example, in order to set the color of a port for a type called CustomType, you can add the following to your MapGraph.uss file:

.port.CustomType {
    --port-color: #8A93EB;  
}

You can replace the color value with any color you'd like.

Another example is that you can make your ports look square instead of round, like this:

.port.CustomType > #connector,
.port.CustomType > #connector > #cap {
    border-radius: 0;
}

These are just two simple examples though, you can make any kind of change that's supported by Unity. For more information on styling possibilities, you can check out the Unity docs here.