Example of using elkjs with a client side diagram framework
EmilStenstrom opened this issue · 7 comments
Hi!
I've been trying to get elkjs working to draw some simple graphs in a web browser. Since elkjs is js based, I just assumed it was easy to use together with a graphing framework:
- Cytoscape has en adapter that can be used, but it misses basic things like ports.
- Sprotty seems to be used in the examples, but I can find no examples loading sprotty with a script tag, sending in some JSON, and get a graph rendered.
- KlayJS has a d3 adapter, but elkjs seems not to have one.
What do you recommend for web rendering, and is there a simple example somewhere I can to get started?
I guess the easiest way for a web rendering would be to create svg elements for the graph elements and simply display the svg in the browser.
Maybe the klayjs-svg code helps as a starting point.
As you can see from the klayjs d3 adapter and the mentioned klayjs-svg code, I tried to provide simple mechanisms to obtain a rendered graph when we initially created the library.
Why is there no elkjs-d3 adapter? I simply never found the time to adjust the klayjs one (which shouldn't be too much effort, actually).
Furthermore, I felt that, apart from initial prototyping (for which you could use elk-live), most people wanted to use their own rendering (framework) anyway.
Very interesting to hear that most people using elkjs write their own rendering code, I would not have expected that. I've played around with other algorithms to try to get a user-generated family tree to render, but fell short with many of them. Many do have ready d3 adapters, but I fully understand not wanting to put free time into something you don't use yourself.
I'll take a look at it and see if I can get something working. SVG elements sounds like a good idea, because then I can easily make them interactive, so people can click a person in the tree and get info on them.
@uruuru I've ported klayjs-svg to elk, refactored a lot of code, and gotten a couple of simple examples to work. Would love to get some more help in getting this even more capable. I'm happy to give out commit rights if you're interested:
Cool, thanks for letting me know. I'll try to find the time to take a look. What exactly do you feel is still missing or would add the greatest value?
@uruuru At this point just a sanity check. Does it work as it should for simple examples? I added a block about running tests at the bottom of the README.
Take a look at: https://github.com/reaviz/reaflow
Issue has been linked in the readme.