Example of using elkjs with a client side diagram framework

[EmilStenstrom]

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?

[uruuru]

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.

[EmilStenstrom]

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.

[EmilStenstrom]

@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:

https://github.com/EmilStenstrom/elkjs-svg

[uruuru]

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?

[EmilStenstrom]

@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.

[amcdnl]

Take a look at: https://github.com/reaviz/reaflow

[uruuru]

Issue has been linked in the readme.