feat(docs): improve documentation on note map/relation map

This commit is contained in:
Elian Doran
2025-03-29 12:15:29 +02:00
parent 80cfd73cae
commit 644d79b1ce
34 changed files with 527 additions and 417 deletions

View File

@@ -137,6 +137,13 @@
"value": "attributes",
"isInheritable": false,
"position": 30
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-list-check",
"isInheritable": false,
"position": 110
}
],
"format": "html",
@@ -182,6 +189,13 @@
"value": "attribute-inheritance",
"isInheritable": false,
"position": 20
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-list-plus",
"isInheritable": false,
"position": 30
}
],
"format": "html",
@@ -230,7 +244,14 @@
"name": "shareAlias",
"value": "promoted-attributes",
"isInheritable": false,
"position": 20
"position": 10
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-list-ul",
"isInheritable": false,
"position": 40
}
],
"format": "html",
@@ -338,6 +359,13 @@
"value": "template",
"isInheritable": false,
"position": 30
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-copy",
"isInheritable": false,
"position": 110
}
],
"format": "html",
@@ -346,98 +374,6 @@
}
]
},
{
"isClone": false,
"noteId": "iRwzGnHPzonm",
"notePath": [
"pOsGYCXsbNQG",
"tC7s2alapj8V",
"iRwzGnHPzonm"
],
"title": "Relation Map",
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/markdown",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "wX4HbRucYSDD",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "BCkXAVs63Ttv",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "imageLink",
"value": "EH6qNioOHeyT",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "imageLink",
"value": "xeZPrfi77XPu",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "imageLink",
"value": "N98UhifxrVpZ",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "kBrnXNG3Hplm",
"isInheritable": false,
"position": 80
},
{
"type": "label",
"name": "shareAlias",
"value": "relation-map",
"isInheritable": false,
"position": 30
}
],
"format": "html",
"dataFileName": "Relation Map.html",
"attachments": [
{
"attachmentId": "x92CIQzusTuc",
"title": "relation-map-dev-process-demo.gif",
"role": "image",
"mime": "image/gif",
"position": 10,
"dataFileName": "Relation Map_relation-map-.gif"
}
]
},
{
"isClone": false,
"noteId": "BCkXAVs63Ttv",
@@ -446,7 +382,7 @@
"tC7s2alapj8V",
"BCkXAVs63Ttv"
],
"title": "Note Map",
"title": "Note Map (Link map, Tree map)",
"notePosition": 30,
"prefix": null,
"isExpanded": false,
@@ -473,10 +409,17 @@
"value": "note-map",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "bdUJEHsAPYQR",
"isInheritable": false,
"position": 40
}
],
"format": "html",
"dataFileName": "Note Map.html",
"dataFileName": "Note Map (Link map, Tree map).html",
"attachments": [
{
"attachmentId": "F48iB3BbITHb",
@@ -484,7 +427,7 @@
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Note Map_image.png"
"dataFileName": "Note Map (Link map, Tree m.png"
},
{
"attachmentId": "scmGuoLQPj8C",
@@ -492,7 +435,7 @@
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "1_Note Map_image.png"
"dataFileName": "1_Note Map (Link map, Tree m.png"
}
]
},
@@ -5393,30 +5336,102 @@
},
{
"isClone": false,
"noteId": "joqzSrDccPKf",
"noteId": "iRwzGnHPzonm",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"joqzSrDccPKf"
"iRwzGnHPzonm"
],
"title": "Relation Map",
"notePosition": 70,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"mime": "text/markdown",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "zEY4DaJG4YT5",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "wX4HbRucYSDD",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "imageLink",
"value": "EH6qNioOHeyT",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "imageLink",
"value": "xeZPrfi77XPu",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "imageLink",
"value": "N98UhifxrVpZ",
"isInheritable": false,
"position": 70
},
{
"type": "label",
"name": "shareAlias",
"value": "relation-map",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-network-chart",
"isInheritable": false,
"position": 10
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "BFs8mudNFgCS",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "BCkXAVs63Ttv",
"isInheritable": false,
"position": 90
}
],
"format": "html",
"dataFileName": "Relation Map.html",
"attachments": []
"attachments": [
{
"attachmentId": "x92CIQzusTuc",
"title": "relation-map-dev-process-demo.gif",
"role": "image",
"mime": "image/gif",
"position": 10,
"dataFileName": "Relation Map_relation-map-.gif"
}
]
},
{
"isClone": false,
@@ -5427,7 +5442,7 @@
"bdUJEHsAPYQR"
],
"title": "Note Map",
"notePosition": 80,
"notePosition": 90,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -5439,11 +5454,27 @@
"value": "bx bxs-network-chart",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BCkXAVs63Ttv",
"isInheritable": false,
"position": 20
}
],
"format": "html",
"dataFileName": "Note Map.html",
"attachments": []
"attachments": [
{
"attachmentId": "iSjacTLiMjyr",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Note Map_image.png"
}
]
},
{
"isClone": false,
@@ -5454,7 +5485,7 @@
"HcABDtFCkbFN"
],
"title": "Render Note",
"notePosition": 100,
"notePosition": 110,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -5481,7 +5512,7 @@
"GTwFsgaA0lCt"
],
"title": "Book",
"notePosition": 120,
"notePosition": 130,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -5667,7 +5698,7 @@
"s1aBHPd79XYj"
],
"title": "Mermaid Diagrams",
"notePosition": 130,
"notePosition": 140,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -5774,7 +5805,7 @@
"grjYqerjn243"
],
"title": "Canvas",
"notePosition": 150,
"notePosition": 160,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -5810,7 +5841,7 @@
"1vHRoWCEjj0L"
],
"title": "Web View",
"notePosition": 160,
"notePosition": 170,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -5837,7 +5868,7 @@
"gBbsAeiuUxI5"
],
"title": "Mind Map",
"notePosition": 170,
"notePosition": 180,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -5864,7 +5895,7 @@
"81SGnPGMk7Xc"
],
"title": "Geo map",
"notePosition": 180,
"notePosition": 190,
"prefix": null,
"isExpanded": false,
"type": "text",
@@ -6853,6 +6884,23 @@
}
]
},
{
"isClone": false,
"noteId": "Mn9xGz3MMex8",
"notePath": [
"pOsGYCXsbNQG",
"Mn9xGz3MMex8"
],
"title": "New note",
"notePosition": 230,
"prefix": null,
"isExpanded": false,
"type": "noteMap",
"mime": "",
"attributes": [],
"dataFileName": "New note.dat",
"attachments": []
},
{
"isClone": false,
"noteId": "Wxt3vVlxlYLi",
@@ -6861,7 +6909,7 @@
"Wxt3vVlxlYLi"
],
"title": "Attachments",
"notePosition": 240,
"notePosition": 250,
"prefix": null,
"isExpanded": false,
"type": "text",

