React Flow i Graph Visualization

Co to jest React Flow (xyflow) i do czego służy?

React Flow / @xyflow/react (2024 rebrand): biblioteka do node-based editors i diagramów. Interaktywne grafy z węzłami i krawędziami. Drag & drop węzłów. Zooming i panning. Edge routing. Custom nodes i edges. TypeScript. Zastosowania: workflow builders (n8n-like). Pipeline visualizers. Org charts. Mind maps. Decision trees. Entity Relationship Diagrams. State machine visualizers. AI agent flow builders. Instalacja: npm install @xyflow/react. ReactFlow component: import {ReactFlow, Background, Controls, MiniMap} from '@xyflow/react'. import '@xyflow/react/dist/style.css'. const nodes = [{id: '1', type: 'input', position: {x: 0, y: 0}, data: {label: 'Start'}}, {id: '2', position: {x: 200, y: 100}, data: {label: 'Process'}}]. const edges = [{id: 'e1-2', source: '1', target: '2', animated: true}]. ReactFlow nodes={nodes} edges={edges} fitView. Wbudowane node types: input — jeden handle (bottom). output — jeden handle (top). default — dwa handles. Handles: Handle type='source' position='right'. Handle type='target' position='left'. Wiele handles per node (custom). State: useState dla nodes i edges. onNodesChange — drag, select, remove. onEdgesChange — add, remove. applyNodeChanges, applyEdgeChanges. useReactFlow hook: getNodes(), getEdges(). setNodes(), setEdges(). fitView(), zoomIn(), zoomOut(). getViewport(). ReactFlow wbudowany w wiele narzędzi: n8n — open source automation. Retool — internal tools. Flowise — LLM workflows. Langflow — LangChain visual builder.

Custom Nodes i Edges w React Flow — jak budować?

Custom Node: function CustomNode({data, selected}) {return div className={cn('border rounded p-4', selected && 'border-blue-500')} div {data.label} /div Handle type='target' position='top'. Handle type='source' position='bottom' /div}. Register: nodeTypes: {custom: CustomNode}. node: type: 'custom'. Data typing (TypeScript): type NodeData = {label: string, icon: string}. CustomNode props: NodeProps(NodeData). Custom Edge: function CustomEdge({sourceX, sourceY, targetX, targetY, markerEnd}) {const [edgePath] = getBezierPath({sourceX, sourceY, targetX, targetY}). return path d={edgePath} markerEnd={markerEnd}. (używaj EdgePath helpers)}. EdgeTypes: {custom: CustomEdge}. Edge label: EdgeLabelRenderer. EdgeLabel pozycjonowany absolutnie. foreignObject dla HTML w SVG edge. Dagre layout (automatyczne pozycjonowanie): npm install dagre. import dagre from '@dagrejs/dagre'. const dagreGraph = new dagre.graphlib.Graph(). dagreGraph.setDefaultEdgeLabel(() => {}). dagreGraph.setGraph({rankdir: 'TB'}). Dodaj nodes i edges do dagreGraph. dagreGraph.layout(). Pobierz pozycje: dagreGraph.node(node.id). Elk layout: @xyflow/elkjs. Zaawansowany layout (hierarchical, force-directed). getLayoutedElements helper. Controls: wbudowane (zoom in/out/reset). Kustomizowanie przez CSS. MiniMap: wbudowana miniatura. Kliknij aby nawigować. nodeColor, nodeStrokeColor props. Background: Background variant='dots' | 'lines' | 'cross'. Interaktywność: onConnect — connect nodes. isValidConnection — walidacja połączeń. deleteKeyCode — klawisz usuwania. multiSelectionKeyCode — multi select (shift). SelectionDragHandler.

Mermaid.js — diagramy jako kod?

