cedflow.cedricflodin.se

Cedflow

HTML är källan. SVG, layout, pan/zoom, selection, export och snapshots är härledda lager.

Målet är inte att ersätta React Flow i React-appar. Målet är att göra flow-grafer till grepbara, validerbara och återanvändbara kunskapsobjekt: små DOM-kontrakt som en agent kan ändra utan att först tolka en stor komponentstat.

runtime spine
  1. scan
  2. normalize
  3. validate
  4. layout
  5. render
  6. bind
  7. serialize
Flow canvas bygg · högerklicka · spara · exportera HTML/JSON · importera igen
Authored HTML
data-flow · data-node · data-edge
scan
DOM → raw facts
normalize
ids · refs · labels
validate
missing refs fail fast
layout
ELK + deterministic tidy
render
SVG edges + DOM nodes
bind interactions
drag · select · context menu
serialize
save · export · import
Saved HTML
LLM-editable source
Snapshot JSON
compact runtime state
— noder · — kanter 100% redo

Högerklicka på bakgrunden för ny nod, på noder för koppling och på linjer för riktning, linjetyp eller delete. Spara skriver hela modellen till localStorage. HTML ger en authored, grepbar flow-fil; JSON ger en kompakt snapshot.

Tre steg framåt tre steg bundna
  1. nu Geometry ownership Split edge strokes, edge hit paths, labels and node ownership so nodes always win node interiors. elementFromPoint node-interior probe
  2. nästa Ports and canonical routes Promote handles/ports and serialize only bezier, smoothstep, step or straight in authored flow code. route enum + port endpoint probe
  3. efter Proof gate and engine extraction Move the reusable workbench out of the Metry surface dependency and add a browser geometry gate. typecheck + browser geometry gate
Kanonisk modell DOM först · JSON/DSL/export som härledningar 
<div data-flow="invoice" data-layout="layered" data-dir="right">
  <div data-node="meter" data-x="0" data-y="0">Meter</div>
  <div data-node="invoice" data-x="280" data-y="0">Invoice</div>
  <div data-edge="meter → invoice" data-label="kWh"></div>
</div>
Grepbarnoder och kanter är vanliga attribut, inte gömda i closure-state.
Återanvändbarsamma DOM kan exporteras som kompakt snapshot, DSL, SVG eller PNG.
Agent-effektivsmå deltan: ändra en nodrad, en kant eller en snapshot-rad.
Cedflow vs xyflow / React Flow lager för lager · React Flow 12-docs lästa 2026-05-28
Lager Cedflow xyflow / React Flow Konsekvens
Primär runtime Vanlig HTML + ceduix-flow ESM. React-komponenten <ReactFlow /> från @xyflow/react. Cedflow kan leva i statiska sidor och agentgenererad markup; React Flow är bäst inne i en React-produkt.
Källmodell [data-flow], [data-node], [data-edge]. nodes + edges arrays: node id/position/data, edge source/target. Cedflow optimerar för diffbar DOM. React Flow optimerar för app-state och komponenter.
Pipeline scan → normalize → validate → layout → render → bind → serialize. React Flow-komponenten renderar nodes/edges, interaktioner och kan hantera egen state. Cedflow gör varje lager probebart. React Flow ger en färdig UI-runtime med färre egna lager att bygga.
Kopplingar Högerklick, inspector, DOM-kant eller DSL-kant. Riktning sparas i data-edge; dubbelriktning i data-edge-bidir. Drag från handle till handle; handles är kopplingspunkter på noder. Cedflow passar dokument/kunskapsflows. React Flow passar visuella builders med tydliga handles.
Linjer Bezier, smoothstep, step eller straight route, label chips, direction arrows, bidirectional markers och repulsion mot noder/andra kanter. Inbyggda edge-typer, labels, markerStart/markerEnd och custom edges. React Flow är mer komplett som edge-komponentbibliotek; Cedflow gör edge-state enklare att serialisera.
Viewport Pan/zoom är härledd chrome och sparas inte som diagramfaktum. Viewport har x, y och zoom och ägs av React Flow-runtimen. Cedflow separerar diagram från kameran; React Flow ger färdig viewportkontroll.
Controls Consumer toolbar: zoom, fit, fullscreen, auto-arrange, save/export/import. Officiella komponenter: Controls, Background, MiniMap, Panel, NodeToolbar, NodeResizer. React Flow vinner ekosystem. Cedflow vinner när kontroller ska vara domänspecifika och små.
Server/static rendering HTML är redan statiskt; runtime berikar efter första paint. SSR stöds sedan React Flow 12, men server-renderade edges kräver explicita dimensions/handles. Cedflow är enklare för docs och agent-artifacts. React Flow har starkare SSR-stöd för React-appar.
Export Snapshot JSON, DSL, authored HTML, SVG/PNG. Client image export finns; server-side image creation bygger på static rendering + Puppeteer i Pro-exemplet. Cedflow prioriterar transparent exportformat. React Flow prioriterar produktintegration.
LLM-tokenekonomi En nod eller kant är en rad. SSOT-dokument och runtime delar samma termer. Agenten måste ofta förstå React component state, hooks, nodeTypes och app-local callbacks. Cedflow är byggt för små, verifierbara agentdeltan. React Flow är byggt för mänskligt byggda React-UIs.
Domänsemantik Meter balance, Sankey quantity, IMD debit rows och flow snapshots är förstaklassbegrepp. Domänsemantik läggs normalt i data och custom nodes/edges. Cedflow kan bära energiflöden som fakta, inte bara som label-text.
Vad som finns nu lokal referensimplementation
SSOT~/dev/ceduix/engine/flow/CEDUIX_FLOW.md
Engineceduix/engine/flow/*
Reference editor/metry-modell/ runtime
Framework homecedflow.cedricflodin.se → this surface
Källor för jämförelsen official docs only