Network
The Network Diagrams module in SmartDoc provides an interactive visual editor for creating and maintaining infrastructure diagrams for your clients. Each node in the diagram can be linked to a real SmartDoc asset, and diagrams can be exported in PNG, SVG, or PDF format for reports and documentation delivered to clients.
Table of Contents
- Overview
- Diagram Types
- Diagram List Interface
- Diagram Editor
- Node Palette
- Custom Node Types
- Connections (Edges)
- Linking to SmartDoc Assets
- Export and Sharing
- Structured Network Module
- Best Practices
Overview
The Network Diagrams module addresses a fundamental MSP documentation need: having a clear, up-to-date visual representation of a client's network architecture. Whether for onboarding, an annual review, an audit, or an emergency intervention, a well-maintained diagram significantly reduces the time needed to understand the infrastructure.
The editor is based on the React Flow library (formerly @xyflow/react), which provides a smooth drag-and-drop and node connection experience directly in the browser.
Key points:
- Three diagram types: network, mind map, org chart
- Customizable nodes: Lucide icons or imported vector SVG (Adobe Illustrator, Visio, etc.)
- Asset linking: each node can display the IP, hostname, or MAC address of the linked asset
- Multi-format export: PNG, SVG, PDF
- Duplication: clone an existing diagram as a starting point
- Access levels: each diagram can be marked as internal or shareable with the client
Diagram Types
| Type | Icon | Typical Use |
|---|---|---|
| Network diagram | Network | IT infrastructure, servers, network equipment, topology |
| Mind map | Brain | Brainstorming, idea mapping, process analysis |
| Org chart | People | Company structure, hierarchy, teams |
The diagram type is defined at creation and determines the node library available in the palette.
Diagram List Interface
Navigation
Access via the SmartDoc sidebar: SmartDoc > Network Diagrams
Display Modes
Four modes are available, adjustable from the buttons at the top right:
| Mode | Description |
|---|---|
| Small cards | Very dense grid (8 columns max), name and type only |
| Medium cards | Balanced grid, 6 columns |
| Large cards | 4 columns, with client, date, and status |
| Table | One row per diagram, all columns, sortable by column |
Available Filters
- Text search: on the diagram name
- Status filter: Active, Inactive, Archived
- Access level filter: Internal, Client
- Type filter: Network, Mind map, Org chart
Page Size
In table mode, it is possible to choose the number of items per page: 25, 50, 75, or 100.
Actions from the List
| Action | Description |
|---|---|
| Click on a card | Opens the editor in a new tab |
| Context menu (three dots) | Edit, Duplicate, Delete |
| Duplicate | Opens a dialog to name the copy |
| New diagram | Opens the diagram creation dialog |
Creation Dialog
The creation dialog offers:
- Diagram type: choose from Network, Mind map, Org chart
- Name: diagram title
- Client: associated company (optional)
- Template: start from an existing template or a blank diagram
After confirmation, the editor automatically opens in a new tab.
Diagram Editor
The editor opens in a dedicated full-screen tab. It consists of:
- A central canvas: an infinite work area where nodes and connections are arranged
- A left panel: node palette and type library
- A right panel: properties of the selected element (node or connection)
- A toolbar at the top
Toolbar
| Button | Function |
|---|---|
| Save | Saves the diagram (nodes, edges, viewport) |
| Fit view | Reframes the canvas to display all elements |
| Export | Opens the export menu (PNG, SVG, PDF) |
| Toggle left panel | Hides or shows the palette |
| Toggle right panel | Hides or shows properties |
| Theme toggle | Switches between dark and light mode |
| Language toggle | Alternates between French and English |
Canvas Controls
The React Flow editor includes standard controls:
- Zoom in/out: mouse wheel or + / - buttons
- Pan: hold Space + drag, or middle-click
- Multi-select: hold Shift + click on multiple nodes
- Delete: Delete or Backspace key on a selected node/edge
- Minimap: thumbnail view in the bottom right for navigation on large diagrams
- Alignment grid: grid or dot background for aligning elements
Node Palette
The left palette displays available node types, organized in accordion categories.
Using the Palette
Two methods to add a node:
- Drag-and-drop: grab a node type from the palette and drop it onto the canvas at the desired location
- Click: a single click on a node type adds it to the center of the canvas
Default Available Icons
The palette includes icons for all common network equipment:
| Icon | Represents |
|---|---|
| Server | Physical or virtual servers |
| Router | Routing equipment |
| Network | Switch, hub, generic topology |
| Firewall | Firewall, UTM |
| Cloud | Cloud (AWS, Azure, GCP) |
| Monitor | Workstations, monitors |
| WiFi | Wireless access points |
| Hard Drive | Storage, NAS, SAN |
| Printer | Network printers |
| Smartphone | Mobile devices |
| Database | Database servers |
| Globe | Internet, WAN |
| Padlock | Security, VPN, encryption |
| CPU | Processing equipment |
| Radio | Wireless links, antennas |
| Laptop | Laptops |
| Cable | Wired connections |
| Brain | AI, automation (used for mind maps) |
| And many more... | Organizations, teams, locations, etc. |
Palette Search
A search field at the top of the palette allows filtering node types by name.
Custom Node Types
Node types are fully customizable by the MSP from the Settings > Network Node Types page.
Node Type Properties
| Property | Description |
|---|---|
| Name (EN/FR) | Label displayed in the palette and on the canvas |
| Icon | Selection from available Lucide icons |
| Custom SVG | Import of a vector SVG icon (max 200 KB) |
| Color | Node background color (purple, blue, cyan, green, orange, red, pink, etc.) |
| Tags | Keywords for filtering |
| Category | Group in the palette |
| Scope | Global (all diagram types) or specific to a type |
Importing Custom SVG Icons
SmartDoc accepts SVG icons from professional software such as Adobe Illustrator or Visio. The system:
- Validates and sanitizes the SVG (removes malicious scripts via DOMPurify)
- Makes SVG identifiers unique to avoid conflicts when multiple identical icons are present on the canvas
- Handles Illustrator CSS classes (
st0,st1, etc.) to avoid style conflicts - Supports transparent icons (without a colored background) for detailed SVGs
Node Categories
Node types can be organized into customizable categories. Each category appears as an accordion section in the palette, making navigation easier when the number of types is large.
Connections (Edges)
Creating a Connection
To connect two nodes:
- Hover over the edge of a node until the connection points (handles) appear
- Click and drag from a connection point to the target node
- Release on the target node to create the connection
Connections are bidirectional by default: each side of a node (top, bottom, left, right) has source and target connection points.
Connection Styling
The properties panel allows customizing each connection:
| Property | Options |
|---|---|
| Color | Gray, Blue, Green, Red, Orange, Purple, Cyan, Pink |
| Thickness | Thin (1px), Medium (2px), Thick (4px) |
| Line style | Solid, Dashed |
| Arrows | None, End, Start, Both ends |
| Path type | Straight, Smooth (curve), Step (right angle), Bezier |
| Label | Text displayed on the connection |
| Label color | Customizable |
| Label background | Transparent, White, or color |
| Label position | Movable by drag-and-drop |
Disconnecting
Select an edge then press Delete or Backspace to remove it.
Linking to SmartDoc Assets
How It Works
Each node can be linked to a SmartDoc asset (server, switch, firewall, workstation, etc.). Once the link is established, the asset information is displayed directly on the node in the diagram.
Information Displayed on the Node
The following fields can be individually enabled or disabled in the node properties panel:
| Information | Description |
|---|---|
| Asset name | Name as entered in the asset record |
| Hostname | Network hostname of the equipment |
| IP address | Primary IP address |
| MAC address | Primary MAC address |
Linking an Asset to a Node
- Select a node on the canvas
- In the properties panel (right), click "Link an asset"
- Search for the asset by name, hostname, or IP in the search list
- Select the asset — the information updates immediately on the node
The asset search takes into account the client selected in the SmartDoc context.
Label Position
The position of the text information around the node is configurable:
- Bottom, Top, Left, Right
- Bottom-left, Bottom-right, Top-left, Top-right
- Hidden
Resizing SVG Nodes
Nodes using a custom SVG icon can be resized by dragging the resize handles that appear upon selection.
Export and Sharing
Export Formats
| Format | Description |
|---|---|
| PNG | High-resolution image, ideal for Word or PowerPoint reports |
| SVG | Editable vector in Illustrator, Inkscape, or embeddable in the web |
| Print-ready document or email attachment |
The export captures the entire diagram visible on the canvas, including nodes, connections, and labels.
Access Levels
Each diagram is associated with an access level:
- Internal: visible only to the MSP team in SmartDoc
- Client: shareable with client contacts via the SmartDoc client portal
Duplication
Duplication creates a complete copy of a diagram (nodes, edges, viewport, settings) under a new name. This is the recommended method for creating similar diagrams for multiple clients or for creating an archived version before a major update.
Structured Network Module
Alongside the visual editor, SmartDoc has a structured network module accessible from the Network tab in the SmartDoc navigation bar. This module manages network data in a tabular and hierarchical manner.
Network Overview
The overview page displays a hierarchical tree:
Client company
|__ Site (e.g., Montreal Headquarters)
|__ Site VLANs
|__ Site subnets
|__ Assets linked to the subnet
Data loads lazily: sites only load when the company is expanded, and subnets only when the site is expanded.
Site Management
A site represents a client's physical location. Site information includes:
| Field | Description |
|---|---|
| Name | Descriptive name of the site |
| Address | Full physical address (street, city, province, country) |
| Phone | Site phone number |
| Contact | Name of the on-site contact |
| ISP | Internet service provider name |
| Circuit ID | Circuit number at the ISP |
| Bandwidth | Link speed (e.g., 1 Gbps) |
| WAN IP | Public IP address of the WAN connection |
VLAN Management
VLANs are associated with a site and a company. Each VLAN is defined by:
| Field | Description |
|---|---|
| VLAN ID | VLAN number (1 to 4094) |
| Name | Descriptive name of the VLAN |
| Description | Additional information |
| Usage | Data, Voice, Management, Guest, IoT, DMZ, Security, Other |
Subnet Management
Subnets document the IP address ranges used by each client. Each subnet includes:
| Field | Description |
|---|---|
| CIDR | CIDR notation of the IP range (e.g., 192.168.10.0/24) |
| Type | LAN, WAN, DMZ, VPN, Guest, Management, VoIP, IoT, Other |
| Description | Information about the subnet's usage |
| DHCP Enabled | Indicates whether DHCP is active on this network |
| DHCP Range | Start and end addresses of the DHCP range |
| Primary DNS | IP address of the primary DNS server |
| Secondary DNS | IP address of the secondary DNS server |
| Associated Site | Site hosting this subnet |
| Associated VLAN | VLAN on which this subnet is configured |
Inter-Site Connections
The module allows documenting connections between two sites of the same client (VPN, MPLS, SD-WAN, point-to-point link, etc.):
| Connection Type | Description |
|---|---|
| VPN | VPN tunnel between two sites |
| MPLS | Carrier MPLS link |
| SD-WAN | Software-defined WAN |
| Point-to-point | Dedicated link |
| Internet | Connection via the public Internet |
| IPSec | Encrypted IPSec tunnel |
| Other | Custom type |
Asset-Network Linking
The module allows linking a SmartDoc asset to a subnet with:
- Asset IP address on this network
- Interface MAC address
- Network interface name (e.g., eth0, ens3)
- "Primary interface" indicator
Site Detail Page
The site detail page displays all site information as well as associated VLANs, subnets, and assets in dedicated tabs.
Best Practices
- Name your diagrams descriptively and include the date or version (e.g., "Main Network - XYZ Corp - 2026", "WAN Topology v3")
- Create one diagram per "layer" of the infrastructure to avoid overcrowded diagrams: one physical diagram (equipment), one logical diagram (IP, VLANs), one security diagram (flows, zones)
- Systematically link nodes to SmartDoc assets so the diagram stays up to date when asset information changes
- Use duplication to create a "before intervention" version of a diagram before making major modifications
- Archive old diagrams rather than deleting them to preserve the history of infrastructure evolution
- Export to PDF and attach the diagram to reports delivered to the client during monthly or quarterly reviews
- For SVG icons imported from Illustrator, verify that the file does not exceed 200 KB and does not contain external links
- Use custom node categories to organize your library if you manage many client-specific equipment types
- Fill in the structured network module (sites, VLANs, subnets) alongside the visual diagrams: this data feeds other SmartDoc modules and enables cross-module searching and linking
Last updated: 2026-03-05