ORAND BPMN Studio - Complete Package

📁 Folder Structure

bpmn-studio-offline/
├── index.html              ← Main application file (open this)
├── css/
│   ├── orand-core.css     ← ORAND brand styles
│   ├── bpmn-studio.css    ← Application-specific styles
│   ├── diagram-js.css     ← BPMN diagram styles (local)
│   └── bpmn.css           ← BPMN icon font styles (local)
├── js/
│   ├── bpmn-app.js        ← Main application logic
│   ├── bpmn-data.js       ← Default diagram data
│   ├── bpmn-export.js     ← Export functionality
│   ├── bpmn-properties.js ← Properties panel logic
│   ├── bpmn-ui.js         ← UI utilities
│   └── token-simulator.js ← Token simulation engine
├── libs/
│   ├── bpmn-modeler.development.js  ← BPMN.js library (local)
│   └── jspdf.umd.min.js            ← jsPDF library (local)
├── font/
│   └── bpmn.*             ← BPMN icon fonts (local)
└── README.md              ← This file

---

🚀 Quick Start

✅ Fully Offline - No Internet Required!

1. Open index.html in your web browser
2. All libraries are local - works completely offline
3. Start creating BPMN diagrams immediately!

No setup needed - All dependencies are included and configured for offline use.

---

✨ Features

Core Features

• ✅ Full BPMN 2.0 modeling
• ✅ 100% Offline - No internet connection required
• ✅ Custom task names (Prod Line Task, Operator Task, etc.)
• ✅ Element hiding (Call Activity, Complex Gateway, etc.)
• ✅ Token simulation engine
• ✅ Breadcrumb navigation - Navigate nested subprocesses easily
• ✅ Properties panel for element editing
• ✅ Export to BPMN XML, SVG, and PDF
• ✅ Multi-level PDF export - Includes both main process and sub-process diagrams

Custom Configuration

• Hidden Elements: Call Activity, Complex Gateway, Event-Based Gateway, Inclusive Gateway, Business Rule Task, Transaction, Event Sub-Process, Receive Task
• Renamed Tasks:
  • Service Task → Prod Line Task
  • User Task → Operator Task
  • Manual Task → Manual Work Task
  • Script Task → Automation Task
  • Business Rule Task → Rules Task

Breadcrumb Navigation

• Automatically appears when drilling into subprocesses
• Shows hierarchical location (e.g., 📍 Main Process › Subprocess › Nested)
• Click any parent to navigate back up the hierarchy
• Uses semantic hierarchy - Always maintains correct path even in deeply nested structures
• Hides automatically when at top level
• Visual feedback - Hover effects and active state indicators

PDF Export Features

• Multi-level export: When drilling down into a sub-process, PDF includes:
  • Page 1: Main process diagram
  • Page 2: Sub-process detailed diagram
  • Page 3+: Documentation for both levels with clear section headers
• Smart filename: Automatically names PDF after the current process/sub-process
• Flow-based documentation: Elements documented in logical execution order

---

Configuration & Customization

All libraries are pre-configured for offline use. No additional setup required!

Local Libraries Included

✅ bpmn-js v11.5.0 - Full BPMN modeler ✅ jsPDF v2.5.1 - PDF export functionality
✅ BPMN fonts & icons - Complete icon set ✅ All CSS stylesheets - Diagram and icon styles

Everything works offline by default!

---

🖥️ Browser Compatibility

✅ Chrome/Edge - Full support
✅ Firefox - Full support
✅ Safari - Full support
⚠️ Internet Explorer - Not supported (use Edge)

---

🔒 Security & Privacy

• 100% Client-Side: All processing happens in your browser
• No Data Collection: No analytics, no tracking, no telemetry
• No Network Requests: Works completely offline - zero external connections
• Local Storage Only: Your files never leave your computer
• Content Security Policy: Strict CSP headers prevent XSS attacks
• Privacy-First Design: No cookies, no user tracking, no data transmission

---

📝 Usage Guide

Creating a Diagram

1. Open index.html
2. Drag elements from the left palette
3. Connect with arrows
4. Double-click elements to edit names
5. Use properties panel on right for details

Drilling into Subprocesses