Mermaid.js: diagramy z tekstu/kodu. Markdown-friendly. Wiele typów diagramów. Używany w GitHub, GitLab, Notion, Confluence. Instalacja: npm install mermaid. import mermaid from 'mermaid'. mermaid.initialize({startOnLoad: true}). React + Mermaid: useRef + useEffect. mermaid.render('id', diagram).then(({svg}) => divRef.innerHTML = svg). react-mermaid2: component wrapper. Mermaid z rehype: rehype-mermaid plugin dla MDX/markdown. Typy diagramów: flowchart TD — flowchart top-down. graph LR — left-right graph. sequenceDiagram — sekwencje. classDiagram — klasy. erDiagram — entity relationship. stateDiagram-v2 — state machine. gantt — Gantt chart. pie — kołowy. gitGraph — git branching. quadrantChart — macierz. timeline — oś czasu. Flowchart syntax: flowchart TD. A[Start] --> B{Decision}. B -->|Yes| C[Do this]. B -->|No| D[Do that]. C --> E[End]. D --> E. Sequence: sequenceDiagram. Alice->>John: Hello. John-->>Alice: Great!. Mermaid Live Editor: mermaid.live — online editor. Real-time preview. Share diagrams. AI + Mermaid: GPT-4 generuje Mermaid diagrams. Opisz architekturę -> diagram. GitHub Copilot suggest. PlantUML: alternatywa. Java-based. UML-focused. Więcej typów (komponent, wdrożenie). Graphviz (DOT language): bardzo potężny. Automatyczny layout. Mniej user-friendly. Kiedy React Flow vs Mermaid: React Flow — interaktywne edytory. Mermaid — statyczne diagramy w dokumentacji. Mermaid — markdown-embeddable. React Flow — user-editable flows.

React Flow w Next.js — server/client split i wydajność?

React Flow wymaga przeglądarki: DnD, touch events, DOM measurement. Musi być w Client Component. 'use client' na komponencie z ReactFlow. Wrapper pattern: ReactFlowProvider i ReactFlowWrapper jako client. Server Component ładuje dane (nodes, edges z DB). Passes do client FlowEditor. Large graphs wydajność: React Flow radzi sobie do ~1000 nodes. Powyżej: custom WebGL renderer. Sigma.js dla dużych grafów. Cytoscape.js dla zaawansowanych. Virtualizacja React Flow: brak wbudowanej. Nodes poza viewport nie są renderowane (CSS display:none). Ale nadal w DOM. Dagre vs ELK vs manual: Dagre — prosty, hierarchical. ELK — potężny, wiele algorytmów. Manual — maxymalna kontrola. Animacja krawędzi: animated: true — marching ants. CSS animation na edge path. Framer Motion dla custom edge animations. Persystencja stanu: JSON.stringify(nodes) + edges. LocalStorage lub DB. Wczytaj przy mount: reaktywuj pozycje. onSave callback -> POST /api/flow. Undo/Redo: useNodesStateSynced z historical state. lub zaimplementuj własny history stack. React Flow + Zustand: store nodes i edges w Zustand. Reakacja na store changes. Wiele komponentów może modyfikować flow. Export: toObject() — JSON serialization. toPng() / toSvg() — screenshot. html2canvas alternatywa. Real-world apps na React Flow: n8n — 2000+ stars workflow automation. Langflow — LangChain visual. Flowise — GPT flows. Retool — internal tools. BuildShip — API builder.

Alternatywy dla React Flow — Cytoscape.js, Sigma.js i G6?

Cytoscape.js: potężna biblioteka grafów. Canvas + WebGL. Duże grafy (tysiące nodes). Wiele algorytmów layout: breadthfirst, circle, concentric, cose, dagre, elk. Styl przez CSS selector-like: cy.style('[type = "output"]').style({shape: 'round-rectangle'}). cytoscape-react: adapter. Dobry dla: network visualization, biology, social graphs. Sigma.js: WebGL renderer. Mega-scale grafy (miliony nodes). Gephi integration. graphology za grafikę matematyczną. Dla Data Science viz. G6 (Alibaba): comprehensive graph viz. Canvas + SVG. Wiele wbudowanych layouts. Rich interaction model. 3D support (G6 3D). Chińska dokumentacja ale angielska istnieje. Reagraph: React + WebGL graph viz. Nowoczesny API. 3D i 2D. Network analysis. vis.js Network: browser-based graph viz. Force-directed layout. Duży zestaw opcji. Interaktywny. Sprawdzone, dojrzałe. D3 Force simulation: d3.forceSimulation(). force-directed layout. Pełna kontrola ale manual. Najlepszy learning experience. Cola.js: constraint-based layout. Współdziała z D3 i Cytoscape. Kiedy React Flow: user-editable flows. Custom nodes z React UI. Workflow builders. Mała do średnia skala. Kiedy Cytoscape/Sigma: read-only visualization. Tysiące/miliony nodes. Performance critical. Data visualization. Kiedy Mermaid: statyczne diagramy. Dokumentacja. Markdown integration. Nie interaktywne.

Wyślij zapytanie