View File

@@ -18,7 +18,7 @@
href="Attributes/Promoted%20Attributes.html">Promoted Attributes</a>. To illustrate these features, we've prepared
several showcases available in the <a href="Database.html">demo notes</a>:</p>
<ul>
<li><a href="Relation%20Map.html">Relation Map</a>
<li><a href="../Note%20Types/Relation%20Map.html">Relation Map</a>
</li>
<li><a href="Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
</li>

View File

@@ -61,7 +61,7 @@
allowing all instance notes (e.g., books) to display a specific icon and
CSS style.</p>
<p>Explore the concept further in the <a href="../Database.html">demo notes</a>,
including examples like the <a href="../Relation%20Map.html">Relation Map</a>,
including examples like the <a href="../../Note%20Types/Relation%20Map.html">Relation Map</a>,
<a
href="../Advanced%20Showcases/Task%20Manager.html">Task Manager</a>, and <a href="../Advanced%20Showcases/Day%20Notes.html">Day Notes</a>.</p>
<p>Additionally, see <a href="../Default%20Note%20Title.html">default note title</a> for

View File

@@ -21,7 +21,7 @@
<p>When you run Trilium for the first time, it will generate a new database
containing demo notes. These notes showcase its many features, such as:</p>
<ul>
<li><a href="Relation%20Map.html">Relation Map</a>
<li><a href="../Note%20Types/Relation%20Map.html">Relation Map</a>
</li>
<li><a href="Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
</li>

