FossFLOW is an open-source Progressive Web App (PWA) designed to help DevOps engineers, SREs, and infrastructure teams create clean, isometric diagrams of their systems. Built with React and powered by the Isoflow library (forked as fossflow on NPM), it runs entirely in the browser with full offline support. Unlike traditional diagramming tools that require heavy installations or cloud dependencies, FossFLOW provides a lightweight, fast, and accessible way to visualize infrastructure components like servers, databases, networks, and microservices. Its intuitive interface and multilingual support make it ideal for teams needing to document or present infrastructure layouts without switching tools or relying on proprietary software.
The tool is particularly valuable for those who need to quickly sketch architecture diagrams during meetings, onboarding, or incident response. With persistent storage via export/import and Docker deployment options, it scales from individual use to team-wide collaboration without compromising portability or privacy.
What You Get
- Isometric Infrastructure Diagramming - Create visually appealing, 3D-style diagrams of servers, databases, networks, and cloud services using a library of pre-built isometric components that mimic real-world hardware and software.
- Browser-Based PWA with Offline Support - Fully functional in any modern browser without server dependency; works offline and supports service worker caching for persistent access.
- Click-Based Connector Tool - Intuitive connection system: click a node, then click another to create a link—reducing errors and improving precision over traditional drag-based methods.
- Multi-Language Interface - Full UI translation in 9 languages including Chinese, Spanish, French, Russian, and Bengali with automatic detection and persistent preference storage.
- Export/Import as JSON - Save diagrams locally as portable JSON files for version control, sharing, or backup—no vendor lock-in.
- Docker Deployment with Persistent Storage - Deploy as a self-hosted server using Docker Compose or standalone containers, with optional persistent storage for team-wide diagram access.
- Auto-Save Every 5 Seconds - Automatic session-based saving prevents data loss during active editing sessions.
- Monorepo Architecture with Reusable Library - Includes a reusable React component library (fossflow-lib) for embedding diagramming capabilities into other applications.
Common Use Cases
- Building multi-cloud infrastructure documentation - DevOps teams use FossFLOW to visually document hybrid cloud setups with AWS, Azure, and on-prem servers in a clean, standardized format for internal wikis or client presentations.
- Onboarding new engineers to complex systems - Senior engineers create isometric diagrams of microservice architectures to help junior team members quickly understand data flow and component relationships without reading code.
- Incident response visualization - During outages, SREs rapidly sketch affected services and dependencies to communicate scope to stakeholders—using FossFLOW’s fast drag-and-drop or click-based connectors.
- DevOps teams managing microservices across multiple environments - Teams use the exportable JSON format to version-control diagram changes alongside infrastructure-as-code files in Git, ensuring diagrams stay synchronized with actual deployments.
Under The Hood
FossFLOW is a comprehensive, open-source flow diagramming tool designed with extensibility and internationalization in mind. It integrates a frontend editor, backend service, and shared library within a modular monorepo structure, offering a unified development experience across components and documentation.
Architecture
The system adopts a modular monolithic structure that clearly separates frontend, backend, and shared library components. This approach enables well-defined modules and layered organization.
- The codebase is organized into distinct packages for the app, backend, and reusable components, promoting modularity and reusability.
- UI elements are structured in a component library that separates presentation logic from business logic for better maintainability.
- Design patterns like error boundaries and storage managers are used to handle edge cases and state management effectively.
- Data flow is managed through a combination of React components and service layers, ensuring clear communication between UI and storage services.
Tech Stack
The project leverages modern web technologies with a strong emphasis on TypeScript and React for frontend development, complemented by Node.js for backend services.
- Built with TypeScript and React, using a monorepo setup to manage multiple packages including frontend, backend, and shared libraries.
- Key dependencies include MUI for UI components, Zod for schema validation, Zustand for state management, and Selenium for end-to-end testing.
- Development tools such as Rsbuild, NPM workspaces, and Docker support efficient building, dependency management, and containerization.
- Testing frameworks like Jest, Pytest, and Selenium WebDriver are integrated for unit, integration, and end-to-end test coverage.
Code Quality
The codebase reflects a mixed level of quality with consistent use of modern React patterns and extensive test coverage. While some areas show technical debt, overall practices are solid.
- Comprehensive testing is applied across components with a balance of unit and integration tests to ensure reliability.
- Error handling is implemented through widespread try/catch blocks, though some inconsistencies suggest room for improvement.
- Code style and structure are maintained through shared configurations and style guides, ensuring a degree of consistency.
- Some code patterns indicate potential technical debt that could be addressed to enhance long-term maintainability.
What Makes It Unique
FossFLOW distinguishes itself through its multi-language support and modular architecture that unifies frontend, backend, and library components in a single ecosystem.
- The tool is built with extensibility and internationalization as core features, enabling broad accessibility and customization.
- It uniquely combines a frontend editor, backend service, and shared library into a cohesive monorepo structure that streamlines developer workflows.
- The modular approach allows for independent development and testing of each component while maintaining a consistent user experience.