FossFLOW is a browser-based diagramming tool designed for DevOps teams and cloud architects who need to visualize infrastructure layouts with isometric depth and clarity. It solves the problem of static, low-fidelity network diagrams by offering an interactive, visually rich canvas with real-time editing and export capabilities.
Built as a React PWA using the Isoflow (fossflow) library, it runs entirely client-side with offline support, supports Docker deployment for team use, and integrates with browser storage, JSON export/import, and optional HTTP Basic Auth for secure access. The monorepo structure separates the core diagramming library from the application UI for extensibility.
What You Get
- Isometric Diagram Library - 50+ pre-built isometric icons for cloud services, servers, networks, databases, and containers, all rendered in 3D-style perspective for professional infrastructure visuals.
- Drag-and-Drop Canvas - Intuitive interface to add, move, and arrange infrastructure components with pixel-perfect grid alignment and snap-to-grid functionality.
- Connector Tools - Two modes for linking nodes: Click mode (select source then target) and Drag mode (click and drag between nodes), with automatic routing and multiplexed connections.
- JSON Export/Import - Save and share diagrams as portable JSON files that preserve all node positions, connections, and styling for version control or team collaboration.
- Auto-Save to Session Storage - Automatic backup every 5 seconds to prevent data loss during editing sessions, with recovery on browser reload.
- Docker Deployment with Persistent Storage - Deploy as a self-hosted server using Docker Compose or standalone containers, with optional persistent storage to /data/diagrams and HTTP Basic Auth support.
Common Use Cases
- Designing cloud migration plans - A DevOps engineer uses FossFLOW to map legacy on-prem systems to AWS/Azure components in an isometric view for stakeholder presentations.
- Documenting microservice architectures - A platform team creates visual diagrams of service dependencies and data flows between containers, APIs, and databases for onboarding new engineers.
- Preparing infrastructure diagrams for audits - A compliance officer exports FossFLOW diagrams as JSON to include in SOC 2 or ISO 27001 documentation with exact topology accuracy.
- Teaching cloud infrastructure concepts - A university professor uses the browser-based tool to demonstrate network topologies in real-time during virtual lectures without requiring software installs.
Under The Hood
Architecture
- Monorepo structure cleanly separates shared utilities (fossflow-lib), frontend (fossflow-app), and backend (fossflow-backend) with explicit package boundaries
- StorageService employs the Strategy pattern via dependency injection through StorageManager, enabling flexible persistence implementations without UI coupling
- Backend uses a service layer to abstract file system operations, exposing RESTful endpoints that decouple data access from presentation logic
- React components enforce type-safe data flow through well-defined interfaces and leverage context providers for scalable state management across the component tree
- Dockerized deployment uses multi-stage builds with nginx to serve static assets and proxy API requests, ensuring production-ready isolation and configuration
Tech Stack
- Node.js 22 with Express and TypeScript powers the backend, organized in a monorepo using npm workspaces for modular package management
- React 19 and Next.js form the frontend with TypeScript and MUI for UI components, bundled via Rsbuild and deployed in a production-optimized Docker environment
- CI/CD pipeline automates releases using semantic-release and conventional commits, with automated changelogs and versioned GitHub releases
- Development environment enforces type safety with strict tsconfig, Prettier formatting, and comprehensive type definitions for React and DOM APIs
Code Quality
- Extensive test coverage spans unit, integration, and E2E layers with mocked state stores and real-world user flows validated through @testing-library/react and Selenium
- Type safety is rigorously maintained via TypeScript interfaces and Zod schemas, with explicit validation tests to ensure data integrity at serialization boundaries
- Clear separation of concerns is maintained across UI, state, and data layers, with modular packages and well-defined dependency boundaries
- Consistent, domain-driven naming and comprehensive error handling with custom exceptions ensure code is readable, maintainable, and failures are actionable
What Makes It Unique
- Dynamic connector rerouting tooltips appear contextually after connection completion, using mouse position and localStorage to guide users without disrupting workflow
- Advanced connector label system supports dozens of positionable, dynamic labels with automatic cleanup of obsolete fields, far beyond standard edge labeling
- RichTextEditor ErrorBoundary recovers gracefully from React DOM manipulation errors during collaborative editing, preventing editor crashes
- Diagrams treat connectors as first-class editable entities with deep serialization, not just visual lines, enabling rich structural manipulation
- Context-aware UI controls auto-update in response to scene state changes, eliminating manual synchronization and enabling atomic, consistent interactions across the canvas