View File

@@ -5,30 +5,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Note Map</title>
<title data-trilium-title>Note Map (Link map, Tree map)</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Note Map</h1>
<h1 data-trilium-h1>Note Map (Link map, Tree map)</h1>
<div class="ck-content">
<p>Note map is a visualisation of connections between notes.</p>
<p>This provides an insight into a structure ("web") of notes.</p>
<p>There are two types of note map:</p>
<ul>
<li>Link Map, which shows relations between notes.</li>
<li>Note Map, which shows the hierarchical tree structure.</li>
</ul>
<h2>Link Map</h2>
<p>Shows <a href="Attributes.html">relations</a> between notes:</p>
<p>
<img src="1_Note Map_image.png">
<img src="1_Note Map (Link map, Tree m.png">
</p>
<h2>Tree Map</h2>
<p>Shows hierarchical map of notes:</p>
<p>
<img src="Note Map_image.png">
<img src="Note Map (Link map, Tree m.png">
</p>
<h2>Dedicated note type</h2>
<p>Apart from the note map feature which can be accessed from any note, it
is also possible to create a dedicated note which will display the relations
in full screen. See&nbsp;<a class="reference-link" href="../Note%20Types/Note%20Map.html">Note Map</a>&nbsp;for
more information.</p>
<h2>See also</h2>
<p><a href="Relation%20Map.html">Relation map</a> is a similar concept, with
some differences:</p>
<p><a href="../Note%20Types/Relation%20Map.html">Relation map</a> is a similar
concept, with some differences:</p>
<ul>
<li>note map is automatically generated while relation map must be created
manually</li>

View File

@@ -1,95 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Relation Map</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Relation Map</h1>
<div class="ck-content">
<p>Relation map is a type of <a href="../Basic%20Concepts/Navigation/Tree%20Concepts.html">note</a> which
visualizes notes and their <a href="Attributes.html">relations</a>. See
an example:</p>
<h2>Development process demo</h2>
<p>This is a basic example how you can create simple diagram using relation
maps:</p>
<p>
<img src="../Attachments/relation-map-dev-process.png">
</p>
<p>And this is how you can create it:</p>
<p>
<img src="Relation Map_relation-map-.gif">
</p>
<p>We start completely from scratch by first creating new note called "Development
process" and changing its type to "Relation map". After that we create
new notes one by one and place them by clicking into the map. We also drag
<a
href="Attributes.html">relations</a>between notes and name them. That's all!</p>
<p>Items on the map - "Specification", "Development", "Testing" and "Demo"
are actually notes which have been created under "Development process"
note - you can click on them and write some content. Connections between
notes are called "<a href="Attributes.html">relations</a>".</p>
<h2>Family demo</h2>
<p>This is more complicated demo using some advanced concepts. Resulting
diagram is here:</p>
<p>
<img src="../Attachments/relation-map-family.png">
</p>
<p>This is how you get to it:</p>
<p>
<img src="../Attachments/relation-map-family-demo.gif">
</p>
<p>There are several steps here:</p>
<ul>
<li>we start with empty relation map and two existing notes representing Prince
Philip and Queen Elizabeth II. These two notes already have "isPartnerOf"
<a
href="Attributes.html">relations</a>defined.
<ul>
<li>There are actually two "inverse" relations (one from Philip to Elizabeth
and one from Elizabeth to Philip)</li>
</ul>
</li>
<li>we drag both notes to relation map and place to suitable position. Notice
how the existing "isPartnerOf" relations are displayed.</li>
<li>now we create new note - we name it "Prince Charles" and place it on the
relation map by clicking on the desired position. The note is by default
created under the relation map note (visible in the note tree on the left).</li>
<li>we create two new relations "isChildOf" targeting both Philip and Elizabeth
<ul>
<li>now there's something unexpected - we can also see the relation to display
another "hasChild" relation. This is because there's a <a href="Attributes/Promoted%20Attributes.html">relation definition</a> which
puts "isChildOf" as an "<a href="Attributes/Promoted%20Attributes.html">inverse</a>"
relation of "hasChildOf" (and vice versa) and thus it is created automatically.</li>
</ul>
</li>
<li>we create another note for Princess Diana and create "isPartnerOf" relation
from Charles. Again notice how the relation has arrows both ways - this
is because "isPartnerOf" definition specifies its inverse relation as again
"isPartnerOf" so the opposite relation is created automatically.</li>
<li>as the last step we pan &amp; zoom the map to fit better to window dimensions.</li>
</ul>
<p>Relation definitions mentioned above come from "Person template" note
which is assigned to any child of "My Family Tree" relation note. You can
play with the whole thing in the <a href="Database.html">demo notes</a>.</p>
<h2>Details</h2>
<p>You can specify which relations should be displayed with comma delimited
names of relations in <code>displayRelations</code> label.</p>
<p>Alternatively, you can specify comma delimited list of relation names
in <code>hideRelations</code> which will display all relations, except for
the ones defined in the label.</p>
<h2>See also</h2>
<ul>
<li><a href="Note%20Map.html">Note map</a> is a similar concept</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -30,8 +30,8 @@
<li><a href="../Note%20Types/Saved%20Search.html">saved search</a> note - contains
saved search query and dynamically displays result of the search as its
sub-notes</li>
<li><a href="../Advanced%20Usage/Relation%20Map.html">relation map</a> note
- visualizes notes and their relations</li>
<li><a href="../Note%20Types/Relation%20Map.html">relation map</a> note - visualizes
notes and their relations</li>
<li><a href="../Note%20Types/Book.html">book note</a> - displays its children
notes, useful for reading many short notes</li>
<li>mermaid - create diagrams and flowcharts using <a href="https://github.com/mermaid-js/mermaid">mermaid.js ↗</a>

