Introducing TW5-Graph, Tiddlymap's spiritual successor!

V0.2.1 released

For all of those who are experiencing the “ResizeObserver loop” error upon opening TW5-Graph, it should be resolved now. But I can’t be certain since I was never able to replicate it.

Also, fixed that typo @vuk pointed out, and some other stuff.

2 Likes

On mobile.
I scroll down to the Responds in Real Time tiddler and select create a new node. I tab a blank spot on the graph. The dialog box then appears to scroll vertically at high speed.

A long press brings up the dialog correctly.

On android. Checked in Firefox and chrome.

1 Like

Confirmed; issue resolved with Vivaldi latest. Sweeeeet!

@Ste_W, I’ve created an issue for this here

If anyone has any other feature requests or bug reports, please feel free to open an issue on the project github page if you’re able. That way, I can track them better, and we won’t spam everone on this thread as much.

2 Likes

A few people requested support for diagramming libraries like Mermaid or GraphViz, so I went ahead and created it to see how it would work. And it was actually very simple:

Screenshot from 2025-08-08 00-46-34

Instead of using Vis-Network, you could use Mermaid to generate SVG. There isn’t any physics, of course, but the advantage is that this automatically places nodes reasonably, so you don’t ever have to consider it.

It works pretty well with live view too.

If this is a direction people like, I can contact the plugin owner of Mermaid-tw5 (to which I added the graphengine adapter), and see about having his plugin and mine integrate so you can use TW5-Graph to make Mermaid charts just like you’d make Vis-Network graphs. There are a TON of other types of graphs, like pie charts, sequence charts, bar graphs, and other stuff that TW5-Graph could have templates for.

If this isn’t something people are interested in, no problem! It was very healthy for me to create this adapter. It disabused me of a lot of assumptions I had regarding visualization software and how they’d work with TW5-Graph.

Edit: For any who are curious, I’ve already pushed this prototype to the demo site. You can play with it now if you’d like.

7 Likes

It is great that we can gain access to different diagramming libraries, one question could this be done on a graph by graph basis in the same wiki rather than ONLY a global switch (which is a good idea) but what if we could “request” a particular graph library to use if available, else the global?

  • I can forsee different graphs in the same wiki benefiting from a specific libary according to the nature of the data.
  • Perhaps even a graph library cascade?
1 Like

This is great. But are there zoom buttons, or a way to center the graph? The demo website I saw wasn’t centered.

@TW_Tones, Yes. The <$graph> widget has an $engine attribute for specifying this. I’ll be adding a switch to GraphTiddler configuration pages as well.

@dongrentianyu, There will be. This is just a hacked-together proof-of-concept to see if there is interest, or if not enough people are interested in putting TW5-Graph and diagram softwares like Mermaid together.

1 Like

I was just responding to the survey with one point that tw lacks a graph/map that is live - and this handles that! and it doesn’t seem to modify the original tiddlers! excellent!

some points:
will there be a way to have different layout algorithms? I see the bu, lr — but ot be useful in large maps, need for complex arrangements … for example YED has differently layouts (Interactive Showcase of Graph Layouts)
based on links frequency, centrality etc.

really like the tutorial as well!

really love this! hope to test it more

TW5-Graph has gone live with its V1 release! It is now stable, and its API won’t be changing under your feet (much). There are still many features to do. Thank you to everyone for your requests and your help.

@jeremyruston, I’ll put together a thumbnail image in a few days and post it for you for whenever you decide to use it.

@twsurvey TW5-Graph doesn’t currently support alternate layouts, but it could easily do so. And you could probably easily hack it right now to do so as well. You can open a feature request on github if you’d like to pursue this further.

8 Likes

Amazing plugin Flibbles thanks very much. I’m struggling to install the latest 1.0 on an Android mobile due to the drag and drop method on your homepage. The ‘export tiddler as json’ doesn’t seem to work anymore either. (Previous versions did I think - I managed to download them somehow.) Any chance of allowing ‘export as…’ for the plugin? Or a ‘flibbles plugin library’ link? Thanks.

Hi @Watt

I tried right now and export still works for me, here is how:

  • In the right sidebar, choose “More” tab
  • Choose “Plugins” subtab
  • Click on a plugin: it opens in the river
  • Use the plugin tiddler “v” viewmode button to select “Export” then “JSON”
  • Don’t forget to repeat this method for all dependencies

I always use this method, not only with TW5-Graph, and it works every time :slightly_smiling_face:

Hope this helps,

Fred

Thanks @tw-FRed, I was using duckduckgo and ‘export, save as json’ only produced a ‘wiki saved’ notification. I tried your steps in Firefox for Android and it worked just as expected. A ddg quirk it seems, thanks very much for the help. Downloading those ‘just drag and drop the link’ plugins on mobile is solved for me.

Thank you, Flibbles, this is really awsome work!
I have some wishes, sorry for posting here because I am not yet in github.

It would be great if

  • it was possible to drag links into the graph.
  • there was the option to click on a tiddler to open it either in a modal (if the graph is fullscreen or as a tiddler if it is in the sidebar.
  • show tiddler-bodies if a certain zoom-level is reached.

Glad you like it, @JanJo. I’ve created feature requests for the first two item.

The second one might not be feasible for the Vis-Network engine, but were you aware of the pop-up mechanic? Hopefully that feature can suit your needs.

Hi Flibbles,
this could be a modal above the widget. I had modified my TiddlyMap to do this with a linkcatcher. It would be great if something like that would be configurable. I would like to configure for example to open a modal if no storyriver is visible.

At the moment the popups are not so practical for me as it is hard to make them beautiful.

Oh whoops. Sorry, I meant the third one. The opening as a modal will be trivial.

1 Like