Weak Links with dynamically added nodes


We need to implement Weaklinks where user can create links on dynamically added nodes. We have seen sample but it is hard coded. If you can point to any resource or provide code it will be helpful.


I’m not sure what you mean by “weak link”.

If you are talking about the ability for users to draw new Links connecting Nodes, you need to set the desired GraphObject.linkable… properties on the Node or on the individual GraphObjects that you want to treat as “port” elements. This is discussed in http://gojs.net/latest/intro/tools.html and http://gojs.net/latest/intro/validation.html and demonstrated in many samples, such as http://gojs.net/latest/samples/basic.html.

If you are talking about providing HTML links to other web pages, this is demonstrated in samples such as http://gojs.net/latest/samples/classHierarchy.html and http://gojs.net/latest/samples/euler.html.

Yes, We are talking about the ability for users to draw new Links connecting Nodes

Your reply helped and now we can.

However, what we still need to know is that how to create a specific type/category of links via this…
What i mean is linkTemplateMap … type.
I need to draw WeakLink type link from linkingTool

myDiagram.linkTemplate =
    GO(go.Link, {
        routing: go.Link.Orthogonal,
        corner: 5,
        routing: go.Link.AvoidsNodes
        GO(go.Shape, {
            strokeWidth: 2,
            stroke: "#555"


     { curve: go.Link.Bezier, adjusting: go.Link.Stretch, isTreeLink: false, reshapable: true, relinkableFrom: true, relinkableTo: true, curviness: 60 },
     { routing: go.Link.AvoidsNodes },
                  { stroke: OrgChartConfig.WeakLinkColor , strokeWidth: 2, strokeDashArray: [6, 3] }),
                  { toArrow: "OpenTriangle", stroke: OrgChartConfig.WeakLinkColor, strokeWidth: 2 }),
                  new go.Binding("text", "text"),
                      stroke: OrgChartConfig.WeakLinkColor, background: "rgba(255,255,255,0.75)",
                      maxSize: new go.Size(80, NaN)


{ routing: go.Link.AvoidsNodes },

                  { stroke: OrgChartConfig.RootInternalLinkColor, strokeWidth: 1, strokeDashArray: [6, 3] }),
                  { toArrow: "OpenTriangle", stroke: OrgChartConfig.RootInternalLinkColor, strokeWidth: 1 })

I would override LinkingTool.insertLink to first set the LinkingTool.archetypeLinkData.category property to the name of the template that you want to use, and then call the base method. The BPMNLinkingTool does this, in extensions/BPMNclasses.js. Here’s a simpler example, where you would look at the arguments to decide which category to assign to the link data object that will be copied:

myDiagram.toolManager.linkingTool.insertLink = function(fromnode, fromport, tonode, toport) {
this.archetypeLinkData.category = ???
return go.LinkingTool.prototype.insertLink.call(this, fromnode, fromport, tonode, toport);

We were able to insert links as you guided us but, we can’t reproduce the behavior we need.

Below is the image showing expected and actual behavior. We wand this disired behavoiur after we relayout/autoallign the diagram. Any suggestions?

We are using tree layout in the diagram as we want to display it as a organizational chart with so called weak-links.

Piyush Ashtt

You want to do what the http://gojs.net/latest/samples/orgChartExtras.html sample does.
Note how it sets { isLayoutPositioned: false and isTreeLink: false }.
The first property controls whether the Link (or Node) participates in a Layout.
The second property controls whether the Link determines any tree-structure relationship.