📋 Workflow Builder - Complete Documentation
Link to my website:- https://avi-47.github.io/workflow_builder_web/A modern, interactive web-based flowchart and workflow diagram builder with drag-and-drop functionality, real-time editing, and PDF export capabilities.
- Drag & Drop Interface: Intuitive element placement from sidebar to canvas
- 8 Element Types: Start/End, Process, Decision, Connector, Document, Database, Predefined, and Delay shapes
- Smart Connections: Visual connection points with curved arrow connectors
- Real-time Editing: Click-to-edit text with live preview
- Multi-selection: Select multiple elements with Ctrl/Cmd+Click
- Color Customization: Change text and border colors for elements
- Grid Background: Clean grid layout for precise alignment
- Zoom Controls: Zoom in/out with mouse wheel or controls (30%-300%)
- Responsive Design: Works on desktop and mobile devices
- Undo/Redo: Full history tracking with Ctrl+Z support
- Copy/Paste: Duplicate elements and workflows
- PDF Export: High-quality PDF generation of your diagrams
- Keyboard Shortcuts: Speed up workflow creation with hotkeys
- Auto-save State: Maintains your work during the session
- Clone or Download: Get the
workflow_builder.htmlfile - Open in Browser: Simply open the HTML file in any modern web browser
- Start Creating: Drag elements from the sidebar to the canvas
- Connect Elements: Click connection points to link elements
- Export: Use the "Export PDF" button to save your diagram
- Drag & Drop: Drag elements from the left sidebar to the canvas
- Keyboard Shortcuts: Use hotkeys to quickly add elements:
S- Start/End elementP- Process elementD- Decision elementC- Connector elementO- Document elementB- Database elementR- Predefined elementL- Delay element
- Text Editing: Click any element to edit its text
- Color Customization: Use the color picker to change text and border colors
- Moving Elements: Click and drag elements to reposition them
- Deleting Elements: Click the × button or press Delete/Backspace
- Click a connection point on any element (blue dots appear on hover)
- Click another connection point on a different element
- A curved arrow will connect the elements
- Click connections to select and delete them
- Zoom: Use Ctrl+Mouse Wheel, zoom controls, or keyboard shortcuts:
Ctrl +- Zoom inCtrl -- Zoom outCtrl 0- Reset zoom
- Selection:
- Click elements to select
Ctrl+A- Select allCtrl+Click- Multi-select
- Copy/Paste:
Ctrl+Cto copy,Ctrl+Vto paste selected elements
| Action | Shortcut | Description |
|---|---|---|
| Add Start | S |
Create Start/End element |
| Add Process | P |
Create Process element |
| Add Decision | D |
Create Decision element |
| Add Connector | C |
Create Connector element |
| Add Document | O |
Create Document element |
| Add Database | B |
Create Database element |
| Add Predefined | R |
Create Predefined element |
| Add Delay | L |
Create Delay element |
| Delete | Del/Backspace |
Delete selected elements |
| Undo | Ctrl+Z |
Undo last action |
| Select All | Ctrl+A |
Select all elements |
| Copy | Ctrl+C |
Copy selected elements |
| Paste | Ctrl+V |
Paste copied elements |
| Zoom In | Ctrl + |
Increase zoom level |
| Zoom Out | Ctrl - |
Decrease zoom level |
| Reset Zoom | Ctrl 0 |
Reset to 100% zoom |
| Show Shortcuts | H |
Toggle keyboard shortcuts help |
| Cancel/Escape | Esc |
Cancel current operation |
| Element | Description | Use Case |
|---|---|---|
| Start/End | Oval shapes | Process start and end points |
| Process | Rectangles | Process steps and actions |
| Decision | Diamonds | Decision points and branching |
| Connector | Circles | Connection and flow points |
| Document | Document shape | Input/output documents |
| Database | Cylinder shape | Data storage operations |
| Predefined | Double-bordered rectangles | Predefined processes |
| Delay | Circle with arrow | Wait or delay operations |
- Modern Browsers: Chrome 70+, Firefox 65+, Safari 12+, Edge 79+
- Mobile Support: iOS Safari 12+, Chrome Mobile 70+
- Dependencies: None - pure HTML, CSS, and JavaScript
workflow_builder.html
├── HTML Structure
├── CSS Styling (embedded)
├── JavaScript Logic (embedded)
└── External Dependencies
└── jsPDF (CDN) - for PDF export
- Lightweight: Single HTML file under 50KB
- Responsive: Smooth interactions up to 100+ elements
- Memory Efficient: Clean up and garbage collection
- Export Quality: High-resolution PDF output
- Touch-friendly interface
- Responsive design for tablets and phones
- Gesture support for zoom and pan
- Optimized button sizes for touch interaction
Contributions are welcome! Here are some ways you can help:
- Bug Reports: Report issues via GitHub Issues
- Feature Requests: Suggest new features or improvements
- Code Contributions: Submit pull requests with enhancements
- Documentation: Help improve documentation and examples
- Fork the repository
- Make your changes to
workflow_builder.html - Test in multiple browsers
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with modern web standards (HTML5, CSS3, ES6+)
- PDF export powered by jsPDF
- Inspired by traditional flowchart tools with modern web capabilities
[Start] → [Process 1] → [Decision] → [Process 2] → [End]
↓
[Alternative Process] → [End]
[Database] → [Process Data] → [Document Output]
- Complex curves in connections may not export perfectly to PDF
- Very large diagrams (500+ elements) may experience performance degradation
- Mobile text editing requires careful touch handling
- Template library with common workflow patterns
- Collaborative editing support
- Export to other formats (SVG, PNG, JSON)
- Grid snap and alignment guides
- Custom element shapes and styling
- Integration with popular diagramming services
Made with ❤️ for the developer community
For questions, suggestions, or support, please open an issue on GitHub.