# LiveFlow v0.3.2 - Table of Contents

Interactive node-based flow diagrams for Phoenix LiveView.
A library for building visual node editors, workflow builders,
and interactive diagrams similar to React Flow, but for LiveView.

## Pages

- [LiveFlow](readme.md)
- [Changelog](changelog.md)
- [LICENSE](license.md)

- Guides
  - [Getting Started with LiveFlow](getting-started.md)
  - [Custom Node Types](custom-nodes.md)
  - [Edges](edges.md)
  - [Interaction](interaction.md)
  - [Events &amp; JavaScript API](events.md)
  - [Sub-flows &amp; Grouping](subflows.md)
  - [Layout](layout.md)
  - [Built-in Components](components.md)
  - [Saving, Import &amp; Export](export.md)
  - [Real-Time Collaboration](collaboration.md)
  - [Themes](themes.md)

## Modules

- [LiveFlow](LiveFlow.md): LiveFlow - A Phoenix LiveView library for building interactive node-based diagrams.
- [LiveFlow.Types](LiveFlow.Types.md): Type definitions for LiveFlow.

- Core Data Structures
  - [LiveFlow.Edge](LiveFlow.Edge.md): Edge data structure for LiveFlow.
  - [LiveFlow.Handle](LiveFlow.Handle.md): Handle data structure for LiveFlow.
  - [LiveFlow.Node](LiveFlow.Node.md): Node data structure for LiveFlow.
  - [LiveFlow.State](LiveFlow.State.md): Main state container for LiveFlow.
  - [LiveFlow.Viewport](LiveFlow.Viewport.md): Viewport data structure for LiveFlow.

- Components
  - [LiveFlow.Components.Edge](LiveFlow.Components.Edge.md): Edge function component for LiveFlow.
  - [LiveFlow.Components.Flow](LiveFlow.Components.Flow.md): Main Flow LiveComponent for LiveFlow.
  - [LiveFlow.Components.Handle](LiveFlow.Components.Handle.md): Handle function component for LiveFlow.
  - [LiveFlow.Components.Marker](LiveFlow.Components.Marker.md): Dynamic SVG marker definitions for LiveFlow edges.
  - [LiveFlow.Components.NodeResizer](LiveFlow.Components.NodeResizer.md): Node resizer component for LiveFlow.
  - [LiveFlow.Components.NodeToolbar](LiveFlow.Components.NodeToolbar.md): A toolbar attached to a node (React Flow's `<NodeToolbar />`).
  - [LiveFlow.Components.NodeWrapper](LiveFlow.Components.NodeWrapper.md): Node wrapper LiveComponent for LiveFlow.

- Path Algorithms
  - [LiveFlow.Paths.Bezier](LiveFlow.Paths.Bezier.md): Bezier curve path calculation for edges.
  - [LiveFlow.Paths.Geometry](LiveFlow.Paths.Geometry.md): Edge geometry: handle coordinates (fixed or floating) and the path of an
edge between two nodes. Shared by `LiveFlow.Components.Edge` and
`LiveFlow.Export`.
  - [LiveFlow.Paths.Path](LiveFlow.Paths.Path.md): Behaviour for edge path calculations.
  - [LiveFlow.Paths.Smoothstep](LiveFlow.Paths.Smoothstep.md): Smoothstep path calculation for edges.
  - [LiveFlow.Paths.Step](LiveFlow.Paths.Step.md): Step/orthogonal path calculation for edges.
  - [LiveFlow.Paths.Straight](LiveFlow.Paths.Straight.md): Straight line path calculation for edges.

- Viewport &amp; Performance
  - [LiveFlow.Viewport.Culling](LiveFlow.Viewport.Culling.md): Server-side viewport culling for LiveFlow.

- Features
  - [LiveFlow.Clipboard](LiveFlow.Clipboard.md): Copy/paste clipboard for LiveFlow.
  - [LiveFlow.Export](LiveFlow.Export.md): Server-side SVG rendering of a flow, without a browser.
  - [LiveFlow.History](LiveFlow.History.md): Undo/redo history stack for LiveFlow.
  - [LiveFlow.Layout](LiveFlow.Layout.md): Layout helpers.
  - [LiveFlow.Serializer](LiveFlow.Serializer.md): Serializes and deserializes LiveFlow state to/from JSON.
  - [LiveFlow.Validation](LiveFlow.Validation.md): Connection validation functions for LiveFlow.
  - [LiveFlow.Validation.Connection](LiveFlow.Validation.Connection.md): Helper to validate and create edges from `lf:connect_end` event params.

- Collaboration
  - [LiveFlow.Collaboration](LiveFlow.Collaboration.md): Real-time collaboration support for LiveFlow.
  - [LiveFlow.Collaboration.User](LiveFlow.Collaboration.User.md): Represents a user in a collaborative flow session.

- Change Tracking
  - [LiveFlow.Changes.EdgeChange](LiveFlow.Changes.EdgeChange.md): Edge change event types for LiveFlow.
  - [LiveFlow.Changes.NodeChange](LiveFlow.Changes.NodeChange.md): Node change event types for LiveFlow.

## Mix Tasks

- [mix live_flow.gen.elk](Mix.Tasks.LiveFlow.Gen.Elk.md): Adds [ELK](https://eclipse.dev/elk/) (elkjs) to your app's JavaScript, for the
client-side auto layout (`LiveFlow.Layout.prepare_layout_data/2` pushed as
`lf:layout_data`, or `JS.dispatch("lf:auto-layout")`).

