TW5-Graph is ready for more!

Plugins
#1

HelloThere

TW5-Graph, TiddlyMap’s spiritual successor, now has a shiny polish. All outstanding bugs and feature requests have been completed. It is a fully-fledged framework for creating graphs and visualization in TiddlyWiki, both through an easy-to-use GUI, and programmatically through wikitext widgets.

Now it’s ready for more.

@JanJo

  • Drag and Dropping of links now works as expected with editable graphs
  • Opening nodes in fullscreen mode opens them in modals instead of the river behind the graph
  • You can hover nodes to see their body content

@dongrentianyu

  • Exporting of graphs to PNG is now supported. (I know you knew this already.)

@fastfreddy

  • That bug you were encountering should be resolved. That one was tough because it only happened on some machines.

@Peter

  • TW5-Graph now has full support for showing neighbors, both linked-to and linked-from, as well as any other kind of relationship between tiddlers.

@Christian_Byron

  • TW5-Graph has prototype Mermaid support to show how graphs could be rendered as SVG instead of as html canvases. This feature could be elaborated if people wished…

@etardiff

  • The ability to locate and focus on a single node is now supported. I know you knew this, but you might not have known you can do all sorts of other viewport manipulations, such as “double click to zoom”, or “lock onto node to follow”.

And with that, all Issues are closed, and TW5-Graph is ready for more. I’m not going to add additional features unless I know somebody out there actually plans to use it. So please feel free to add feature requests.

17 Likes
The Amazing PasteUp of @EricShulman
#2

Congratulations @Flibbles, TW5-Graph is looking great, and the documentation and demos are very nicely done.

At some point I seem to remember we had a TW5-Graph badge in the “Find Out More” tiddler. I’d be very happy to reinstate it to mark the new release. Perhaps you could prepare a pull request?

#3

This is amazing. If nothing else, it has some of the very best documentation I’ve ever seen.

I look forward to playing with it when life gets a bit less busy!

#4

Really beautiful and professional like most of your solutions.

Your documentation and tutorials are elegant and I am working through them now. I have seen some inconsistencies such as saying there is one engin, then listing three :nerd_face: but none of these are critical.

  • The “Info View” is empty.

As I said previously I plan to leverage this solution rather than use the older and a little more complex to customise TiddlyMap. That is I will commit to learning it deeply, and hopefully provide higher level support and take some of the load off you, here in the forums.

Thanks again @Flibbles

[Edited]
SOme of the operators and actions that come with TW5-graph could be distributed seperatly for there utility value. I think it would support a few discussions of late with @Springer, @etardiff, @nemo and @Scott_Sauyet thus I mention them here.

  • for example the list manipulation actions
#5

@jeremyruston, That’d be awesome to feature TW5-Graph in the Find Out More banner! Thank you! At this moment, the plugin would benefit more from exposure than development without feedback.

I took a crack at a PR introducing the Thumbnail badge and accompanying tiddler here. I had the audacity to give it the “NEW” ribbon-text. Let me know if I overstepped.

@Scott_Sauyet, Take your time! If you do ever get to playing with it, feel quite free to open feature requests for any way you find it lacking. There is still a ton of ways TW5-Graph can grow. I’d still be developing it now with my own ideas if I had infinite time, but it’s better to develop based on user requirements.

@TW_Tones, Thank you! I’ve always been a believer that a project is only as good as its documentation.

I fixed the “Info View” graph. It’s not really meant to be used in the sidebar, but now if you look at it there, it has some default content, and explains what it’s actually for (appearing in a TiddlerInfo tab).

When you say separating some of the API operators and actions, what conversations are you referring to?

#6

No Conversation, Only that I realise there are some operators, and some related to relink that may fill gaps that need filling even without TW5-Graph in use. I will understand more as my usage improves.

#7

Hi Flibbles, thanks a lot. This is a great improvement for TiddlyWiki. But as always my desires go further.

  • Dragging links into the graph works like a charm. Would it be possible to drag them directly on a node to create a relation.
  • The modals are a great enhancment. But perhaps it could be useful to make a detour and transclude the node-tiddler in modal designed the graph. This could add the possibly to add the behaviour that they close clicking outside them by default. And perhaps a writing-mode could be implemented, to edit the tiddler in the modal.
1 Like
#8

@Flibbles can canvas feature seen in many note taking apps like obsidian be created on top of Tw-graph ?

2 Likes
#9

I’ve had a brief fiddle with this. It looks very nice, but I can’t see a use for me.

The only feedback I have is that the arrow text seems to me to be unnecessary clutter. Perhaps replace that text with an icon+tooltip? TiddlyWiki already has icons that might be suitable:

  • “tagged with”: “$:/core/images/tag-button”
  • “links to”: “$:/core/images/link”
  • “wrote”: “$:/core/images/edit-button”
  • “transcludes”: “$:/core/images/transcludify”
#10

@JanJo : In theory you might be able to this. Vis-Network might be able to track which node you dropped a link onto. But in order to decide what relation to create, you’d need to fill out the action widget to occur when the drag-n-drop occurs. Not hard. No harder than filling out the “actions” attribute of a button. I’ll look into this.

Modal: Yeah, I could transclude instead. Make sure links clicked in the modal stay in the modal. It was one of the features I was considering doing without feedback. An edit mode in modal is a bit more work, but theoretically possible.

@andrewg_oz : The edges are configurable. By default they have the labels, but you can get rid of that quickly from the settings. However, they are limited to what the underlying engine supports, and vis-network does not support svg icons over edges.

