51m54mZ00M is an interactive web application for creating, analyzing, and visualizing complex business workflows and process flows. Built with D3.js, it provides a dynamic interface for turning data into insightful, interactive diagrams with multiple data sources and real-time editing capabilities.
Frontend Application: Single-page application built with vanilla JavaScript and D3.js for visualization rendering, featuring modular architecture with clear separation of concerns.
API Server: Node.js/Express server providing RESTful endpoints for data persistence, file management, and workflow synchronization.
Data Layer: JSON-based data storage with support for elements, connections, variables, and combined workflow files, enabling version control and easy data manipulation.
Test Suite: Comprehensive testing infrastructure for data integrity, API functionality, and browser debugging utilities.
Interactive Visualization: Zoom, pan, and drag nodes with responsive design. Multiple layout algorithms including force-directed, hierarchical, circular, grid, and manual positioning with grid-snapping capabilities.
Data Management: JSON persistence, real-time table editing with Handsontable integration, and automatic data synchronization between frontend and backend.
Advanced Controls: Search and filter nodes by name, type, or execution method. Toggle between uniform and cost-based node sizing. Graph transformation tools including rotation, flipping, centering, and auto-fitting.
Export Capabilities: NEW! Vector-based PDF export with true scalable graphics (10-100x smaller files), multiple page formats (A4, A3, Letter, etc.), orientation options, and export frame preview. Also supports SVG export and JSON data export for backup and sharing workflows.
Validation Tools: Built-in connection verification, orphaned node detection, data consistency checking, and comprehensive error reporting.
- Single select: Click a node.
- Toggle select: Cmd/Ctrl + Click additional nodes.
- Multi-select (box): Hold Shift and drag on empty space to draw a rectangle and add nodes inside the box to your selection.
- Clear selection: Press Escape.
- Select all: Cmd/Ctrl + A.
- Force layout:
- Dragging a selection moves them together and temporarily pins them to the pointer; on release they rejoin the simulation.
- Manual-grid and Hierarchical-Orthogonal:
- Dragging a selection moves them together and keeps their positions fixed where you drop them.
- Positions snap to the configured grid size in Manual-grid.
- Show/Hide Grid: Toggle the grid overlay.
- Grid Size: Adjust with the slider; snapping respects this size.
- Snap All To Grid: Snap every node to the nearest grid intersection.
- Save Layout: Download a JSON with current positions.
- Load Layout: Load a previously saved positions JSON.
- Cmd/Ctrl + A: Select all nodes
- Escape: Clear selection
- Shift + Drag (on background): Box-select (adds to selection)
- Mouse wheel, drag background to pan.
- While Shift is held for box-selection, zoom/pan are temporarily disabled to avoid conflicts.
- Force: Organic physics-based arrangement; useful for exploration. Group drag pins during interaction then releases.
- Hierarchical: Top-down layering with collision.
- Hierarchical-Orthogonal: Clean right-angle links with fixed positions; great for presentations.
- Circular: Ring layout for overviews.
- Grid: Automatic grid placement for balanced spacing.
- Manual-grid: You control placement; nodes snap and stay where you drop them.
- Use Save Layout to export positions (and grid size) to a JSON file.
- Use Load Layout to bring positions back later—handy for sharing or restoring a curated layout.
- Shift-drag doesn’t draw a box: Ensure you start dragging on empty space with Shift held; zoom/pan are disabled while Shift is down.
- Nodes slide back after dragging: You’re likely on Force layout; that’s expected as the simulation resumes. Switch to Manual-grid to keep positions fixed.
- API server offline: The app will attempt direct file loading from the
data/folder if the API isn’t available.
- Node.js (version 14.0.0 or higher)
- npm (comes with Node.js)
git clone https://github.com/yourusername/workflow-visualizer.git
cd workflow-visualizer
npm install# Start frontend development server
npm run dev
# Start API server (in separate terminal)
npm run server
# Run comprehensive tests
npm run testThe application will be available at http://localhost:5174 with API server running on http://localhost:3001.
workflow-visualizer/
├── index.html # Application entry point with complete UI layout
├── package.json # Dependencies, scripts, and project metadata
├── server.js # Express API server for data persistence
├── LICENSE # MIT license
├── README.md # This documentation
src/
├── app.js # Application bootstrap and initialization
├── style.css # Main stylesheet importing modular CSS
├── js/ # Core JavaScript modules
│ ├── core.js # WorkflowVisualizer class and application state
│ ├── data.js # Data processing, parsing, and validation
│ ├── render.js # D3.js visualization rendering engine
│ ├── interactions.js # User interactions and event handling
│ ├── layouts.js # Graph layout algorithms implementation
│ ├── ui.js # User interface components and controls
│ ├── export.js # PDF export functionality
│ ├── fileManager.js # File operations and API communication
│ └── utils.js # Utility functions and helpers
└── styles/ # Modular CSS architecture
├── base.css # CSS variables and reset styles
├── components.css # Reusable UI component styles
├── layout.css # Application layout and structure
├── responsive.css # Mobile and responsive design
└── visualization.css # D3.js visualization styling
data/
├── elements.json # Workflow nodes/elements definition
├── connections.json # Node relationships and flows
├── variables.json # Dynamic variables for calculations
└── workflow.json # Combined workflow data with metadata
tests/
├── README.md # Testing documentation and usage guide
├── verify-sync.js # Comprehensive system verification
├── test-data-sync.js # Data integrity and consistency testing
├── test-api-simple.js # API endpoint connectivity testing
├── test-api.js # Browser-based API testing utilities
├── debug-clear-cache.js # Browser localStorage cache clearing
├── debug-test-data.js # Sample data for development testing
└── debug-test-table.js # Table modification testing utilities
The main WorkflowVisualizer class orchestrates the entire application lifecycle. It manages state synchronization between table data (elements, connections, variables) and visualization data (nodes, links). Key responsibilities include data loading from multiple sources (API, direct files, localStorage), layout management, and event coordination between modules.
Key Functions:
initializeApp(): Application entry point and instance creationloadFromJsonFiles(): Data loading with API-first, file fallback strategyupdateVisualization(): Central visualization update coordinatorsyncTableDataToVisualization(): Bidirectional data synchronization
Handles all data transformation, validation, and computation. Supports both legacy flat array format and modern JSON table format. Implements flow-based volume calculations for workflow analytics.
Key Functions:
processData(): Main data transformation pipelinecomputeDerivedFields(): Calculate node volumes and flow metricsverifyConnections(): Data consistency validation- Import/export functions for JSON formats
D3.js-based rendering system for creating interactive network diagrams. Manages SVG creation, node and link rendering, and visual state updates.
Key Functions:
initVisualization(): SVG setup and zoom/pan initializationrenderVisualizationElements(): Node and link rendering with event bindingupdatePositions(): Animation and position updateshighlightNode()/clearHighlight(): Interactive highlighting system
Manages all user interactions including drag-and-drop, zoom/pan, filtering, and node selection. Coordinates between user actions and application state changes.
Key Functions:
- Drag and drop with grid snapping support
- Filter system for nodes by multiple criteria
- Zoom and pan management with boundaries
- Event propagation and state updates
Implements multiple graph layout algorithms for different visualization needs. Each layout is self-contained and can be applied independently.
Available Layouts:
- Force-directed simulation for organic positioning
- Hierarchical layouts (top-down and orthogonal)
- Circular arrangement for cycle visualization
- Grid layouts for structured presentations
- Manual positioning with grid snapping
Handles all UI components including control panels, tables, buttons, and modal dialogs. Integrates Handsontable for advanced data editing capabilities.
Key Functions:
initEditorTables(): Handsontable initialization and configuration- Event binding for all UI controls
- Status message system
- Panel management and responsive behavior
Manages data persistence through API server communication. Handles downloads and synchronization with the backend storage system.
Key Functions:
saveToFiles(): API-based data persistenceloadFromFile(): JSON file parsing- Auto-save functionality with change tracking
ENHANCED! Vector-based PDF export using svg2pdf.js for true scalable graphics. Creates professional documents with multiple page format options.
Features:
- Vector PDF export (replaces old rasterized approach for 10-100x smaller files)
- Multiple page formats (A4, A3, A5, Letter, Legal, Tabloid, Custom)
- Portrait/Landscape orientation support
- Export frame overlay for preview
- Settings persistence in localStorage
- SVG export option
- Metadata inclusion (node count, layout, timestamp)
- Error handling and user feedback
New Module: export-settings-manager.js handles export UI and configuration.
Common utility functions used across the application including node sizing calculations, grid snapping, file downloads, and status messaging.
{
"id": "unique_identifier",
"name": "Display Name",
"type": "Resource|Action|Decision|State",
"area": "Functional Area",
"platform": "Platform Name",
"execution": "Manual|Automatic|Applicant",
"cost": 0.0,
"incomingVolume": "variable_name_or_number",
"nodeMultiplier": "variable_name_or_number",
"description": "Node description",
"computedVolumeIn": 0.0
}{
"id": "from_id->to_id",
"fromId": "source_node_id",
"toId": "target_node_id"
}{
"variable_name": 0.0,
"callback_rate": 0.25,
"incoming_volume": 2000
}Health check endpoint returning server status and timestamp.
Returns complete workflow data including elements, connections, and variables.
Saves workflow data to JSON files. Accepts elements, connections, and variables in request body.
npm run dev # Start Vite development server
npm run build # Build production bundle
npm run preview # Preview production build
npm run server # Start API server
npm run test # Run comprehensive verification
npm run test:data # Test data consistency
npm run test:api # Test API connectivity
npm run filter:set -- <name> # Apply a saved filter set to data and preview matches
npm run debug:cache # Clear browser cache instructions
npm run debug:table # Table testing instructionsUse npm run filter:set -- --list to show the saved set names before applying one.
- Modern browsers with ES6+ support
- Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
- Mobile browsers with touch interaction support
Core Libraries:
- D3.js v7.9.0 (visualization)
- Vite v7.1.7 (development server)
- Express v4.21.2 (API server)
- Handsontable v14.3.0 (table editing)
Export and Processing:
- jsPDF v3.0.3 (PDF generation)
- svg2pdf.js v2.2.4 (vector SVG to PDF conversion) NEW!
- html2canvas v1.4.1 (legacy support)
Development Tools:
- CORS v2.8.5 (cross-origin requests)
- JSDoc v4.0.4 (documentation generation)
This project is licensed under the MIT License - see the LICENSE file for details.
See the organized documentation in docs/ (start at docs/README.md for an index).