Launch day is here! Our team is proud to present our open source product, Svelvet is a lightweight Svelte component library for building interactive node-based flow diagrams.
Thanks for the credits (creator of React Flow here)! Our website is MIT and so are the docs and all the content but I don't get that you just copied content like whole sentences of the docs or parts of the readme for example.
Is this like a business or are you just really committed to the project? I see you all have it listed on your linkedin, and was wondering what the long term goals are for the project.
Really cool. Love stuff like this and appreciate the time spent doing a nice documentation page. Congrats and hopefully a fun learning challenge for you all.
Are you planning to offer authoring of such flow diagrams as a capability? Users should be able to nost just reposition nodes, but add/modify/remove nodes and edges both and edit their metadata.
This would be super-useful because currently not many tools exist for non-tech users for creating graph datasets AND visually laying them out in a sensible way.
The performance on my S21 Ultra is pretty bad. Feels like ~40fps and stuttering. Also, it doesn't have mobile interaction for dragging nodes. I can only pan the canvas.
Not to detract this component but I can say with certainty that people will be writing Desktop applications with Svelte/React running inside Electron that takes up gigs of ram. It will be interesting to see how this performs in such environment.
Bit off topic but I really dig the clean look and feel of this. Is there anything close in Flutter? Think building this in Flutter might improve performance for your case (running on a high end samsung phone)
Very nice! I love Svelte, and reading code like this is a great way to learn how to use it better.
Has anybody made a customizable JSON tree editor / browser for Svelte? Especially one that supports schema driven custom views for json data structures.
It would be great to have some more helper lines when dragging things aroung and some optional snapping to the helper lines, to be able to properly align everything. I often use yEd Graph Editor (offline) and have yet to find a tool, doing it as good as yEd. It also looks like the connectors of a node, where an edge joins with the node, are always in the middle of a side of the rectangles. For many diagrams you will need more than that and an edge should be able to join with a rectangle at any place.
While I can see how point-and-clickers love things like this, I prefer building connections using markup. So things like Graphviz, PlantUML, and Mermaid appeal to me. However, they leave a lot left to be desired in terms of simplicity. Wouldn't YAML or something similar be better at representing connections, and just have some markup options for types?
If you are going to let the program do the layout automatically, then graphviz dot already does really good, right?
I think the reason people make these projects is specifically because they want to manually place some nodes at particular 2d positions, which I think is a little difficult if you are just recording nodes and connections. (I think many people are not as excited about solutions like "just use a bunch of invisible edges to enforce additional position requirements" as us).
hi, thank you for this suggestion! We noticed the same issue during development and we definitely have it listed as a feature we'd like to add on. :) I do not believe that handling touch events is an issue with Svelte - for example, with Svelvet you should still be able to pan and zoom across the graph on your phone. We just don't have that functionality with dragging nodes yet.
Man, I understood something else under "interactive", I didn't see any flow diagrams either. I thought it'd be a system where you can enter inputs and then it would visually show which paths are taken through the flowchart, e.g. given this diagram [1] and some inputs one could step through the chart (and even change inputs to see the new paths taken)...
I use PlantUML + Dropbox to share . It's not pretty but it is powerful. We make it interactive by editing the text file and saving the changes. There is also a VSCode plugin for PlantUML,which I have not tried.
Oh man, I could have really used something like this 4 years ago. I was doing a personal project that would have involved a node graph UI, and it was actually kind of challenging finding an existing library this simple and nice looking. Yeah, I know there's D3.js but that involved way more knowledge and learning than I was interested in. If I remember correctly, I ended up writing my own.
Dunno if it's feasible with the way it's designed, but it'd be really useful for this to have force-directed drawing, even if it's not a real-time thing.
> Yeah, I know there's D3.js but that involved way more knowledge and learning than I was interested in.
Same, d3 looked very powerful but had a steep learning curve. I was looking for something simple to generate process trees in real time and ended up using cytoscape js [0], helped me have a working POC in an hour, highly recommended.
Looks very good! I haven’t read all the documentation but I haven’t seen it so I’ll ask here: is it possible to automatically position the nodes in rows? Or are there APIs which would allow me to do that?
Quite sad Google Diagrams is stuck in the stone ages. They solved the hard parts of multi-user editing diagrams before anyone else and then just basically stopped. This would be a nice feature.
[+] [-] awillettnyc|3 years ago|reply
Easy install with a NPM or Yarn package!
[+] [-] DenseComet|3 years ago|reply
[+] [-] moklick|3 years ago|reply
[+] [-] NegativeLatency|3 years ago|reply
[+] [-] johnm|3 years ago|reply
Would be great if it could generate static images of a diagram in e.g. SVG.
[+] [-] TIPSIO|3 years ago|reply
[+] [-] nileshtrivedi|3 years ago|reply
This would be super-useful because currently not many tools exist for non-tech users for creating graph datasets AND visually laying them out in a sensible way.
[+] [-] Philip-J-Fry|3 years ago|reply
[+] [-] a2128|3 years ago|reply
[+] [-] upupandup|3 years ago|reply
Bit off topic but I really dig the clean look and feel of this. Is there anything close in Flutter? Think building this in Flutter might improve performance for your case (running on a high end samsung phone)
[+] [-] darkerside|3 years ago|reply
[+] [-] jdc|3 years ago|reply
[+] [-] DonHopkins|3 years ago|reply
Has anybody made a customizable JSON tree editor / browser for Svelte? Especially one that supports schema driven custom views for json data structures.
[+] [-] bthomas|3 years ago|reply
Is there a React library that does this well?
[+] [-] zelphirkalt|3 years ago|reply
[+] [-] encryptluks2|3 years ago|reply
[+] [-] bee_rider|3 years ago|reply
I think the reason people make these projects is specifically because they want to manually place some nodes at particular 2d positions, which I think is a little difficult if you are just recording nodes and connections. (I think many people are not as excited about solutions like "just use a bunch of invisible edges to enforce additional position requirements" as us).
[+] [-] whiddershins|3 years ago|reply
How hard would/will it be to make the nodes draggable?
Edit: maybe it already does this but it is hard to interact with on the phone.
Edit2: can’t move them on iPad either. Maybe a use case for long press? Double-tap? Two finger select?
Edit3: Is Svelte in general under-developed when it comes to handling touch events? I can’t find a good touch example with draggable components.
[+] [-] johnm|3 years ago|reply
[+] [-] anulepau|3 years ago|reply
[+] [-] netsharc|3 years ago|reply
[1] http://jcosine.if.unram.ac.id/public/site/images/suwardiman/...
[+] [-] simonbarker87|3 years ago|reply
[+] [-] bennyp101|3 years ago|reply
"Svelvet is an open source Svelte component library which seeks to port React Flow functionality over to Svelte." [1]
[1] https://medium.com/@alexander.zambrano/simplify-application-...
[+] [-] ramshorst|3 years ago|reply
[+] [-] manishsharan|3 years ago|reply
[+] [-] ravenstine|3 years ago|reply
Dunno if it's feasible with the way it's designed, but it'd be really useful for this to have force-directed drawing, even if it's not a real-time thing.
[+] [-] lhoursquentin|3 years ago|reply
Same, d3 looked very powerful but had a steep learning curve. I was looking for something simple to generate process trees in real time and ended up using cytoscape js [0], helped me have a working POC in an hour, highly recommended.
[0] https://js.cytoscape.org/
[+] [-] robertlagrant|3 years ago|reply
[+] [-] crackinmalackin|3 years ago|reply
[+] [-] nrabulinski|3 years ago|reply
[+] [-] ec109685|3 years ago|reply
Quite sad Google Diagrams is stuck in the stone ages. They solved the hard parts of multi-user editing diagrams before anyone else and then just basically stopped. This would be a nice feature.
[+] [-] greyhair|3 years ago|reply
[+] [-] operantoperator|3 years ago|reply
EDIT: Ohh, it’s an English word
“(of a person) slender and elegant.”
[+] [-] DonHopkins|3 years ago|reply
https://www.youtube.com/watch?v=ZZoB5frlcnE
[+] [-] bmitc|3 years ago|reply
[+] [-] the_arun|3 years ago|reply
[+] [-] airbreather|3 years ago|reply
[+] [-] jspaetzel|3 years ago|reply
[+] [-] unknown|3 years ago|reply
[deleted]
[+] [-] pitaj|3 years ago|reply
[+] [-] tunesmith|3 years ago|reply