BPMN Viewer for Edge

CRX id

flfoebllaenfjpceapjjpjjgmfldmfeh

Description from extension meta

View and validate BPMN 2.0 diagrams

Description from store ### Introduction BPMN Viewer is a lightweight, user-friendly web application for viewing and validating BPMN 2.0 (Business Process Model and Notation) diagrams. It provides an intuitive interface for users to load, view, and export BPMN diagrams. ### Key Features - **Flexible File Support**: - Support any file extension (.bpmn, .xml, .txt, etc.) - Automatic detection and extraction of BPMN content from web service responses - Smart content validation regardless of file extension - **Interactive Viewing**: - Pan and zoom controls with mouse wheel support - Drag to move the diagram - Fit to viewport option - Zoom in/out buttons - Reset view functionality - **Fullscreen Mode**: - XML Editor fullscreen for better code editing - Diagram Preview fullscreen for detailed viewing - ESC key to exit fullscreen - Automatic resize and adjustment - **Export Options**: - Export diagrams as SVG format - Export diagrams as PNG format - High-quality output with proper scaling - **Advanced XML Editor**: - Built-in Ace editor with syntax highlighting - Toggle syntax highlighting on/off - Multiple theme support (GitHub, Tomorrow Night, Textmate) - Auto-sync with diagram content - **Theme Support**: - Light/Dark mode switch with smooth transitions - Automatic theme synchronization across all components - BPMN diagram elements adapt to theme colors - Persistent theme preference storage - **Complete Multilingual Support**: - Full English/Chinese language support - Real-time language switching for all UI elements - Localized file status and error messages - Language preference synchronization - **Lane Management**: - Automatic lane label adjustment and positioning - Custom lane label styling for better visibility - Optimized rendering for complex diagrams - **Intelligent Error Handling**: - Comprehensive file format validation - Web service response detection and extraction - Clear, localized error messages and warnings - Graceful handling of invalid BPMN content - **Edge Extension Integration**: - Seamless Edge browser integration - Settings synchronization across sessions - Optimized Content Security Policy - Extension-specific UI adaptations ### Usage 1. **File Loading**: - Click the file input area to select any file containing BPMN content - Supports .bpmn, .xml, .txt, and any other file extensions - Click "Load & Validate" to process and display the diagram 2. **Viewing & Navigation**: - Use mouse to drag and pan the diagram - Zoom with mouse wheel or zoom control buttons - Click "Reset View" to fit diagram to viewport 3. **Fullscreen Mode**: - Click the expand icon in XML Editor header for fullscreen editing - Click the expand icon in Diagram Preview header for fullscreen viewing - Press ESC key or click the compress icon to exit fullscreen 4. **Customization**: - Switch between light/dark themes using the theme toggle - Change language between English/Chinese - Toggle XML syntax highlighting on/off 5. **Export Functions**: - Export current diagram as SVG vector format - Export current diagram as PNG raster format ### Technical Details - **Frontend Technologies**: HTML5, CSS3, JavaScript (ES6+) - **BPMN Rendering**: bpmn-js library for professional diagram rendering - **Code Editor**: Ace Editor with XML syntax highlighting and multiple themes - **UI Framework**: Bootstrap 5 for responsive design and components - **Icons**: Font Awesome for consistent iconography - **Architecture**: Modular design with separation of concerns - **Browser Compatibility**: Modern browsers with Edge Extension support - **Storage**: Local storage for user preferences and settings synchronization - **Security**: Content Security Policy optimized for Edge Extension environment

Latest reviews

(2025-06-16) 业: easy to use, very nice

Statistics

Installs

26

Links

Extension in store