One of the default options for New-DiagramNode is working with Shapes. By the default, the shape is an ellipse, but there are other types you can choose from. Shapes can have different colors for borders, highlighting, and hovering.
$ShapeTypes = @('circle', 'dot', 'diamond', 'ellipse', 'database', 'box', 'square', 'triangle', 'triangleDown', 'text', 'star', 'hexagon')
New-HTML -TitleText 'My Ubiquiti Network' -UseCssLinks:$true -UseJavaScriptLinks:$true -FilePath $PSScriptRoot\Example-ShapesAndIcons.html {
New-HTMLSection -HeaderText 'Diagram - My Network' -CanCollapse {
New-HTMLPanel {
New-HTMLDiagram -Height '1000px' {
New-DiagramOptionsInteraction -Hover $true
#New-DiagramOptionsManipulation
New-DiagramOptionsPhysics
New-DiagramOptionsLayout -RandomSeed 500
New-DiagramNode -Label 'USG Pro' -To 'Unifi Switch'
New-DiagramNode -Label 'Unifi Switch' -To 'Unifi AP', 'EvoWin'
New-DiagramNode -Label 'Unifi AP' -To 'EvoMac', 'EvoWin' -Shape hexagon
New-DiagramNode -Label 'EvoMac' -Shape ellipse
New-DiagramNode -Label 'EvoWin' -To 'Exch1','Exch2','AD1','AD2','AD3','DC1','DC2' -Shape database
New-DiagramNode -Label 'Exch1' -Shape diamond
New-DiagramNode -Label 'Exch2' -Shape box
New-DiagramNode -Label 'AD1'
New-DiagramNode -Label 'AD2' -IconBrands apple -IconColor Bisque
New-DiagramNode -Label 'AD3' -IconRegular address-card
New-DiagramNode -Label 'DC1' -IconSolid address-book
New-DiagramNode -Label 'DC2' -IconSolid address-card -IconColor Green
foreach ($_ in $ShapeTypes) {
New-DiagramNode -Label $_ -Shape $_ -To 'Unifi Switch'
}
}
}
New-HTMLPanel {
New-HTMLTable -DataTable (Get-Process | Select-Object -First 5)
}
}
} -ShowHTML
Each diagram function provided offers multiple parameters that help you style, position node as you want. You can change fonts, styles, and do other things. Feel free to experiment, and see what's there in the shop.
By now, you probably noticed that I'm using Label and To parameters to define connections/links between nodes. What is essential to know that while I'm using Label to identify node, it's not always going to be this way. For example, if two nodes would have the same Label, they would overwrite each other (and that's how I've designed it). To be truly sure you want to have unique objects, there's an ID parameter. Below image shows three nodes that have the same Label, but thanks to using ID, there's no conflict between three nodes. Keep this mind when designing your diagrams.
New-HTML -TitleText 'My Ubiquiti Network' -UseCssLinks:$true -UseJavaScriptLinks:$true -FilePath $PSScriptRoot\Example-ID.html {
New-HTMLSection -HeaderText 'Diagram - My Network' -CanCollapse {
New-HTMLDiagram -Height '1000px' {
New-DiagramOptionsInteraction -Hover $true
#New-DiagramOptionsManipulation
New-DiagramOptionsPhysics
New-DiagramOptionsLayout -RandomSeed 500
New-DiagramNode -Label 'DC2' -IconSolid address-card -IconColor Green -To '17000', '17001'
New-DiagramNode -ID '17000' -Label 'DC2'
New-DiagramNode -ID '17001' -Label 'DC2'
}
}
} -ShowHTML
