Provide tags as graph CSS classes/attributes to allow coloring of graph nodes

Feature requests
, ,
#1

Within Obsidian I work a lot with tags, to differentiate between different types of notes.
0.9.0 graph view already allows us to use different colors for tag nodes and attachment nodes.
But what would be really amazing in my opinion is, if we could assign different colors to note-nodes according to their tags (in graph view).

I don’t know how complicated (or even possible) the CSS -> WebGL conversion would be, but I could imagine the following methods:

a) Make tags accessible through a tag attribute. The tags attribute would contain a whitespace separated list of all tags on this node.
This would allow styling the nodes similar to the Tag Pills (Common CSS hacks) by using something like:

.graph-view.color-fill[tag~=idea] {
  color: blue;
}

This would also allow other fancy tricks as described in HTML attribute selectors.

b) Make tags available as classes so that we can access them like:

.graph-view.color-fill.idea {
  color: blue;
}

or maybe:

.graph-view.color-fill.tag-idea {
  color: blue;
}

I saw a bunch of other threads talking about similar ideas (coloring/highlighting graph nodes).
But exposing them for CSS would be the most flexible option.

8 Likes
#2

This would also (partly) solve this feature request to some extent and address this comment.

#3

I would also love this! I used this a lot in Neo4J Bloom and it’s so pretty and useful :slight_smile:

#4

This would also also make it easier to use notes as tags on other notes, instead of making pages for all tags as requested here. (I promise that sentence is coherent in context. Cf. the discussion on that request.)

Another approach would be to support this through YAML metadata on a note.