VerityDraw User Guide

Getting Started

The tool is an architecture and security workspace for creating, analyzing, and maintaining component and connection diagrams with controls, properties, AI assistance, and reporting.

Components

Components are the building blocks of your network diagram. The tool provides a comprehensive library of network components organized by category.

Adding Components

1. Open a category from the component sidebar (Devices, Servers, Network, App Arch, Advanced, Other)
2. Drag-and-drop to canvas or click to create (where enabled)
3. Select a component to open sidebar actions and editable properties
4. Use Duplicate to create a same-type unique copy
5. Use multi-select to operate on several components at once

Component Categories

Component Management

• Moving: Click and drag, or select and use arrow keys
• Resizing: Drag the resize handle (bottom-right corner) for segments and annotations
• Deleting: Hover and click the × button, or select and press Delete key
• Multi-select: Ctrl+click or drag to select multiple components

Connections

Connections represent the links between components in your network. The tool supports various cable types and includes connection-specific security controls.

Creating Connections

1. Double-click the first component (border turns blue)
2. Double-click the second component (both turn purple)
3. Select cable type and add optional link URL in the modal
4. Click "Create Connector" to establish the connection

Cable Types

Connection Management

• View Controls: Click the gray badge on connections to see security controls
• Delete: Hover over connection and click the red × button, or double-click the line
• Edit: Use the sidebar Edit Connection action to modify cable type/properties
• Auto-update: Connections automatically adjust when components move

Properties & Actions

Select a component or connection to open the right properties sidebar. This is the main editing and operations hub.

Component Actions

• Edit Component: Open component property modal (ports, OS/version, vulnerabilities, notes, and type-specific fields)
• Security: Add/remove controls and set implementation status
• Scan Vulns: Run quick vulnerability-focused checks
• Report / Analyze: Update posture and feed reporting
• Duplicate / Delete: Clone or remove selected component

Connection Actions

• Edit Connection: Update cable type, link/doc URL, data element, and connection properties
• Security: Manage connection controls and status
• Analyze / Test: Run connection analysis and simulation test flows
• Delete: Remove the connection (component delete also removes immediate links)

Canvas Controls

The canvas supports advanced navigation and manipulation features for working with large or complex diagrams.

Panning & Scrolling

• Mouse Wheel: Vertical scrolling
• Shift + Mouse Wheel: Horizontal scrolling
• Middle Mouse Button: Click and drag to pan around the canvas
• Ctrl + Left Click: Alternative panning method
• Scroll Bars: Use scroll bars for precise navigation

Zooming

• Ctrl + Mouse Wheel: Zoom in/out
• Zoom In Button: Click the + button in zoom controls
• Zoom Out Button: Click the - button in zoom controls
• Reset Zoom: Click the expand arrows button to return to 100%
• Fit to Screen: Click the compress arrows to fit entire diagram

Selection & Multi-Select

• Single Select: Click a component (blue border)
• Multi-Select: Ctrl+click multiple components (green borders)
• Drag Selection: Click and drag to select multiple components in an area
• Select All: Press Ctrl+A
• Clear Selection: Press Escape or click empty space

Visual States

• Blue Border: Single-click selection (ready to move)
• Green Border: Multi-select mode (move together)
• Purple Pulsing: Connection mode (waiting for second component)

Security Controls

The tool includes comprehensive security control management for both components and connections, helping you document and track security measures.

Component Security Controls

1. Click the security badge (numbered circle) on any component
2. A compact control display box appears showing all assigned controls
3. View, add, or remove security controls as needed
4. Each control can include detailed notes and implementation status

Connection Security Controls

1. Click the gray control badge on any connection line
2. View connection-specific security controls in the display box
3. Common controls include encryption, access control, monitoring
4. Add custom controls specific to the connection type

Security Control Categories

AI Generation

Use AI for diagram generation, connection recommendations, and security-assisted analysis.

Using AI Generation

1. Click the "AI Generate" button in the toolbar or select Tools -> AI Generate
2. Enter a detailed description of your network architecture
3. Include specific components, connections, and security requirements
4. Click "Generate" and wait for the AI to process your request
5. Review and modify the generated diagram as needed

AI Prompt Examples

AI Features

• Intelligent Layout: Components are positioned logically with proper spacing
• Automatic Security: AI assigns relevant security controls to each component
• Smart Connections: Appropriate cable types and connection paths
• Professional Naming: Clear, descriptive labels for all elements
• Best Practices: Follows network architecture best practices

Simulation & Analysis

The built-in simulation console supports point-to-point testing, security review, and route-aware analysis.

What It Evaluates

• Point-to-point tests: Reachability and policy checks by protocol (ping/http/https/ssh/dns)
• Multi-route evaluation: If more than one route exists, all discovered routes are analyzed
• Security review: Existing controls + missing recommendations across nodes and connections in tested route set
• Status-driven posture: Implemented/In Progress/Not Implemented states affect risk/compliance summaries

Operational Flow

1. Open simulation console and choose source/destination/test type
2. Run test and review route logs, blocked points, and warnings
3. Apply/update controls directly from review actions
4. Re-run test to verify improved posture and reachability

Saving & Loading

The tool provides multiple ways to save and load your diagrams, with automatic persistence and comprehensive backup options.

Auto-Save & Persistence

• Auto-Save: Diagrams are automatically persisted while editing
• Page Reload: Latest working state is restored from local persistence and saved records
• Unsaved Changes: Warning dialogs prevent accidental loss of work
• Change Detection: System tracks whether you have unsaved changes

Manual Saving

1. Click File -> Save Diagram or press Ctrl+S
2. Use Rename when you want to set/change a custom diagram name
3. Save updates the existing diagram; it does not create unintended duplicates
4. Receive confirmation when save is complete

Loading Diagrams

1. Click File -> Open Diagram or use the Open button
2. Browse your saved diagrams in the modal
3. Click the folder icon to load a diagram
4. Use the red X to delete unwanted diagrams

Diagram Management

• Unique Naming: Automatic unique names if you do not specify one
• Rename workflow: Use top bar rename button (popup), since saving is automatic
• Search & Filter: Find diagrams by name or date
• Bulk Operations: Select multiple diagrams for batch operations
• Import/Export: Share diagrams via JSON files

Starting New Diagrams

1. Click File -> New Diagram or use Ctrl+N
2. If you have unsaved changes, a warning dialog appears
3. Choose to save, discard changes, or cancel
4. New diagram starts with clean canvas

Keyboard Shortcuts

Master these keyboard shortcuts to work more efficiently with the diagram tool.

Troubleshooting

Common issues and their solutions to help you get the most out of the diagram tool.

Common Issues

Performance Tips

• Large Diagrams: Use zoom and pan to navigate efficiently
• Many Components: Consider breaking into multiple diagrams
• Slow Loading: Clear browser cache and refresh the page
• Memory Issues: Close other browser tabs and restart browser

Browser Compatibility

The tool works best with modern browsers. Recommended browsers:

• Chrome 90+ (Recommended)
• Firefox 88+
• Safari 14+
• Edge 90+