View File

@@ -80,7 +80,7 @@
could be represented in extended user attributes but their support differs
greatly among different filesystems / operating systems</li>
<li>Trilium makes links / relations between different notes which can be quickly
retrieved / navigated (e.g. for <a href="Advanced%20Usage/Note%20Map.html">note map</a>).
retrieved / navigated (e.g. for <a href="Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">note map</a>).
There's no such support in file systems which means these would have to
be stored in some kind of side-car files (mini-databases).</li>
<li>Filesystems are generally not transactional. While this is not completely

View File

@@ -12,7 +12,16 @@
<div class="content">
<h1 data-trilium-h1>Note Map</h1>
<div class="ck-content"></div>
<div class="ck-content">
<p>A Note map is a note type which displays a standalone version of the feature
of the same name:&nbsp;<a class="reference-link" href="../Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">Note Map (Link map, Tree map)</a>.</p>
<p>Once created, the note map will display the relations between notes. Only
the notes that are part of the parent of the note map will be displayed
(including their children).</p>
<p>
<img src="Note Map_image.png" width="856" height="763">
</p>
</div>
</div>
</body>

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View File

@@ -12,7 +12,84 @@
<div class="content">
<h1 data-trilium-h1>Relation Map</h1>
<div class="ck-content"></div>
<div class="ck-content">
<p>Relation map is a type of&nbsp;<a class="reference-link" href="../Basic%20Concepts/Note.html">Note</a>&nbsp;which
visualizes notes and their <a href="../Advanced%20Usage/Attributes.html">relations</a>.
See an example:</p>
<h2>Development process demo</h2>
<p>This is a basic example how you can create simple diagram using relation
maps:</p>
<p>
<img src="../Attachments/relation-map-dev-process.png">
</p>
<p>And this is how you can create it:</p>
<p>
<img src="Relation Map_relation-map-.gif">
</p>
<p>We start completely from scratch by first creating new note called "Development
process" and changing its type to "Relation map". After that we create
new notes one by one and place them by clicking into the map. We also drag
<a
href="../Advanced%20Usage/Attributes.html">relations</a>between notes and name them. That's all!</p>
<p>Items on the map - "Specification", "Development", "Testing" and "Demo"
are actually notes which have been created under "Development process"
note - you can click on them and write some content. Connections between
notes are called "<a href="../Advanced%20Usage/Attributes.html">relations</a>".</p>
<h2>Family demo</h2>
<p>This is more complicated demo using some advanced concepts. Resulting
diagram is here:</p>
<p>
<img src="../Attachments/relation-map-family.png">
</p>
<p>This is how you get to it:</p>
<p>
<img src="../Attachments/relation-map-family-demo.gif">
</p>
<p>There are several steps here:</p>
<ul>
<li>we start with empty relation map and two existing notes representing Prince
Philip and Queen Elizabeth II. These two notes already have "isPartnerOf"
<a
href="../Advanced%20Usage/Attributes.html">relations</a>defined.
<ul>
<li>There are actually two "inverse" relations (one from Philip to Elizabeth
and one from Elizabeth to Philip)</li>
</ul>
</li>
<li>we drag both notes to relation map and place to suitable position. Notice
how the existing "isPartnerOf" relations are displayed.</li>
<li>now we create new note - we name it "Prince Charles" and place it on the
relation map by clicking on the desired position. The note is by default
created under the relation map note (visible in the note tree on the left).</li>
<li>we create two new relations "isChildOf" targeting both Philip and Elizabeth
<ul>
<li>now there's something unexpected - we can also see the relation to display
another "hasChild" relation. This is because there's a <a href="../Advanced%20Usage/Attributes/Promoted%20Attributes.html">relation definition</a> which
puts "isChildOf" as an "<a href="../Advanced%20Usage/Attributes/Promoted%20Attributes.html">inverse</a>"
relation of "hasChildOf" (and vice versa) and thus it is created automatically.</li>
</ul>
</li>
<li>we create another note for Princess Diana and create "isPartnerOf" relation
from Charles. Again notice how the relation has arrows both ways - this
is because "isPartnerOf" definition specifies its inverse relation as again
"isPartnerOf" so the opposite relation is created automatically.</li>
<li>as the last step we pan &amp; zoom the map to fit better to window dimensions.</li>
</ul>
<p>Relation definitions mentioned above come from "Person template" note
which is assigned to any child of "My Family Tree" relation note. You can
play with the whole thing in the <a href="../Advanced%20Usage/Database.html">demo notes</a>.</p>
<h2>Details</h2>
<p>You can specify which relations should be displayed with comma delimited
names of relations in <code>displayRelations</code> label.</p>
<p>Alternatively, you can specify comma delimited list of relation names
in <code>hideRelations</code> which will display all relations, except for
the ones defined in the label.</p>
<h2>See also</h2>
<ul>
<li><a class="reference-link" href="../Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">Note Map</a>&nbsp;is
a similar concept</li>
</ul>
</div>
</div>
</body>

