graph vis

[dcsan]

should we use a force graph library, or something more flow chart or node-based that is designed for interacting with?

[dcsan]

Node based

litegraph

https://github.com/jagenjo/litegraph.js https://tamats.com/projects/litegraph/editor/

[dcsan]

react flow

https://reactflow.dev/ has some layout modes

https://reactflow.dev/docs/guides/layouting/#honourable-mentions

probably a better idea as we don't really need the complexity of litegraph wiring, but do want auto-layouting like this

[dcsan]

cytoscape

previously have used this but its more visualization than interactive nodes (tho it has callbacks). its a bit old, port of a java graph theory system. it could be useful if we start doing graph traversal and other graph theory ways to navigate knowledge. i've used it before and was a bit fiddly to get behaving with react etc.

[fciannella]

obsidian has an amazing graph visualization tool, do you know what library they use? We could use the same! I will look it up later.

[dcsan]

d3js

plain old d3 is also an option but is more low-level. eg for force-graphs: I always end up having to write a ton of odd code everytime with d3 and the API i have to get in their headspace to use. https://github.com/d3/d3-force

[dcsan]

@fciannella it looks like just vanilla d3. i think its fairly simple. note that react-flow gives access to use d3 layouting algos as well as other stuff with that, graphs can be user-interactive so we could get people annotating the stuff

Also we would also be rendering mostly subgraphs of a node, so maybe richer visuals but less nodes / performance needs. perhaps an overview graph of the whole book or topic could be good.

I used a d3 force graph for this concept map https://dc.rik.ai/projects/nap at 1"30

everything

subtopic and linked items

[dcsan]

mermaid

we could also use the mermaid format for graphs, but then we need to convert from our JSON structured data into the weird mermaid formats. I'm sure there are some libs for that, but its better used I think as a kind of markdown/human readable format to write out graphs. there are a couple examples here. github will nicely render them inline for us https://github.com/dcsan/autoapps/blob/main/docs/graphs/entrel.md

mermaid i think is mostly for just rendering graphs, even the runtime rendered mermaidJS isn't interactive afaik https://mermaid.js.org/syntax/flowchart.html

[dcsan]

@fciannella also obsidian isn't open source but there's the foam plugins for VSCode that do basically the same thing https://foambubble.github.io/foam/user/features/graph-visualization https://github.com/foambubble/foam

they do have various node types, which could be interesting:

[dcsan]

mermaid also has a mindmap module which is nice. side note https://typora.io/ will render this inline

https://mermaid.js.org/syntax/mindmap.html

[dcsan]

also you can bind events to mermaid nodes https://mermaid.js.org/config/usage.html#binding-events

exporting renders is harder to do from node but can be done client side

  const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);

[fciannella]

Thanks DC for all this research! I like the react-flow better from look and feel, but I would have to understand if one can navigate the graph easily. Maybe a combination of react-flow plus its d3 access. Not sure; I never used either! But we do have good options!