Hi there!

I'm not sure if maxGraph is the perfect tool for this use case, but here are some initial thoughts that might help. I checked the mxGraph StackOverflow questions, and didn’t find any discussions on this specific topic.

Here are a few ideas based on my understanding of your needs. Keep in mind, these are just starting points—please consider them carefully! 😄

Do I need to create a new custom shape or extend the Rectangle shape to add form support?

You could use the RectangleShape as a container for the form by leveraging the grouping feature (you can also check the manual here). The rectangle would act as the parent vertex, and the form elements would be child vertices.

To display text, you can use LabelShape. For form inputs, styled RectangleShape elements can mimic input fields. When you edit the label inside these "input" rectangles, the related cell value will automatically update.

How can I capture form data and dynamically add it to a new node in the graph?

I haven't really thought about adding a button directly within the Cell. This may be a Cell with a specific style to make user think it is a button. You'll likely need to explore and experiment a bit to find the best approach, but if you manage to implement it, here's a possible approach:

When the user clicks the button, retrieve all child cells of the parent (the form container). Filter out the cells that correspond to inputs, extract their values, and then use those values to create a new node in the graph.

Are there best practices for updating nodes with new data from the form?

When updating multiple cells, it’s recommended to use a transaction to ensure the model updates smoothly. You can find more on this in the maxGraph model documentation. Alternatively, you can use the batchUpdate shortcut method for grouped updates.