Extend link syntax to support custom labels for graph edges

Proposal to extend the existing link syntax to support user-defined labels on edges in graph view.

Issue

Links in and of themselves provide no meaningful context therefore context must be supplied through the written word. This works when reading the note directly but when viewing the graph view these transitionary contexts are lost – it is not clear from the graph view why a link exists, only that the link exists.

This is a fundamental weakness in all current note taking systems and is a weakness of the web itself.

Benefits

Allowing the user to define labels for edges will make it easy to see at a glance in the graph view the nature of all relationships between this note and the linked notes. Users can quickly “surf” from note to note via the graph view if desired and then “dive in” to a specific note.

Unlike the web there is no need for a centralized canonical registry of labels with agreed upon meanings – users are free to use arbitrary labels with arbitrary meanings.

Labeled arcs also approximate a mind map of the user’s notes. All in the filterable graph view.

Syntax

Given a link [[notename]] the syntax can be extended as follows: [[[email protected]]].

@ is chosen as it represents labeling the arc between the nodes.

Ex: [[Teach cats how to build giant [email protected] idea]]

Users could even use emoji labels for shorthand:

Ex: [[Teach cats how to build giant [email protected]🙀]]

Possible labels

Possible labels may include: (but are limited only by imagination)

  • is a
  • has a / has N
  • supports
  • opposes / contradicts
  • works well with
  • do not use with
  • elaboration/amplification (as in thought A evolved into concept B branched into two more lines of thought…)
  • owns / owned by
  • works in / works on / works with
  • good idea
  • bad idea / dead end (for those of us who want to keep the bad ideas and warn ourselves not to go that way)
  • :heart:
  • :bulb:

Display

Display the label as small text alongside the arrow, with a selectable CSS class so it can be customized by themes. Default to the same color as the arrow.

Consider also creating a second custom class for each label, containing the name of the label itself, for additional CSS customization by the user/theme.

Ex:

Given a link [[Teach cats how to build [email protected] idea]] generate something like this:

<div class="graph-arc-label graph-arc-labeltext--great-idea">great idea</div>

allowing users to write custom CSS like this:

/* all hail the cat overlords */
.graph-arc-labeltext--great-idea { 
    color: red; 
    background-color: yellow; 
}

so the brilliant idea is more prominent when viewing the graph.

This also helps encourage more focused note taking, since transitions can be clearly and easily established in the link itself.

2 Likes

2 posts were merged into an existing topic: Add support for link types