Template copy doesn't work when assigned to Diagram

GoJS
1

I have over 1000 templates. I would like to avoid creating them from scratch for every diagram instance. I though that maybe using copies would improve performance. But copies do not work currently. When I create a template, copy it and assign the copy to the nodeTemplate field, the template doesn’t work. How can I reuse templates between different diagram instances?

What I need:

Screenshot 2025-11-20 at 10.33.05
Screenshot 2025-11-20 at 10.33.051540×846 32.5 KB

What I get:

Screenshot 2025-11-20 at 10.32.33
Screenshot 2025-11-20 at 10.32.331546×848 11.5 KB

Code:

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/release/go-debug.js"></script>
    <div id="sample" style="display: flex">
      <div
        id="myDiagramDiv1"
        style="border: solid 1px black; width: 400px; height: 400px"
      ></div>
      <div
        id="myDiagramDiv2"
        style="border: solid 1px black; width: 400px; height: 400px"
      ></div>
    </div>

    <script id="code">
      const myDiagram1 = new go.Diagram("myDiagramDiv1");
      const myDiagram2 = new go.Diagram("myDiagramDiv2");

      const nodeTemplate = new go.Node("Auto").add(
        new go.Shape("RoundedRectangle", {
          strokeWidth: 0,
          fill: "white",
        }).bind("fill", "color"),
        new go.TextBlock({
          margin: 8,
          font: "bold 14px sans-serif",
          stroke: "#333",
        }).bind("text")
      );

      myDiagram1.nodeTemplate = nodeTemplate.copy();

      myDiagram2.nodeTemplate = nodeTemplate.copy();

      myDiagram1.model = new go.GraphLinksModel(
        [
          { key: 1, text: "Alpha", color: "lightblue" },
          { key: 2, text: "Beta", color: "orange" },
          { key: 3, text: "Gamma", color: "lightgreen" },
          { key: 4, text: "Delta", color: "pink" },
        ],
        [
          { from: 1, to: 2 },
          { from: 1, to: 3 },
          { from: 2, to: 2 },
          { from: 3, to: 4 },
          { from: 4, to: 1 },
        ]
      );
      myDiagram2.model = new go.GraphLinksModel(
        [
          { key: 1, text: "Alpha", color: "lightblue" },
          { key: 2, text: "Beta", color: "orange" },
          { key: 3, text: "Gamma", color: "lightgreen" },
          { key: 4, text: "Delta", color: "pink" },
        ],
        [
          { from: 1, to: 2 },
          { from: 1, to: 3 },
          { from: 2, to: 2 },
          { from: 3, to: 4 },
          { from: 4, to: 1 },
        ]
      );
    </script>
  </body>
</html>
2

1000 templates seems excessive, but I don’t know your application. Can you use data binding to use the same template where you now use multiple templates that are like each other but for a few property settings?

Templates can be shared amongst diagrams. Don’t copy them.

If you want to copy a template so that you can modify it, call copyTemplate. Panel | GoJS API

3

I wanted to copy templates because I thought they may keep some state from the diagram where they originally were used. Currently I have some issues that two diagram instances seem to affect each other but maybe this is also related to how model is managed in the project.

4

In that case, make sure there’s no data shared between models. Sometimes it’s easy to miss accidentally shared references to Objects that are property values or are in Arrays.