@TW_Tones : You mean the “typed” actions? Yeah. they perform field actions variant on what “type” of field a field is. So relink list fields, filter fields, and title fields get treated appropriately. Those actions could be in Relink, though no one has ever requested them, and TW5-Graph makes use of them even if Relink isn’t installed.

@arunnbabu81 : I’ve never used Obsidian. Do you mean using it something like this?

Screenshot from 2025-10-08 11-06-52

That’s the best Vis-Network can do, I think. If you want something other than that, TW5-Graph can surely do it, but it may need to connect with a different visualization engine for it.

2 Likes
#11

This link may give you some idea about obsidian canvas feature.

Edit: Obsidian Canvas - Visualize your ideas - this interactive video in this link also shows how obsidian canvas looks like

This is something similar to how obsidian canvas looks- but there should be option to create new nodes by double click and ability to add connection on the fly. Was this done in Tw-Graph ? How to make the text of nodes visible in the graph instead of the title or caption. The containers for displaying the text should be scrollable. And the background color of these container could be saved in the color field of the nodes.

Heptabase also has similar canvas feature - https://heptabase.com/

#12

:heart_eyes:
That looks very good, is that example in your Demo?

#13

This looks really cool! I have replaced my use of echarts with this in my own wiki. Thanks for a great plugin!

FYI, I was getting an error when I opened the “Graph” sidebar in my wiki. It appears to be coming from vis.js. Updating to 5.3.8 resolved this - I think there may be an implicit dependency here (before I was trying on 5.3.6).

[Error] Script error.
	(anonymous function) (demo_graph.html:4836)
	(anonymous function) (demo_graph.html:4888)
	(anonymous function) ($:/plugins/flibbles/vis-network/vis.js:37)

followed by a “No default value” error:

[Error] TypeError: No default value
	(anonymous function) ($:/core/modules/widgets/transclude.js:5905)
	(anonymous function) ($:/core/modules/widgets/widget.js:616)
	(anonymous function) ($:/core/modules/widgets/reveal.js:46)
	(anonymous function) ($:/core/modules/widgets/widget.js:679)
	(anonymous function) ($:/core/modules/widgets/reveal.js:227)
	(anonymous function) ($:/plugins/tobibeer/appear/popup.js:13:1345)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/list.js:379)
	(anonymous function) ($:/core/modules/widgets/list.js:243)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/element.js:100)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/element.js:100)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/element.js:100)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/element.js:100)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/plugins/tobibeer/appear/popup.js:13:1345)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/list.js:379)
	(anonymous function) ($:/core/modules/widgets/list.js:243)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/plugins/tobibeer/appear/popup.js:13:1345)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/element.js:100)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/scrollable.js:256)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/list.js:379)
	(anonymous function) ($:/core/modules/widgets/list.js:243)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/element.js:100)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	(anonymous function) ($:/core/modules/widgets/element.js:100)
	(anonymous function) ($:/core/modules/widgets/widget.js:689)
	refresh ($:/core/modules/startup/render.js:84)
	(anonymous function) ($:/core/modules/startup/render.js:114)
	(anonymous function) ($:/core/modules/wiki.js:133)
	(anonymous function) ($:/core/modules/wiki.js:166)
1 Like
#14

@arunnbabu81: I’ve done some more research on the obsidian canvas feature. It’s very well polished, and not much else does it, at least not that I could find. TW5-Graph is a framework, and until we find an opensource javascript library that does true canvassing, we won’t be able to support it.

But what you see, and to answer @JanJo’s question. I could make it do what I just previewed here. That came from the vis-network example site, but by just exposing a few more properties, it would be possible. It’s not really canvassing though. You can’t edit in the graph (but you could pull up modals. I’ll be elaborating that soon).

@Peter: Yeah, it was your TiddlyWiki being out of date. Unlike with Relink, I decided not to bother supporting older versions of TW, especially given how reliant TW5-Graph is on new features like \widget.

4 Likes
#15

Can obsidian canvas itself be used …i think it’s open source…but I am not sure of the exact details and whether it has any disadvantages.

Other libraries I have heard of are tldraw and excalidraw…but they won’t be having the graph rendering capabilities i guess. Can these be used in combination with vis network for achieving graph editing capabilities.

1 Like
#16

From what I can tell, the obsidian canvas file spec is open source, but the canvas software itself is proprietary. I’m happy to be wrong about this if you can find a link to the source.

As far as I can tell, tldraw and excalidraw are whiteboard libraries, which I don’t think would be able to capture the same features as canvassing software.

1 Like
#17

@Flibbles is it possible in the latest update ?

#18

Sort of…

<$graph>
<$properties shape=box>
<$node $tiddler=A $pos="0,-150" label="""It appears that this is indeed possible as is,
even though I haven't opened up all of the "width" features vis-network makes available.

The syntax of vis-network labels is pretty limited however.""" />

<$node $tiddler=B $pos="0,0" label="""Currently, it's not possible to specify minimum and maximum widths to nodes like this.

That's what I forgot to expose.

A lot of people keep making feature requests in talk.tiddlywiki, which is fine, I guess,
but I'm very apt to forget about them unless feature requests are opened up in github.
""" />

<$node $tiddler=C $pos="0,150" label="""Also, it's worth noting that these labels are not wikitext.

They're just strings that vis-network is interpreting its own way.
That might be something worth improving.
TW5-Graph is intended to normalize a lot of behavior between potential engines.
""" />

Screenshot from 2025-10-26 12-20-53
Screenshot from 2025-10-26 12-20-53871×526 65.8 KB