Is there a plugin to display hierarchies of tags in my Tiddlywiki?

Say I have a tagging system comprised of T1, T2, T3, T4, T5 and T6 tags.

And they have a hierarchy amongst themselves:

  1. T1 tags T2
  2. T2 tags T3
  3. T4 tags T5
  4. T6 neither tags nor is tagged by any.

I’m looking for something that would autodetect all that and show something like:

  • T1 → T2 → T3
  • T4 → T5
  • T6

Or better yet, a node diagram (better in case of cross linkage in hierarchies, such as if T2 also tagged T5).

Thanks.

The easiest way to get output that might suit your needs is to use the <<toc>> (Table of Contents) macros. To make it work, you would need to define an additional “root” tag, such as “MyTagSystem”, that tags all the “top-level” tags that are part of your tagging system (i.e., T1, T4, and T6).

Then, to show the entire hierarchical tree of all the paths from MyTagSystem to each of the individual “T#” tag tiddlers, you could simply write:

<div class="tc-table-of-contents">
<<toc MyTagSystem>>
</div>

The result would look like this:

T1
   T2
      T3
T4
   T5
T6

Note that the root tag (“MyTagSystem”) is NOT displayed in the output. Also, if you want a more interactive output that you can dynamically expand/collapse to view any specific “branch” of the “toc tree”, you could write:

<div class="tc-table-of-contents">
<<toc-selective-expandable MyTagSystem>>
</div>

Which would initially appear as

> T1
> T4
  T6

and then you would just click on any “>” symbol to expand that branch.

enjoy,
-e

2 Likes

Of possible relevance: https://tag-categories.tiddlyhost.com/

2 Likes

Thanks a lot. This is the first time I managed to get a toc macro to actually show anything, lmao. This helps.

Thanks, this looks interesting.

Addendum:

Here’s a completely custom \procedure definition that produces exactly the kind of output you described in your OP. It’s quite a bit more advanced that simply using the TWCore’s <<toc>> macro, but gives you complete control over exactly how things work.

\procedure mytoc(here)
<$list filter="[tag<here>] -[enlist<path>]" emptyMessage="<<mytoc_showpath>>">
   <$let path={{{ [enlist<path>] [<currentTiddler>] +[format:titlelist[]join[ ]] }}}>
   <$transclude $variable=mytoc here=<<currentTiddler>>/>
   </$let>
</$list>
\end
\procedure mytoc_showpath() <$list filter="[enlist<path>]" join="&rarr;"><$link/></$list><br>

<<mytoc MyTagSystem>>

Notes:

  • The mytoc(here) procedure is recursive and is initially invoked with the “root” tag (e.g., “MyTagSystem”), which is referred to as <here> within the procedure.
  • A $list widget is then used to process each tiddler tagged with <here>:
    • First, add the current tiddler title to a path variable (which will eventualy contain a list of tiddler titles)
      • Note that the path variable is initially empty, so the first time the $let widget is applied, the path is simply set to contain just the current tiddler title.
      • The +[format:titlelist[]join[ ]] filter run ensures that any titles that contain spaces are automatically enclosed in doubled square brackets, and that the entire list of tiddlers is space-separated to form a standard TiddlyWiki list value.
    • Then, use a $transclude widget to recursively invoke the mytoc procedure, passing the current tiddler title as the “here” parameter.
  • The processing continues, recursively walking down the “branch” of the tree, until it reaches a tiddler that is not tagging any other tiddlers (i.e, a “leaf” node of that branch).
    • When a “leaf” node is reached, the emptyMessage part of the $list widget is invoked, calling on <<mytoc_showpath>> to display the desired output for the current branch.
      • This code enlists each tiddler title in the accumulated path and outputs it with an “arrow” symbol between each title.
    • Note that the [tag<here>] filter also excludes any tiddlers that have already been listed in the current path. This is important, as it ensures that if you have a “tag loop” (e.g., A tags B, B tags C, C tags A), then you won’t get a never ending infinite recursion that can potentially “brick” your TiddlyWiki.

