npx degit xyflow/vite-react-flow-template showcase-react-flow
npm i
npm audit fix
npm run dev
fitView={true}
, false makes it smallimport { initialNodes, nodeTypes } from './nodes';import { initialEdges, edgeTypes } from './edges';
import { ReactFlow, Node } from '@xyflow/react';import '@xyflow/react/dist/style.css';export default function App() {const nodes: Node[] = [{id: '1',data: {},position: { x: 100, y: 100 }}];return (<ReactFlow nodes={nodes} />);}
const edges: Edge[] = [{id: "2-3",source: "2",target: "3",style: { stroke: "black" },animated: true,},{id: "3-4",source: "3",target: "4",style: { stroke: "black" },},];
{id: "5",data: { label: "Current Position", bgcolor: "lightgreen" },type: "position-logger",position: { x: 20, y: 140 },height: 100,},{id: "6",data: { label: "Has handle", bgcolor: "lightblue", hasHandle: true },type: "position-logger",position: { x: 20, y: 240 },height: 100,},{id: "7",data: { label: "No handle", bgcolor: "beige", hasHandle: false },type: "position-logger",position: { x: 60, y: 540 },height: 100,},
export const DividerLine = () => {return (<svgstyle={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: -1 }}><line x1="10%" y1="83%" x2="90%" y2="83%" stroke="tomato" strokeWidth="2" /></svg>);};
{id: "9",data: {label: "002",},position: { x: 556, y: 10 },width: 70,height: 70,style: {backgroundColor: "#10165c",color: "#ddd",fontSize: "1.3rem",display: "flex",alignItems: "center",justifyContent: "center",textAlign: "center"},},
import { InfoNode } from "./InfoNode";import notes from "../data/notes.json";import * as tools from "../../../tools";export const initialNodes: AppNode[] = notes.map((note, index) => {const x = 5 * tools.getRandomNumberBetween(5, 20);const y = 5 * tools.getRandomNumberBetween(5, 20);const rotate = `${tools.getRandomNumberBetween(-20, 20)}deg`;return {id: `${index + 1}`,data: { label: note, rotate },type: "info-node",position: { x, y },height: 100,};});export const nodeTypes = {"info-node": InfoNode,} satisfies NodeTypes;