Odysea NPM | npm.io

Convert Your Ideas To A Simple And Excitig Journay With Odysea!

Odysea

A lightweight and minimal Solid component for building interactive graphs and node-based editors.

Key Features

Easy to use: Just provide the nodes and edges data and it automatically gets converted to an interactive graph with seamless zooming and panning.
Customizable: Different edge types and support for custom nodes and custom edges.
Fast rendering: Only nodes that have changed are re-rendered and only those in the viewport are displayed
Reliable: Written in Typescript.

Installation

The easiest way to get the latest version of Odysea is to install it via npm:

npm install odysea # or yarn add

Quick Start

import Flow from "odysea";

function Flow(props) {
  return <Flow nodes={props.nodes} edges={props.edges}></Flow>;
}

Flow Component's Props

Name	Type	default	Description
nodes	Node[]	[]	array of nodes
edges	Edge[]	[]	array of edges
width	string	"800px"	width of the container
height	string	"800px"	height of the container

type Node = {
  id: string,
  data: T,
  type: string ("regular(default)" | "dot" | "note" | "backdrop"),
  position: { x: number, y: number },
  inputPosition?: "top" | "bottom" | "left" | "right",
  outputPosition?: "top" | "bottom" | "left" | "right",
  width?: number,
  height?: number,
  inputHandle?: boolean,
  outputHandle?: boolean,
  bgColor?: string,
  fontSize?: number,
  borderColor?: string,
  borderRadius?: number,
  textColor?: string,
};

type Edge = {
  source: string,
  target: string,
  label?: string,
  type?: "bezier(default)" | "straight" | "smoothStep" | "step",
  animated?: boolean,
  arrow?: boolean,
  style?: JSX.CSSProperties,
  labelStyle?: JSX.CSSProperties,
  labelBgStyle?: JSX.CSSProperties,
};

Live Demo

Live Example On stackblitz

Pan: alt + drag
Zoom: mouse wheel

More Fine Grained API

There is also other components if you need more control on your flow

import Flow from "odysea";
import { Node, Edge } from "odysea";

function Flow(props) {
  return (
    <Flow nodes={props.nodes} edges={props.edges}>
      <Node data={...} />
      <Edge data={...} />
    </Flow>
  );
}