OpenFLOW – 快速在本地创建精美的基础设施图表

OpenFLOW – 快速在本地创建精美的基础设施图表
OpenFLOW – Quickly make beautiful infrastructure diagrams local to your machine

原始链接: https://github.com/stan-smith/OpenFLOW

OpenFLOW 是一款免费的开源渐进式网页应用 (PWA)，可在浏览器中直接创建等距图。它基于 React 和 Isoflow 库构建，提供离线功能，并每 5 秒自动保存一次，确保您的数据除非您导出，否则不会离开您的设备。用户可以轻松地拖放组件、连接它们并自定义外观。其功能包括：JSON 导入/导出、缩放/平移导航以及用于撤销/删除的键盘快捷键。存储直接在浏览器的 localStorage 中管理，并提供专用的“存储管理器”用于清理旧图表。开发非常简单，可以通过 readily available commands 安装依赖项、启动开发服务器和创建生产版本。优化的版本可以从 GitHub Pages、Netlify 或 AWS S3 等服务中提供。建议定期通过 JSON 导出进行备份。欢迎贡献代码。

The Hacker News thread discusses OpenFLOW, a tool built on the Isoflow library for creating infrastructure diagrams. Users praise its aesthetics compared to Mermaid.js and suggest integrations like Markdown support. Concerns arise about naming conflicts with the existing network protocol "OpenFlow" and Snowflake's product. Feature requests include importing custom SVG icons, exporting to image formats, and visualizing Terraform state. Some suggest using live data from Terraform or Kubernetes to keep diagrams synchronized. Others highlight tools like diagrams.mingrammer.com, Ilograph, Terrastruct and Cloudcraft, and debate the value of isometric diagrams.

原文

OpenFLOW is a powerful, open-source Progressive Web App (PWA) for creating beautiful isometric diagrams. Built with React and the Isoflow library, it runs entirely in your browser with offline support.

🎨 Isometric Diagramming - Create stunning 3D-style technical diagrams
💾 Auto-Save - Your work is automatically saved every 5 seconds
🔒 Privacy-First - All data stored locally in your browser
📤 Import/Export - Share diagrams as JSON files
🌐 Offline Support - Work without internet connection

# Clone the repository
git clone https://github.com/stan-smith/OpenFLOW
cd openflow-local

# Install dependencies
npm install

# Start development server
npm start

Open http://localhost:3000 in your browser.

Add Items: Drag and drop components from the library onto the canvas
Connect Items: Use connectors to show relationships between components
Customize: Change colors, labels, and properties of items
Navigate: Pan and zoom to work on different areas

Auto-Save: Diagrams are automatically saved to browser storage every 5 seconds
Quick Save: Click "Quick Save (Session)" for instant saves without popups
Save As: Use "Save New" to create a copy with a different name

Load: Click "Load" to see all your saved diagrams
Import: Load diagrams from JSON files shared by others
Export: Download your diagrams as JSON files to share or backup
Storage: Use "Storage Manager" to manage browser storage space

Delete - Remove selected items
Ctrl/Cmd + Z - Undo (if supported by browser)
Mouse wheel - Zoom in/out
Click and drag - Pan around canvas

# Create optimized production build
npm run build

# Serve the production build locally
npx serve -s build

The build folder contains all files needed for deployment.

Deploy the build folder to any static hosting service:

GitHub Pages
Netlify
Vercel
AWS S3
Any web server

HTTPS Required: PWA features require HTTPS (except localhost)
Browser Storage: Diagrams are saved in browser localStorage (~5-10MB limit)
Backup: Regularly export important diagrams as JSON files

Chrome/Edge (Recommended) ✅
Firefox ✅
Safari ✅
Mobile browsers with PWA support ✅

Use Storage Manager to free space
Export and delete old diagrams
Clear browser data (last resort - will delete all diagrams)

Ensure using HTTPS
Try Chrome or Edge browsers
Check if already installed

Check browser's localStorage
Look for auto-saved versions
Always export important work

React - UI framework
TypeScript - Type safety
Isoflow - Isometric diagram engine
PWA - Offline-first web app

Contributions are welcome! Please feel free to submit a Pull Request.

MIT

Built with the Isoflow library.

x0z.co

OpenFLOW – 快速在本地创建精美的基础设施图表 OpenFLOW – Quickly make beautiful infrastructure diagrams local to your machine

OpenFLOW – 快速在本地创建精美的基础设施图表
OpenFLOW – Quickly make beautiful infrastructure diagrams local to your machine