Been searching for a web-based graph editor for a while which is mobile-friendly, supports metadata for nodes and edges, and allows me to switch quickly between nodes.

Couldn't find one. Didn't think my requirements were so specific for something so ubiquitous as a graph editor, but I guess they are.

Writing one myself now. Going well so far. Satisfying. One more evening session and I think it's ready for my basic needs.

@floppy When you say "graph editor" what do you mean.. graph as in a plot, or a graph as in vertex and edges as a data structure?

@freemo Good question. I meant the network/vertex/edge-based kind of graph.

Updated the original post for clarity. Thanks for the hint.

Follow

@floppy Awesome. So as for editing graphs (something im intimately familiar with as everything i deal with is based on graph theory)... So is this just for visual purposes, that you want to visualize a graph data structure. Or are you talking about some sort of GUI editor that spits it out as source code so you can use graph structures in code?

If your just trying to visually edit graphs thats easy there are tons of options. I can think of a few that meet your criteria as well.. but what do you mean "switch between nodes".. what are you "switching"?

@freemo Thanks for asking.

What I want to have in the end is a visualisation of a graph, where OTOH I can add/move/remove nodes, but OTOH also select single nodes and edit metadata, that gets displayed in a webform-kind-of-thing, when I select nodes. All of that mobile-friendly.

(1/3)

@freemo
There are amazing programs out there like Cytoscape or yEd and some web-based tools that looked nice, but none of that felt lightweight enough for my intended workflow.

I will be selecting different nodes (and edges) frequently to edit metadata. So I want to have as little friction (required clicks/taps or however you want you measure it) there as possible.

(2/3)

@freemo
The output format is some simple JSON {nodes:..., edges:...} kind of thing. Focus of this project is nice usability for me, so I can use it as a tool for other things.

Graphs are great and I like modelling things with it frequently. Having a lightweight, but flexible tool in my repertoire I feel comfortable with (besides the two great ones mentioned above) will be very helpful, I think. :)

(3/3)

@floppy

So now that I know your needs a bit better here is my 2 cents

1) If you want to roll everything yourself, go for it. You dont need a good reason. But building off of existing tech is going to save you a lot of time and probably give you a more capable result.

2) I'd suggest text based formats that render as an image rather than a GUI. This way the "source" is the output already and if you want the output to be closer to JSON then all you do is write a simple script to convert from one to the other

2a) By doing the above you can leverage GIT along side your diagram/graph versions and actually look at (and understand) diffs.

3) If you really need a GUI, those do exist, and plenty of them are web based (like diagrams.io), though i cant think of one that is web based, open source, and fills all your needs while being a purely point and click interface (no text editing.

Anyway, as to the above. I highly recommend something like Mermaid, plantUML or kroki.

HEre is the web UI for kroki to generate diagrams of any kind:

kroki.io/

Choose any one of the many diagram types that support graphs (there are a few) and you should have most of what you need.

Of course if you need #3 then closest I know of is diagrams.io and similar tools. But wont quite get you there either.

@freemo Thanks for the thoughts.

1) I usually try to avoid rolling anything my own, because the one who needs to maintain the code needs to be me. :) But I couldn't find anything that fit my needs/work habits.

2) Text-based formats are great and I use them (PlantUML, Mermaid, Graphviz), but here I don't find them useful. Too constraining. I want to be able to cluster and group things quickly and flexibly.

(1/2)

@freemo
2/cont'd) I want to interactively mess with the graph. I find those tools too constraining for a explorative, creative, and hence sometimes less structured ("messy") workflow, to complement such tools.

3) I tried diagrams.net/draw.io and similar and they don't cut it. Too many features I don't need/want and that in consequence actually get in my way. Metadata not really nicely accessible when I tested. Not as mobile-friendly as I hope for.

(2/2)

@freemo
kroki.io looks interesting though! I'm always curious about such tools. After having worked with PlantUML a bit I wanted to get more into alternatives like MermaidJS, so maybe I'll look into kroki.io for that more. Thanks!

@floppy

Yea sorry i dont have any better ideas on tools. good luck rolling your own!

I just moved to kroki a few weeks ago and setup a server on QOTO. After coming from plantUML and Mermaid this is pretty much the exact same idea but combines the two of them AND adds like 20 more diagram types, all text based. I am loving it.

Just a note, while you can use the link i gave you to design stuff on a webui, they dont have a public backend server you can use, so if you use other tools that support it on the backend (like WikiJS) then youd need to set up your own server. That said the QOTO kroki server is free for anyone to use:

kroki.qoto.org

@freemo Thanks again for sharing insights and resources! I will check it out!

Sign in to participate in the conversation
CleverLibre Social

CleverLibre Social is an inclusive social instance for open discussion, learning, and community.
All cultures welcome.
Hate speech and harassment strictly forbidden.