Use SvelteFlow to Create AI Workflow Visualized Node-Edge Graph GUI Editor

What I want

like dify, Coze, n8n…..

and self-host, more flexibity, use langgraph

dify
coze
n8n

The Core Problem: Why Build Another One?

Although existing platforms are powerful, they commonly suffer from several pain points:

Vendor Lock-in: Core logic is deeply integrated with specific cloud services, making migration difficult.
Limited Extensibility: Hard to easily integrate custom tools or models.
Opaque Logic: Lack of full visibility into the internal workings of the agent, making debugging challenging.
Cost: Large-scale usage in production environments can become prohibitively expensive.

Why Is Visual Programming Needed?

Lower the Technical Barrier
Improve Development Efficiency
Facilitate Team Collaboration
Reduce Configuration Errors

Time Flies……

OpenAI AgentKit

Similar LLM libs

Feature	CrewAI	LangChain	LangGraph
Graph Support	❌ Limited	⚠️ Linear chains	✅ Full graphs
Loops	❌ No	❌ No	✅ Yes
Conditions	❌ No	⚠️ Limited	✅ Yes
Multi-agent	✅ Yes	⚠️ Basic	✅ Yes
GUI Support	❌ No	❌ No	❌ No

all of these not have official GUI, we need create by ourself.

core design

use Nodes as SSOT to represent Edges

flowchart LR A((Step1)) B((Step2)) C((Step3)) D((Step4)) E((Step5)) F((Step6)) A --next--> B B --next--> C B --next--> D D --next--> E E --next--> F C --next--> F

Evolution: From PyQt to Web-Based Solution

CrewAI-GUI-pyQt

Limitations:

Desktop-only deployment
Limited web integration
Harder to collaborate
Less familiar developer ecosystem

Technology Stack

Frontend:
- Svelte
- react (early version)
Backend:
- FastAPI
- flask (early version)
Infrastructure
- Kubernetes
- Docker Compose

backend API

If your backend have JWT, you can switch by username

post /clean-cache/{username}
get /download/{username}
post /upload/{username}
post /run/{username}

Run Graph Button

post /upload/{username}
post /run/{username}

LangGraph.js

Graph Data Strcture Design

Why xyflow

xyflow is mature js graph library (svelteflow, reactflow)

Custom Nodes

no code

Custom Nodes

low code

Why ReactFlow

React have large ecosystem and community
Graph GUI with node edge design
flexibity enough for make it as editor

Benefit from ReactFlow

custom edge, custom nodes

The Jourery of ReactFlow

LangGraph-GUI 1.0 using reactflow

Hard to make SSOT
- ReactFlow not support signal-like logic
- hard to sync Redux and React Context
- data update flow cannot align SSOT design
- not only nodes, but also edges need update seperatly
Code lines more longer

graph LR redux[redux Nodes] react[ReactFlow] edges[EdgesState] nodes[NodeState] edge((edge)) react --change--> edge edge --modify--> edges edge --modify--> nodes nodes --update--> redux redux --update--> edges react --change--> nodes graphs[graphs.json] backend[Backend] redux --store--> graphs redux --load--> nodes graphs --> backend graphs --load--> redux

learn lessons from ReactFlow

Fixing typing content in node too early

React’s onChange fires too early → saves unfinished text.
only save after click other place: onBlur

Fixing Japanese Input in React (IME Support)

Japanese/Chinese/Korean use IME (Input Method Editor).
Example: typing “日本” → React may save "niho" before confirmation.
need const changeBuffer = useRef({})

JS → TS

As projects grow, plain JavaScript becomes harder to manage. TypeScript helps us scale.
unclear data structures, harder to refactor

bothered by TS

"scripts": {
  "lint": "prettier --write . && prettier --check . && npx eslint . --ext .svelte,.svelte.ts,.svelte.js --fix",
},

any will through warning, this is annoying

// lib/json.ts

export type Json = 
  | string 
  | number 
  | boolean 
  | null 
  | Json[] 
  | { [key: string]: Json };

Why SvelteFlow

Svelte 5 using signals
- code numbers usually fewer than react
- easy to pass computed runes
SvelteFlow 1.0 highly affinity svelt 5 rune, signals
fewer and more beautiful lines

Signals

Reactive Value
A signal is essentially a wrapped value. Anywhere it is read, dependencies are automatically subscribed.
- Updating a signal → automatically notifies its dependents → triggers UI updates or recomputations.
Computed Signals (Derived Values)
- A computed signal is a value derived from other signals.
Effect / Reaction (Side Effects)
- When signals change, they can trigger effects such as updating the DOM or calling an API.

Framework / Library	signal	computed	effect
Solid.js	`createSignal`	`createMemo`	`createEffect`
Angular (v16+)	`signal()`	`computed()`	`effect()`
Preact Signals	`signal()`	`computed()`	`effect()`
Vue 3	`ref` / `reactive`	`computed`	`watchEffect`
Svelte 5	`$state` / `writable` store	`$derived` / `derived` store	`$effect` / `$:` declaration

llms.txt

With llms.txt, LLMs know:
- where to look (core guides, API, examples)
- what to skip (noise, menus, ads)
- like robots.txt but for AI
For Svelte devs:
- Signals make UI state simple
- llms.txt makes docs simple for AI

SvelteFlow 1.0 release

xyflow/svelte 1.0.0 released at 2025 May 14

fully support rune

Svelte is Elegant

sample code

signal chain: Node(SSOT) –> Edge –> SvelteFlow

graph LR ssot[SSOT Nodes] A[Modify Nodes] B[Modify Edges] A --modify--> ssot B --update--> ssot ssot --signals--> edges backend[Backend] ssot --"run graphs.json"--> backend outputs(("`LLM Outputs`")) backend --> outputs

bind:nodes={$currentNodes}
edges={$currentEdges} 

Svelte is Elegant (cont.)

define your own signal object:

Simple Demo

Extend Demo

Loading content…

END

Thank You

Reference
- reactflow, svelteflow official websites
- https://docs.crewai.com/en/introduction
- https://www.js-craft.io/blog/langchain-vs-langgraph/
- https://framerusercontent.com/images/7IPPObp2xkFVLH1IyW9QvFQ0a2I.gif
- https://pbs.twimg.com/media/GP5rEiZaEAAUqWu?format=jpg&name=4096x4096
- https://raw.githubusercontent.com/n8n-io/n8n/master/assets/n8n-screenshot-readme.png