I’m just curious, not really in need of it. But generally speaking, I might need to display around a few dozen tiddlers. Because my TiddlyWiki has more and more tiddlers. So performance is still my concern.
fantastic work @Flibbles … This …will be most useful for so many of us!
I am getting an Internal JavaScript Error in Vivaldi (latest) but not in Chrome (latest)… yet they are both Chromium/v8-based and have the same javascript engine version ?!
Any ideas?
Vivaldi’s v8 version:
vs Chrome’s v8 version:
This is amazing. I started exploring and learning it, and I really appreciate the design approach and modularity.
This was the main reason I chose not to use the powerful TiddlyMap and stuck with the older, less feature-rich Tid Graph (TW5 plugins! — for TW5 plugin development and installation).
A somewhat daunting feature request that may not be feasible. Have you considered providing some quick syntax to achieve a generation effect similar to Mermaid diagrams or Graphviz? I think this may be a common requirement. Additionally, the ability to export to SVG or PNG would be useful. I briefly skimmed through the documentation but haven’t reviewed it in detail yet, so I’m not sure if a similar feature has already been proposed.
Maybe the Bottom-Up Tutorial is close to what you’re describing? Not necessarily “quick syntax” but it looks like you can explicitly define a graph via pure WikiText.
Echoing everyone else, @Flibbles congrats on the release! What a marvelous piece of code this looks to be, I honestly believe it will elevate TW for almost everyone. I’m already thinking of use cases for my current notebooks and having ideas for new ones just from what I saw in your examples.
Also a massive, massive bravo on the beautiful documentation. The depth, breadth and most of all clarity is phenomenal.
I have read this part of the documentation. However, I am a bit greedy and would prefer a quick syntax that can be written directly. I don’t need so many widget symbols. This is because nodes and edges are not actual tiddlers and field values. Of course, I can use other plugins to achieve this, but I would rather see the potential of TW5-Graph.
However, I am not making any demands, and I do not think that plugin author must implement this or any other function for I wish. I fully appreciate the hard work of the author.
I can’t second this enough! The bottom-up tutorial is particularly impressive; it makes a powerful and complex tool feel very accessible.
I also really appreciate that you’ve made it all configurable with pure wikitext. I’ll be very glad to say goodbye to the fiddly TiddlyMap GUI. 
I haven’t had the time to dig into it as thoroughly as I’d like, but so far, the only TiddlyMap feature I do find myself missing is the search bar that lets you zoom in on a selected node. Is this something you’d consider adding in the future?
Not withstanding a need for performance.
If this is mearly a list of titles there is less value in visualising it beyond a title list, if there is a complex set of relationships between a thousand items a thousand nodes can easily become 10,000 relationships and whilst you may be able to represent this in a graph, the value for communicating with the human visual system and brain is questionable. It seem better to build a solution where we focus on a subset of the total set and navigate from there.
- With large numbers there are other representations such as column graphs, expandable lists, statistical summaries and click to expand that would serve better.
See my last reply that references here which includes this idea and more, and @Flibbles is reviewing.
- Somtimes a simple list of titles is best for this kind of relationship.
There is an argument that could be put forward that this is under using tiddlywikis capabilities, the tiddler can be like a record in a database and to suggest there is no record suggests you are bypassing a key structure. Sure there will be exceptions and these can be handled like we often do using virtual tiddlers, or titles drawn from a list of some kind that are not actual titles. Including;
- Using any lis as input titles need not have underlying tiddlers
- There are powerful features and tricks available for handling missing tiddlers
Mapping nodes to titles, if they exist or not, perhaps arguably also fields (or their contents) map to relationships, helps keep a tiddlywiki flavor and ease of comprehension.
2 Likes
@Christian_Byron, The engines are small plugins that wrap existing public libraries and exposes them using a graphengine module (whose API I’m still finalizing). TW5-Graph is its own plugin independent of these wrappers, and it’s where 90% of my work went into this. One could create an SVG engine which creates and SVG image out of an input of nodes and edges. It could even be interactable, and even animated to some extent, though I expect there won’t be any physics.
@vuk I’ll fix that up typo with the next release. Thanks!
@jeremyruston I would be honored to have this plugin featured in the HelloThere tiddler. It’s already got stability set to “experimental” on the plugin, so that should be clear, but as long as people aren’t hacking my plugin or making their own engines, it’s pretty solid and good-to-go already.
A built-in TOC graph is definitely do-able. And I can have a built in widget for that soon. I haven’t done it yet simply because it’ll just take some work to make it look nice.
@Peter It can show relationships for a current tiddler. The feature already exists as its “live view”, which you might find to your liking. I should probably update the documentation to make this more readily discoverable.
@dongrentianyu A few dozen is perfectly fine for performance. Vis-Network can handle up to a few hundred before it starts getting choppy. Once I get around to finishing up Memgraph Orb as an alternative engine, it will be able to handle several thousand with no problem. But I’m going to polish the Vis-Network plugin to a shine first.
As for emulating Mermaid or GraphVis, it’s very likely I’ll be making a suite of <$graph.*> style widgets which do that stuff very simply. I’m just hoping to get some feedback first to get a sense of what people would like to see.
I recommend opening some feature requests on the TW5-Graph github page for specific requests. We’ll all be able to track them better there.
@fastfreddy Yeah… A lot of people are getting that, but I’m having trouble reproducing it. I’ve got some ideas (It looks like Felix Hayashi, the TiddlyMap creator, may have run into this too). I’ll push out a possible fix in a day or two.
@Mohammad tmap.id was such a problem. Some people discovered that when you mixed TiddlyWiki with lazy loading, it could delete your entire wiki. Those were some very angry bug reports.
@Lamnatos Thank you very much. I’ve always believed that documentation is equally important to the software itself.
@etardiff I’m sure I can do a “zoom to node” feature somehow. I just didn’t flag it as “first release” important. I haven’t looked into how Felix did it for TiddlyMap, and I’m not sure whether it was his own brew, or if it was vis-network specific. But either way, if he did it, I can do it too. If you’d like, you can open a github feature request for it. That’ll help me keep it in mind.
@TW_Tones I agree. In all my projects, when I started to get over 200-300 nodes in a graph, it became cumbersome, even if it was still rendering quickly. Either way, for those who want to have huge visualization, perhaps using more number-crunchy procedurally-generated nodes, Memgraph orb will actually be good for that once I get to polish it. It was meant for super large graphs.
4 Likes
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:
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.
4 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