Hi,
I am trying to build a flow diagram where my nodes can be in 2 different states.
State 1 - Expanded. Will look like this: 
State 2 - Collapsed. Will look like this: 
The bottom right corner where the chevron icon for expand/collapse operation is present has a sharp corner in Shape1(when it is expanded) and has a rounded edge in Shape 2(when it is collapsed).
How do I change the shape like this dynamically based on the click event on the chevron?
How are you defining the main body’s shape? Presumably you are using an “Auto” Panel. Its main element could be either a Shape with a particular Shape.geometry or Shape.geometryString, or it could be a Picture with a particular Picture.source. A Shape is generally better than a Picture. The “Auto” Panel’s other element (the contents) would probably be a “Table” Panel with the rest of the non-optional information. The “Auto” Panel can be either fixed size by setting its width and height, or it can vary in size based on the contents.
So you just need to replace the value of a Shape or Picture property when the value of your details Panel changes visibility. Something like:
$(go.Shape,
{
geometryString: ...,
. . . other Shape properties
},
new go.Binding("geometryString", "visible",
function(v) { return v ? ... : ...; }).ofObject("Details"))
Where “Details” is the GraphObject.name of your details Panel that is also referred to by the “PanelExpanderButton”, GoJS Buttons -- Northwoods Software. And where “…” are suitable geometry path strings: GoJS Geometry Path Strings -- Northwoods Software.