Help with parameters to optimise layout

[mdurini-swisscom]

Hi, this module is amazing. I'm trying to use it to draw dynamically a schema that is representing Microsoft Intune setup, retrieving information from Azure AD about groups (nested, dynamics, etc). A the top level, I will have the master group, below level(s) the groups that will include the main one and as last level the the Intune configurations and applications. I don't understand which parameters i should use to keep enough space between so the labels will not overlap (like in the screenshot). Thank you in avance

[PrzemyslawKlys]

You can play around with AvoidOvelap with value from 0 to 1.

-HierarchicalRepulsionAvoidOverlap

Accepted range: [0 .. 1]. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.

It's part of New-DiagramOptionsPhysics. Depending which physics you use there are 3 different overalps.

It's demonstrated here: https://visjs.github.io/vis-network/examples/network/layout/hierarchicalLayoutOverlapAvoidance.html

Alternatively there are other options demonstrated here:

• https://visjs.github.io/vis-network/examples/network/layout/hierarchicalLayoutWithoutPhysics.html

Those should be available to be set, unless I've forgot to add them.

[mdurini-swisscom]

Hi @PrzemyslawKlys, thank you for your reply.

this is what I can get now with the following parameters

it seems a little bit better, thank you so much.
Is there a way to avoid to have the arrows overlapping other nodes?

[PrzemyslawKlys]

You could lower the opacity of links so that they don't overwrite the text over nodes. You could specify position of nodes manually, but I was never able to understand the X, Y positioning that Vis.js works with, and I gave up. I can only advice you to search thru VIs.js examples, or even google on some of the questions you have, as I only know what worked for me, but I've not spent loads of time on it.

Finally you could try the HTMLOrgCharts - not as configurable, but maybe easier to achieve what you are building.

[mdurini-swisscom]

Thank you @PrzemyslawKlys for your suggestions. what do you mean with "You could lower the opacity of links so that they don't overwrite the text over nodes."? I don't get which parameter should be used

[PrzemyslawKlys]

New-DiagramLink has ColorOpacity parameter. This allows you to make links less visible. You could also use dashes

Take a look at: https://evotec.xyz/easy-way-to-create-diagrams-using-powershell-and-pswritehtml/

Or both: https://evotec.xyz/reporting-group-membership-for-critical-active-directory-groups/

Notice how in those reports I'm using dashes, along with opacity so that even tho arrows go thru the text, nodes, they don't really matter on visibility.

Or like in here: https://evotec.xyz/creating-office-365-migration-diagram-with-powershell where text "No VPN Connection goes over the link and it's still fully visible.

[mdurini-swisscom]

Thank you again for your feedbacks. I guess that the Hierarchical layout is not able to handle properly so many nodes :-)

just for fun, I tried to move to a different layout but even there, i can see that some nodes are overlapping. it was anyway a good exercise ;-) do you have any suggestions on how to prevent it?

[PrzemyslawKlys]

As I mentioned before, you can use direct positioning with X, Y.

• https://visjs.github.io/vis-network/examples/network/edgeStyles/arrowAlignment.html

Or you can just think on a better way to show what you're trying to show? Maybe split them into separate groups. I once thought about creating hidden nodes/links (not sure if that's possible tho) that would help me with creating enough space. You could create nodes that don't symbolize group or nested group, but are simply connectors describing the connection, but have a function that pushes elements further away.