View File

@@ -50,7 +50,7 @@
press enter and you have a link.</p>
<h2>Note map</h2>
<p>Trilium provides a visualisation of incoming and outgoing links for a
particular note. See <a href="../../Advanced%20Usage/Note%20Map.html">note map</a> for
particular note. See <a href="../../Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html">note map</a> for
details.</p>
</div>
</div>

View File

@@ -23,9 +23,8 @@
</li>
</ul>
</li>
<li><a href="User%20Guide/Advanced%20Usage/Relation%20Map.html" target="detail">Relation Map</a>
</li>
<li><a href="User%20Guide/Advanced%20Usage/Note%20Map.html" target="detail">Note Map</a>
<li><a href="User%20Guide/Advanced%20Usage/Note%20Map%20(Link%20map%2C%20Tree%20map).html"
target="detail">Note Map (Link map, Tree map)</a>
</li>
<li><a href="User%20Guide/Advanced%20Usage/Sharing.html" target="detail">Sharing</a>
<ul>
@@ -392,6 +391,8 @@
</li>
</ul>
</li>
<li><a href="User%20Guide/New%20note.dat" target="detail">New note</a>
</li>
<li>Attachments
<ul>
<li><a href="User%20Guide/Attachments/bookmark-folder.png" target="detail">bookmark-folder.png</a>