Isoflam is an isometric drawing software designed for firefighters. It allows quick scene modeling by placing elements such as vehicles, personnel, and equipment, drawing shapes, arrows, or zones, and adding text. The final diagram can be exported as an image to support operational communication or post-incident reporting.
Try the application online: https://isaratech.github.io/isoflam/
Example of Isoflam application interface showing isometric scene modeling
- Drag-and-drop editor - Quickly place firefighting vehicles, personnel, and equipment on your scene
- Image import & manipulation - Import custom images and use advanced rotation and mirroring controls
- Undo/Redo functionality - Full editing history with comprehensive undo and redo capabilities
- Layer management - Precise control over element ordering and layering
- Specialized icon library - Comprehensive collection of firefighting-specific icons and symbols
- Drawing tools - Create shapes, arrows, zones, and add text annotations with rich formatting
- Unsaved changes protection - Smart tracking system to prevent accidental data loss
- Export capabilities - Export diagrams as high-quality images for reports and communications
- Isometric view - Professional 3D-like perspective for clear scene representation
- Multi-language support - Available in French and English with automatic locale detection
- React 18.2.0 - Modern React with hooks and functional components
- TypeScript 5.1.6 - Type-safe JavaScript development
- Material-UI 5.11.10 - React component library for consistent UI design
- Emotion - CSS-in-JS library for styling
- Zustand 4.3.3 - Lightweight state management
- Paper.js 0.12.17 - Vector graphics scripting framework for isometric drawing
- GSAP 3.11.4 - High-performance animation library
- dom-to-image 2.6.0 - Library for converting DOM nodes to images
- Webpack 5 - Module bundler and build tool
- Jest 29 - JavaScript testing framework
- React Testing Library - Testing utilities for React components
- ESLint & Prettier - Code linting and formatting
- TypeScript - Static type checking
- React Hook Form 7.43.2 - Performant forms with easy validation
- React Quill 2.0.0 - Rich text editor component
- Zod 3.22.2 - TypeScript-first schema validation
- Chroma.js 2.4.2 - Color manipulation library
- UUID 9.0.0 - Unique identifier generation
This development is supported by:
This application is built upon the Isoflow library by Mark Mankarious, an open-source React component for drawing network diagrams.
The firefighting icons used in this application are provided by the Service Départemental-Métropolitain d'Incendie et de Secours (SDMIS), 2023. All rights reserved.
These icons are licensed under Creative Commons CC BY-NC-SA 4.0 and are used in accordance with the attribution requirements.
This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
The Docker image is available on Docker Hub: https://hub.docker.com/r/isaratech/isoflam
docker pull isaratech/isoflam:latest
docker run -p 80:80 isaratech/isoflam:latestFor detailed Docker usage instructions, see README-dockerhub.md.
This project uses GitHub Actions for continuous integration:
- Build and Test: Automatically runs linting, tests, and build process on all pushes and pull requests
- GitHub Pages: Deploys the application to GitHub Pages on pushes to main/master branches
- Docker Publish: Builds and publishes Docker image on pushes to main/master branches
- Node.js (version 16 or higher)
- npm (version 7 or higher)
# Clone the repository
git clone https://github.com/isaratech/isoflam.git
cd isoflam
# Install dependencies
npm install
# Start development server
npm startThe application will be available at http://localhost:3000.
| Script | Description |
|---|---|
npm start |
Starts the development server with hot reload |
npm run dev |
Starts development with file watching and auto-rebuild |
npm run build |
Creates optimized production build |
npm test |
Runs the test suite with Jest |
npm run lint |
Runs ESLint to check code quality |
npm run lint:fix |
Automatically fixes ESLint issues |
npm run docker:build |
Builds Docker-optimized version |
- Development Server: Use
npm startfor hot reload during development - Code Quality: Run
npm run lintbefore committing changes - Testing: Execute
npm testto run all tests - Production Build: Use
npm run buildfor deployment
The project uses Jest and React Testing Library for comprehensive testing:
# Run all tests
npm test
# Run tests in watch mode
npm test -- --watch
# Run tests with coverage report
npm test -- --coverage- Production: Modern browsers (>0.2% usage, not dead, not Opera Mini)
- Development: Latest Chrome, Firefox, and Safari versions
- Supported: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Isoflam supports multiple languages with automatic browser locale detection:
- French (fr) - Complete translation with specialized firefighting terminology
- English (en) - Full English support with fallback capability
- Auto-detection - Automatically detects browser language with English fallback
- 🖼️ Image Import - Import and use custom images as rectangles in your diagrams
- ↩️ Undo/Redo Functionality - Full undo and redo controls for all editing operations
- 🔄 Image Controls - Mirroring and rotation controls for imported images
⚠️ Unsaved Changes Tracking - Warning system to prevent data loss- 📚 Layer Management - Layer control buttons for precise element ordering
- 🎨 Enhanced Rectangle Tools - Advanced image manipulation capabilities
For complete changelog, see CHANGELOG.md.
- User Manual (English) - Complete guide in English
- User Manual (French) - Complete guide in French
- Changelog - Detailed version history
- Docker Hub - Container deployment guide
Contributions are welcome! Please ensure that any contributions comply with the CC BY-NC-SA 4.0 license terms.
For support and questions, please open an issue on the GitHub repository.