[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3738":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":10,"discoverSource":30},3738,"FossFLOW","stan-smith\u002FFossFLOW","stan-smith","Make beautiful isometric infrastructure diagrams","",null,"TypeScript",20461,1379,20077,17,0,44.42,"MIT License",false,"master",true,[23,24,25],"devops","infra","infrastructure","2026-06-12 02:00:53","# FossFLOW - Isometric Diagramming Tool \u003Cimg width=\"30\" height=\"30\" alt=\"fossflow\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F56d78887-601c-4336-ab87-76f8ee4cde96\" \u002F>\n\n\u003Cp align=\"center\">\n \u003Ca href=\"README.md\">English\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.cn.md\">简体中文\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.es.md\">Español\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.pt.md\">Português\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.fr.md\">Français\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.hi.md\">हिन्दी\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.bn.md\">বাংলা\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.ru.md\">Русский\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.id.md\">Bahasa Indonesia\u003C\u002Fa> | \u003Ca href=\"docs\u002FREADME.de.md\">Deutsch\u003C\u002Fa>\n\u003C\u002Fp>\n\n\n\u003Cp align=\"center\">\n\u003Ca href=\"https:\u002F\u002Ftrendshift.io\u002Frepositories\u002F15118\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Ftrendshift.io\u002Fapi\u002Fbadge\u002Frepositories\u002F15118\" alt=\"stan-smith%2FFossFLOW | Trendshift\" style=\"width: 250px; height: 55px;\" width=\"250\" height=\"55\"\u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cb>Hey!\u003C\u002Fb> Stan here, if you've used FossFLOW and it's helped you, \u003Cb>I'd really appreciate if you could donate something small :)\u003C\u002Fb> I work full time, and finding the time to work on this project is challenging enough.\nIf you've had a feature that I've implemented for you, or fixed a bug it'd be great if you could :) if not, that's not a problem, this software will always remain free!\n\n\n\u003Cb>Also!\u003C\u002Fb> If you haven't yet, please check out the underlying library this is built on by \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmarkmanx\u002Fisoflow\">@markmanx\u003C\u002Fa> I truly stand on the shoulders of a giant here 🫡\n\n[![ko-fi](https:\u002F\u002Fko-fi.com\u002Fimg\u002Fgithubbutton_sm.svg)](https:\u002F\u002Fko-fi.com\u002FP5P61KBXA3)\n\n\u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002Fstan.smith\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fcdn.buymeacoffee.com\u002Fbuttons\u002Fdefault-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\">\u003C\u002Fa>\n\nThanks,\n\n-Stan\n\n## Try it online\n\u003Cp align=\"center\">\nGo to  \u003Cb> --> https:\u002F\u002Fstan-smith.github.io\u002FFossFLOW\u002F \u003C-- \u003C\u002Fb>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n\n \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fstan-smith\u002FSlingShot\">\n  Check out my latest project: \u003Cb>SlingShot\u003C\u002Fb> - Dead easy video streaming over QUIC\n \u003C\u002Fa>\n\u003C\u002Fp>\n\n------------------------------------------------------------------------------------------------------------------------------\n\n## This just in: Connectors get multiplexed!\n\n\u003Cp align=\"center\">\n\u003Cimg src=\"demos\u002Fconnectors.gif\" alt=\"Multiplexed connectors demo\" \u002F>\n\u003C\u002Fp>\n\nFossFLOW is a powerful, open-source Progressive Web App (PWA) for creating beautiful isometric diagrams. Built with React and the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmarkmanx\u002Fisoflow\">Isoflow\u003C\u002Fa> (Now forked and published to NPM as fossflow) library, it runs entirely in your browser with offline support.\n\n![Screenshot_20250630_160954](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fe7f254ad-625f-4b8a-8efc-5293b5be9d55)\n\n- **🤝 [CONTRIBUTING.md](https:\u002F\u002Fgithub.com\u002Fstan-smith\u002FFossFLOW\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md)** - How to contribute to the project.\n\n## 🐳 Quick Deploy with Docker\n\n```bash\n# Using Docker Compose (recommended - includes persistent storage)\ndocker compose up\n\n# Or run directly from Docker Hub with persistent storage\ndocker run -p 80:80 -v $(pwd)\u002Fdiagrams:\u002Fdata\u002Fdiagrams stnsmith\u002Ffossflow:latest\n```\n\nServer storage is enabled by default in Docker. Your diagrams will be saved to `.\u002Fdiagrams` on the host.\n\nTo disable server storage, set `ENABLE_SERVER_STORAGE=false`:\n```bash\ndocker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith\u002Ffossflow:latest\n```\n\n### HTTP Basic Authentication (Optional)\n\nProtect your FossFLOW instance with HTTP Basic Auth:\n\n```bash\n# With Docker Compose\nHTTP_AUTH_USER=admin HTTP_AUTH_PASSWORD=secret docker compose up\n\n# Or with docker run\ndocker run -p 80:80 \\\n  -e HTTP_AUTH_USER=admin \\\n  -e HTTP_AUTH_PASSWORD=secret \\\n  stnsmith\u002Ffossflow:latest\n```\n\n> **Note**: Both variables must be set to enable authentication. If either is empty, the app is accessible without login.\n\n## Quick Start (Local Development)\n\n```bash\n# Clone the repository\ngit clone https:\u002F\u002Fgithub.com\u002Fstan-smith\u002FFossFLOW\ncd FossFLOW\n\n# Install dependencies\nnpm install\n\n# Build the library (required first time)\nnpm run build:lib\n\n# Start development server\nnpm run dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) in your browser.\n\n## Monorepo Structure\n\nThis is a monorepo containing two packages:\n\n- `packages\u002Ffossflow-lib` - React component library for drawing network diagrams (built with Webpack)\n- `packages\u002Ffossflow-app` - Progressive Web App which wraps the lib and presents it (built with RSBuild)\n\n### Development Commands\n\n```bash\n# Development\nnpm run dev          # Start app development server\nnpm run dev:lib      # Watch mode for library development\n\n# Building\nnpm run build        # Build both library and app\nnpm run build:lib    # Build library only\nnpm run build:app    # Build app only\n\n# Testing & Linting\nnpm test             # Run unit tests\nnpm run lint         # Check for linting errors\n\n# E2E Tests (Selenium)\ncd e2e-tests\n.\u002Frun-tests.sh       # Run end-to-end tests (requires Docker & Python)\n\n# Publishing\nnpm run publish:lib  # Publish library to npm\n```\n\n## How to Use\n\n### Creating Diagrams\n\n1. **Add Items**:\n   - Press the \"+\" button on the top right menu, the library of components will appear on the left\n   - Drag and drop components from the library onto the canvas\n   - Or right-click on the grid and select \"Add node\"\n\n2. **Connect Items**: \n   - Select the Connector tool (press 'C' or click connector icon)\n   - **Click mode** (default): Click first node, then click second node\n   - **Drag mode** (optional): Click and drag from first to second node\n   - Switch modes in Settings → Connectors tab\n\n3. **Save Your Work**:\n   - **Quick Save** - Saves to browser session\n   - **Export** - Download as JSON file\n   - **Import** - Load from JSON file\n\n### Storage Options\n\n- **Session Storage**: Temporary saves cleared when browser closes\n- **Export\u002FImport**: Permanent storage as JSON files\n- **Auto-Save**: Automatically saves changes every 5 seconds to session\n\n## Contributing\n\nWe welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n## Documentation\n\n- [FOSSFLOW_ENCYCLOPEDIA.md](FOSSFLOW_ENCYCLOPEDIA.md) - Comprehensive guide to the codebase\n- [CONTRIBUTING.md](CONTRIBUTING.md) - Contributing guidelines\n\n## License\n\nMIT\n","FossFLOW 是一个用于创建美观的等距基础设施图的强大开源渐进式 Web 应用。该项目采用 TypeScript 编写，基于 React 和 Isoflow 图形库构建，支持离线使用。其核心功能包括直观易用的界面、多路复用连接器以及对复杂网络架构的可视化呈现。特别适合 DevOps 工程师、系统管理员或任何需要清晰展示 IT 基础设施布局的人士，在规划、设计和文档编制过程中发挥重要作用。",2,"top_language"]