LiveFlow (LiveFlow v0.2.3)

Copy Markdown View Source

LiveFlow - A Phoenix LiveView library for building interactive node-based diagrams.

LiveFlow provides components and utilities for creating flow diagrams similar to React Flow or Svelte Flow, but using Phoenix LiveView and LiveComponents.

Quick Start

# In your LiveView
defmodule MyAppWeb.FlowLive do
  use MyAppWeb, :live_view

  alias LiveFlow.{State, Node, Edge}

  def mount(_params, _session, socket) do
    flow = State.new(
      nodes: [
        Node.new("1", %{x: 100, y: 100}, %{label: "Start"}),
        Node.new("2", %{x: 300, y: 200}, %{label: "End"})
      ],
      edges: [
        Edge.new("e1", "1", "2")
      ]
    )

    {:ok, assign(socket, flow: flow)}
  end

  def render(assigns) do
    ~H"""
    <.live_component
      module={LiveFlow.Components.Flow}
      id="my-flow"
      flow={@flow}
      opts={%{controls: true, background: :dots}}
    />
    """
  end
end

Components

Data Structures

Path Types

Summary

Functions

create_flow(opts \\ [])

Creates a new flow state with the given nodes and edges.

new_edge(id, source, target, opts \\ [])

See LiveFlow.Edge.new/4.

new_handle(type, position, opts \\ [])

See LiveFlow.Handle.new/3.

new_node(id, position, data, opts \\ [])

See LiveFlow.Node.new/4.

new_state(opts \\ [])

See LiveFlow.State.new/1.

Functions

create_flow(opts \\ [])

@spec create_flow(keyword()) :: LiveFlow.State.t()

Creates a new flow state with the given nodes and edges.

Examples

iex> LiveFlow.create_flow(
...>   nodes: [
...>     %{id: "1", position: %{x: 0, y: 0}, data: %{label: "A"}},
...>     %{id: "2", position: %{x: 100, y: 100}, data: %{label: "B"}}
...>   ],
...>   edges: [
...>     %{id: "e1", source: "1", target: "2"}
...>   ]
...> )

new_edge(id, source, target, opts \\ [])

See LiveFlow.Edge.new/4.

new_handle(type, position, opts \\ [])

See LiveFlow.Handle.new/3.

new_node(id, position, data, opts \\ [])

See LiveFlow.Node.new/4.

new_state(opts \\ [])

See LiveFlow.State.new/1.