Chapter 7: Network Diagrams, Flowcharts, and Visualizations

Complex visualizations overview

Beyond tables and charts, complex IT environments frequently require structural visualization—such as Active Directory trust maps, network topology diagrams, cloud architecture maps, and organizational hierarchies.

PSWriteHTML includes native support for interactive diagramming powered by Vis Network through the New-HTMLDiagram cmdlet. You can build nodes, connections, flowcharts, and relational graphs dynamically using pure PowerShell syntax without needing external design tools like Visio or Lucidchart.

Customizing Nodes (New-DiagramNode)

Nodes are defined with New-DiagramNode . They can be customized with specific shapes, background colors, font styles, and FontAwesome icons to represent specific hardware or service roles.

Node Parameters & Options

  • -Id: Unique identifier (integer or string) used to reference the node in link definitions. If not set, label will be used as Id.

  • -Label: Display text shown on or below the node.

  • -Shape: Geometry of the node (circle, dot, diamond, ellipse, database, box, square, triangle, triangleDown, text, star, hexagon).

  • -ColorBackground: Hex color code for the internal node fill.

  • -ColorBorder: Hex color code for the node outline.

  • -IconSolid / -IconBrands: Embeds a FontAwesome vector icon inside the node. Cannot be used with -Shape values like box or ellipse.

Layout Hierarchies & Physics Engines (New-DiagramOptionsLayout)

Vis Network includes physics engines that automatically arrange nodes dynamically or snap them into rigid hierarchical trees.

Hierarchical Layouts (Org Charts & Tree Diagrams)

For structured trees like Active Directory domain trust structures or organizational charts, enable hierarchical positioning using New-DiagramOptionsLayout :

  • -HierarchicalEnabled: Switch parameter to enable hierarchical layout.

  • -HierarchicalDirection: The direction of the hierarchical layout. Valid values are: FromUpToDown, FromDownToUp, FromLeftToRight, FromRigthToLeft.

New-HTML -Title "AD Topology Map" -FilePath "ADTopology.html" -Show {
    New-HTMLTab -Name "AD Map" {
        New-HTMLSection -HeaderText "Local AD Topology" {
            New-HTMLPanel {
                New-HTMLDiagram -Diagram {
                
                # Layout Engine Configuration
                New-DiagramOptionsLayout -HierarchicalEnabled $true -HierarchicalDirection FromUpToDown

                New-DiagramNode -Id 1 -Level 1 -Label "Forest Root Domain" -Shape "box"
                New-DiagramNode -Id 2 -Level 2 -Label "Child Domain A"     -Shape "box"
                New-DiagramNode -Id 3 -Level 2 -Label "Child Domain B"     -Shape "box"

                New-DiagramLink -From 1 -To 2 -ArrowsToEnabled -ArrowsFromEnabled -Label "Two-Way Trust"
                New-DiagramLink -From 1 -To 3 -ArrowsToEnabled -ArrowsFromEnabled -Label "Two-Way Trust"
            } -Height "500px"
            }
        }
    }
}

This is the result:

Rendered AD Topology Diagram Example

Fig. 22 An Active Directory topology diagram using a hierarchical layout.

Complete Practical Example: Infrastructure Network Topology Map

The following script gathers network interface data and constructs a multi-tier network map complete with interactive node dragging, zooming, directional paths, and FontAwesome status indicators:

   New-HTML -Title "Data Center Network Diagram" -FilePath "$env:USERPROFILE\Desktop\NetworkMap.html" -Show {
       New-HTMLTab -Name "Topology" -IconSolid "network-wired" {
           New-HTMLSection -HeaderText "Production Infrastructure Mesh" {
               New-HTMLPanel {
                   New-HTMLDiagram -Diagram {

                       # 1. External & Perimeter Layer
                       New-DiagramNode -Id "INET" -Label "Internet / WAN" -Shape "circle" -ColorBackground "#0288D1"
                       New-DiagramNode -Id "FW01" -Label "Perimeter Firewall" -Shape "box" -ColorBackground "#D32F2F"

                       # 2. Distribution Layer
                       New-DiagramNode -Id "SW01" -Label "Core Switch 01" -Shape "box" -ColorBackground "#1976D2"
                       New-DiagramNode -Id "SW02" -Label "Core Switch 02 (HA)" -Shape "box" -ColorBackground "#1976D2"

                       # 3. Workload Layer
                       New-DiagramNode -Id "APP"  -Label "App Tier Cluster" -Shape "ellipse" -ColorBackground "#388E3C"
                       New-DiagramNode -Id "DB"   -Label "SQL Availability Group" -Shape "database" -ColorBackground "#F57C00"

                       # 4. Define Interconnects
                       New-DiagramLink -From "INET" -To "FW01" -ArrowsToEnabled -Label "Inbound Traffic"
                       New-DiagramLink -From "FW01" -To "SW01" -ArrowsToEnabled -Color "#D32F2F"
                       New-DiagramLink -From "FW01" -To "SW02" -ArrowsToEnabled -Color "#D32F2F" -Dashes $true
                       
                       # Core Switch Trunking
                       New-DiagramLink -From "SW01" -To "SW02" -ArrowsToEnabled -ArrowsFromEnabled -Label "LACP Trunk" -Color "#1976D2"
                       
                       # App & DB Connects
                       New-DiagramLink -From "SW01" -To "APP"  -ArrowsToEnabled
                       New-DiagramLink -From "SW02" -To "APP"  -ArrowsToEnabled
                       New-DiagramLink -From "APP"  -To "DB"   -ArrowsToEnabled -Label "Port 1433"
                   } -Height "650px"
               }
           }
       }
   }

This is the result:

Rendered Basic Diagram Example

Fig. 23 An infrastructure network topology map with directional paths and status icons.

Diagramming Best Practices

  1. Explicit Heights: Always set a explicit -Height parameter (e.g., "500px" or "700px") on New-HTMLDiagram to prevent canvas collapse inside panels.

  2. Unique Node IDs: Ensure every node has a strictly unique -Id string or integer. Duplicate IDs cause link routing failures in Vis.js.

  3. Use Hierarchy for Trees: When displaying parent-child structures (such as management org charts or DNS delegation trees), always enable New-DiagramOptionsLayout -HierarchicalEnabled $true to prevent nodes from drifting into floating physics clusters.

Next Chapter: Chapter 8: Custom Styling, CSS, and Themes