1. Create a subprocess (or use existing)
2. Double-click the subprocess to drill in
3. Breadcrumb appears: 📍 Main Process › Subprocess
4. Click parent in breadcrumb to navigate back

Simulating Process Flow

1. Click "Start Simulation" in header
2. Click any Start Event (green circle)
3. Watch token flow through the process
4. Click "Stop Simulation" to exit

Exporting

• Export XML: Standard BPMN 2.0 format for interoperability
• Export SVG: Vector graphic for documentation and presentations
• Export PDF: Professional printable diagram with comprehensive documentation
  • From main process: Single-level export with full documentation
  • From sub-process: Multi-level export showing both main and sub-process diagrams

---

⚙️ Customization

Hide/Show Elements

Edit js/bpmn-app.js → applyHiddenElements() function:

const hiddenElements = [
    'create.call-activity',
    'create.your-element-here'  // Add more
];

Rename Tasks

Edit js/bpmn-app.js → customTranslate function:

const translations = {
    'Service Task': 'Your Custom Name',
    'User Task': 'Another Name'
};

Change Colors

Edit css/orand-core.css:

:root {
    --orand-blue: #your-color;
    --orand-orange: #your-color;
}

---

🐛 Troubleshooting

Breadcrumb not appearing

1. Make sure you're inside a subprocess (double-click it)
2. Check console for errors (F12 → Console tab)
3. Clear cache and hard refresh (Ctrl+Shift+R)

Elements not loading

1. Check console for 404 errors
2. Verify file paths are correct
3. Check if libraries are loaded (Network tab)

Simulation not working

1. Verify token-simulator.js is loaded
2. Check for JavaScript errors
3. Ensure process has Start Event

Export not working

1. Check if jsPDF library loaded
2. Verify export functions in bpmn-export.js
3. Try different browser

---

📦 File Sizes

• HTML: ~17 KB
• CSS (all): ~15 KB + BPMN styles (~180 KB)
• JavaScript (all): ~45 KB
• Libraries:
  • bpmn-js: ~2.5 MB
  • jsPDF: ~500 KB
  • BPMN fonts: ~150 KB
• Total Package: ~3.4 MB (fully self-contained)

---

🔄 Version & Updates

Current Version: 5.0 (Complete Offline Edition)

Latest Features (v5.0):

• ✅ Full offline capability - All libraries included locally
• ✅ Breadcrumb navigation - Semantic hierarchy for nested sub-processes
• ✅ Multi-level PDF export - Includes both main and sub-process diagrams
• ✅ Enhanced security - Strict Content Security Policy
• ✅ Optimized font paths - Proper local font loading
• ✅ Custom task naming - Industry-specific task labels
• ✅ Element hiding - Simplified palette configuration
• ✅ Token simulation - Visual process flow testing
• ✅ Properties panel - Complete element customization

Version History:

• v5.0 - Complete offline package with multi-level PDF export
• v4.0 - Breadcrumb navigation with semantic hierarchy
• v3.0 - Token simulation and properties panel
• v2.0 - Element hiding and custom task naming
• v1.0 - Initial BPMN modeler release

---

📄 License

MIT License - Copyright © 2026 ORAND Advisors

See LICENSE file for full details.

This tool uses:

• bpmn-js (bpmn.io) - bpmn.io license
• jsPDF - MIT License

---

🆘 Support

For issues or questions:

1. Review browser console for errors (F12 → Console)
2. Verify all files are present in the correct locations
3. Test in a different browser
4. Check the troubleshooting section above

---

💡 Tips for Best Use

1. Name your elements - Makes diagrams easier to understand
2. Use subprocesses - Break complex processes into manageable chunks
3. Test with simulation - Verify your process logic before deployment
4. Document complex gateways - Add notes in properties panel
5. Export regularly - Save your work as BPMN XML
6. Use breadcrumbs - Navigate nested processes efficiently

---

🎯 Quick Reference

Action	How To
Create element	Drag from palette
Connect elements	Click and drag arrow
Edit name	Double-click element
Edit properties	Click element → right panel
Drill into subprocess	Double-click subprocess
Navigate back	Click breadcrumb item
Start simulation	Click "Start Simulation" button
Delete element	Select + Delete key
Export diagram	Click export buttons in header

---

Copyright © 2026 ORAND Advisors