enjoy,
-e

2 Likes

May be my trails-plugin may be an option: BC & Trails — Breadcrumbs & Trails Visualize your Context

It was developed to show the “trail” of filter syntax description it also works for the rest of the TOC tags.
If imported to tiddlywiki.com it looks like this

1 Like

If you find the toc useful, you may find this of value (I do!)

Create a tid with the following

<div class="tc-table-of-contents">
<$macrocall $name="toc-selective-expandable" />
</div>

a caption field of TOC here

and tag it $:/tags/TiddlerInfo

The info pane for every tid now has a “TOC here” tab that can be checked to see how it looks as the source of a TOC tree, but remains out-of-the way till you check it.

Screenshot from a work in progress
2025-07-07T11:09:22_9cb0874a

4 Likes

This is great. I mean the code at this point is unintelligible (though I hope to remedy that situation soon enough).

Also, the prior two solutions that you posted, the ones using toc and toc-selective-expandable macros, would there be a way of giving the results identation lines?

Like imagine how most code editors demarcate levels of identation, with faint lines reaching down from something like the beginning of a code line containing a function signature and opening brace to the closing brace of that function, with the code lines with the function body in between, idented.

Would that be possible?

How did you get a numbered list?

Will check. Thank you.

oh, I think I managed without meaning to (or realising), to capture the code and the screenshot at different times in my playing about with it.

Just remove the surrounding div - the tc-table-of-contents class is what removes the numbers. The toc-selective-expandable by itself has them by default (as far as I understand it)

I’ve also got a sidebar with that same TOC, this time having to reference the tag explicitely, and for that one I use this tid

----
Table of Contents from <<tag "The Hitchhiker's Guide to the Galaxy">>

<div class="tc-table-of-contents">
<$macrocall $name="toc-selective-expandable" tag="The Hitchhiker's Guide to the Galaxy"/>
</div>

That exists in the sidebar via the tag $:/tags/SideBarSegment

1 Like

Oh, ok. Got it, thanks.

no prob and apologies for the confusion!

There are a few toc variations available, the selective-expandable just happens to be what I like best. Eric linked to the official documentation earlier - it’s worth playing with the variations to get a feel for them and choose what suits you best :slight_smile:

1 Like

Np. Any idea about this?

Brilliant!

The thread is very interesting.

It illustrates that humble TOC building code can be leveraged multiple ways.

My Q: Do we anywhere have a comprehensive TW dedicated to TOCs?

Yes, there is!

Add this stylesheet to your TiddlyWiki: TiddlyTools/Stylesheet/ListTree

Then, in the <div> wrapper around your <<toc>> macro, add list-tree to the class="..." param, like this:

<div class="tc-table-of-contents list-tree">
<<toc MyTagSystem>>
</div>

Note that TiddlyTools/Stylesheet/ListTree also contains several configurable field values that you can use to adjust the appearance of the tree lines to suit your own taste:
list-tree-color, list-tree-indent, list-tree-thickness and list-tree-width

enjoy,
-e

3 Likes

My initial thought was “not really, but I bet there is a CSS solution, and I bet there is a better one than my first thought” - which after a bit of toying around, was this

.tc-toc .tc-btn-invisible::before {
  content: "|";
}

resulting in this look, which is not too good really.

Anyway, I had that done and came back here to comment, and saw Eric’s solution, which is clearly so much better than I have already added his to my setup! :smiley:

(I’m posting mine as for the sake of having already come this far, and maybe it’ll generate inspirons in new directions for someone else)

Addendum:

Note that, in addition to using it with <<toc>> macros, TiddlyTools/Stylesheet/ListTree can also be applied to regular bullet/number formats, like this:

@@.list-tree
* top
** one
*** A
*** B
*** C
** two
*** D
*** E
** three
@@

-e

1 Like

Thanks but I must say, the previous version of TiddlyTools/Stylesheet/ListTree was a little nicer.

It had all these helpful comments. Also the latest one doesn’t appear to work (but I’m less sure about that considering my inexperience, it could be me goofing up somehow).