# Ring Shaped node in Layered digraph layout

Hi Walter,

In the diagram, you can see the ring (Ellipse) shaped node.

Actually I have used Ellipse shape and located the rectangular nodes in it.

But I have to make the links that way ellipse, no matter how many nodes are in ring node and also I have to use that node in layereddigraph layout.

Please suggest me any ideas or solutions to achieve this.

Make that that node a Group whose Group.layout is a CircularLayout. Don’t use Links to connect the member Nodes, but use a single “Ellipse” Shape that is an object in the group template.

Thanks Walter…
Can you please give me sample of just two nodes with one as normal node and one as group node like this??

Also in circular layout, I can’t achieve ellipse shape when I have 2 nodes…

Also there is a problem when you have just one or zero member nodes.

But I suppose you could make the “Ellipse” Shape not visible when there are two or fewer nodes.

If I have one or zero nodes ,I will not display the links.
Suppose if I have 2 or more nodes, I have to achieve ellipse shaped links…

Please give me sample code connecting two nodes of one as rectangular normal node and another as group node with 2 or more member nodes of ellipse shaped links…

``````<!DOCTYPE html>
<html>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
<script src="go.js"></script>
<script id="code">
function init() {
var \$ = go.GraphObject.make;

myDiagram =
\$(go.Diagram, "myDiagramDiv",
{
layout: \$(go.LayeredDigraphLayout, { isRealtime: false }),
"undoManager.isEnabled": true
});

myDiagram.nodeTemplate =
\$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
\$(go.Shape,
{ fill: "white", portId: "" },
new go.Binding("fill", "color")),
\$(go.TextBlock,
{ margin: 8, editable: true },
new go.Binding("text").makeTwoWay())
);

myDiagram.groupTemplate =
\$(go.Group, "Auto",
{
layout:
\$(go.CircularLayout,
{ aspectRatio: 0.62, spacing: 20, startAngle: 210 })
},
\$(go.Shape, "Ellipse",
{
stretch: go.GraphObject.Fill,
margin: new go.Margin(10, 10),
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight,
fill: "transparent", stroke: "green", strokeWidth: 2,
portId: ""
}),
\$(go.Placeholder)
);

myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen", isGroup: true },
{ key: 4, text: "Delta", color: "pink" },
{ group: 3, text: "A" },
{ group: 3, text: "BBBB" },
{ group: 3, text: "CCCC" },
{ group: 3, text: "DDD" },
{ group: 3, text: "EEE" },
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 3, to: 4 },
]);
}
</script>