Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 10:22:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): improve documentation on Mermaid

Browse Source
This commit is contained in:
Elian Doran 2025-04-04 21:56:44 +03:00
parent 2a8ab728a7
commit be3e213ba3
No known key found for this signature in database
39 changed files with 779 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

279
docs/User Guide/!!!meta.json
View File

@ -1803,6 +1803,86 @@
"dataFileName": "Split View_1_Split View_im.png"
}
]
},
{
"isClone": false,
"noteId": "XpOYSgsLkTJy",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"XpOYSgsLkTJy"
],
"title": "Floating buttons",
"notePosition": 150,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-rectangle",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "s1aBHPd79XYj",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "grjYqerjn243",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "CoFPLs3dRlXc",
"isInheritable": false,
"position": 60
}
],
"format": "markdown",
"dataFileName": "Floating buttons.md",
"attachments": [
{
"attachmentId": "drdKIHK5GzfU",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Floating buttons_image.png"
},
{
"attachmentId": "FNh39vXBEZxT",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Floating buttons_image.png"
}
]
}
]
},
@ -4060,6 +4140,98 @@
"position": 10,
"dataFileName": "10_Images_image.png"
}
],
"dirFileName": "Images",
"children": [
{
"isClone": false,
"noteId": "0Ofbk1aSuVRu",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"iPIMuisry3hd",
"mT0HEkOsz6i1",
"0Ofbk1aSuVRu"
],
"title": "Image references",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "s1aBHPd79XYj",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "gBbsAeiuUxI5",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "grjYqerjn243",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 70
}
],
"format": "markdown",
"dataFileName": "Image references.md",
"attachments": [
{
"attachmentId": "6OgYPJ60Uz76",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Image references_image.png"
},
{
"attachmentId": "72VNSgANtMVT",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Image references_image.png"
},
{
"attachmentId": "kXBghrixmV2J",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Image references_image.png"
}
]
}
]
},
{
@ -4913,6 +5085,20 @@
"value": "bx bx-selection",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "0Ofbk1aSuVRu",
"isInheritable": false,
"position": 40
}
],
"format": "markdown",
@ -4926,6 +5112,22 @@
"position": 10,
"dataFileName": "Mermaid Diagrams_ELK off.svg"
},
{
"attachmentId": "EN4DhmgiSH6t",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Mermaid Diagrams_image.png"
},
{
"attachmentId": "if9nzuWHt5KP",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Mermaid Diagrams_image.png"
},
{
"attachmentId": "IKxo3tblVDHq",
"title": "ELK on.svg",
@ -4933,63 +5135,60 @@
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "Mermaid Diagrams_ELK on.svg"
},
{
"attachmentId": "TpPwoCFIePXm",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Mermaid Diagrams_image.png"
}
],
"dirFileName": "Mermaid Diagrams",
"children": [
{
"isClone": false,
"noteId": "opAFABmyb3CU",
"noteId": "RH6yLjjWJHof",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"s1aBHPd79XYj",
"opAFABmyb3CU"
"RH6yLjjWJHof"
],
"title": "ELK on",
"notePosition": 10,
"title": "ELK layout",
"notePosition": 30,
"prefix": null,
"isExpanded": false,
"type": "mermaid",
"mime": "text/plain",
"attributes": [],
"dataFileName": "ELK on.txt",
"attachments": [
"type": "text",
"mime": "text/html",
"attributes": [
{
"attachmentId": "biyznKlYQ7my",
"title": "mermaid-export.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "ELK on_mermaid-export.svg"
"type": "label",
"name": "iconClass",
"value": "bx bxs-network-chart",
"isInheritable": false,
"position": 10
}
]
},
{
"isClone": false,
"noteId": "r44dpvA1xFu8",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"s1aBHPd79XYj",
"r44dpvA1xFu8"
],
"title": "ELK off",
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"type": "mermaid",
"mime": "text/plain",
"attributes": [],
"dataFileName": "ELK off.txt",
"format": "markdown",
"dataFileName": "ELK layout.md",
"attachments": [
{
"attachmentId": "rQI7SXljnpJM",
"title": "mermaid-export.svg",
"attachmentId": "DOY5C5S4vCs7",
"title": "ELK off.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "ELK off_mermaid-export.svg"
"dataFileName": "ELK layout_ELK off.svg"
},
{
"attachmentId": "E1ysxcfkmGBZ",
"title": "ELK on.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "ELK layout_ELK on.svg"
}
]
}
@ -5004,7 +5203,7 @@
"grjYqerjn243"
],
"title": "Canvas",
"notePosition": 160,
"notePosition": 170,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -5040,7 +5239,7 @@
"1vHRoWCEjj0L"
],
"title": "Web View",
"notePosition": 170,
"notePosition": 180,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -5067,7 +5266,7 @@
"gBbsAeiuUxI5"
],
"title": "Mind Map",
"notePosition": 180,
"notePosition": 190,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -5094,7 +5293,7 @@
"81SGnPGMk7Xc"
],
"title": "Geo map",
"notePosition": 190,
"notePosition": 200,
"prefix": null,
"isExpanded": false,
"type": "text",

BIN
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_Floating buttons_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

13
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.md Normal file
View File

@ -0,0 +1,13 @@
# Floating buttons
![](Floating%20buttons_image.png)
Depending on the current note, a panel will appear near the top-right of the note, right underneath the [Ribbon](Ribbon.md). These buttons offer additional interaction that is specific to that particular note.
For example:
* For [Mermaid Diagrams](../../Note%20Types/Mermaid%20Diagrams.md) and [Canvas](../../Note%20Types/Canvas.md), there are buttons to download the SVG representation of the note, or to copy a reference to the note for pasting it a [Text](../../Note%20Types/Text.md) note.
* For [read-only notes](../Notes/Read-Only%20Notes.md), there is a button to temporarily edit the note for quick modifications.
## Interaction
The floating button area can be collapsed by pressing the two right arrows at the end of the section.

BIN
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
docs/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

40
docs/User Guide/User Guide/Note Types/Mermaid Diagrams.md
View File

@ -1,21 +1,37 @@
# Mermaid Diagrams
![](2_Mermaid%20Diagrams_image.png)
Trilium supports Mermaid, which adds support for various diagrams such as flowchart, sequence diagram, class diagram, state diagram, pie charts, etc., all using a text description of the chart instead of manually drawing the diagram.
For the official documentation of Mermaid.js see [mermaid.js.org/intro/](https://mermaid.js.org/intro/).
## ELK layout engine
## Layouts
Mermaid supports a different layout engine which supports slightly more complex diagrams, called the [Eclipse Layout Kernel (ELK)](https://eclipse.dev/elk/). Trilium has support for these as well, but it's not enabled by default.
Depending on the chart being edited and user preference, there are two layouts supported by the Mermaid note type:
In order to activate ELK for any diagram, insert the following YAML frontmatter right at the beginning of the diagram:
* Horizontal, where the source code (editable part) is on the left side of the screen and the preview is to the right.
* Vertical, where the source code is at the bottom of the screen and the preview is at the top.
```yaml
---
config:
layout: elk
---
```
It's possible to switch between the two layouts at any time by pressing the ![](Mermaid%20Diagrams_image.png) icon in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) area.
| With ELK off | With ELK on |
| --- | --- |
| ![](Mermaid%20Diagrams_ELK%20off.svg) | ![](Mermaid%20Diagrams_ELK%20on.svg) |
## Interaction
* The source code of the diagram (in Mermaid format) is displayed on the left or bottom side of the note (depending on the layout).
* Changing the diagram code will refresh automatically the diagram.
* The preview of the diagram is displayed at the right or top side of the note (depending on the layout):
* There are dedicated buttons at the bottom-right of the preview to control the zoom in, zoom out or re-center the diagram: ![](1_Mermaid%20Diagrams_image.png)
* The preview can be moved around by holding the left mouse button and dragging.
* Zooming can also be done by using the scroll wheel.
* The zoom and position on the preview will remain fixed as the diagram changes, to be able to work more easily with large diagrams.
* In the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) area:
* The source/preview can be laid out left-right or bottom-top via the _Move editing pane to the left / bottom_ option.
* Press _Lock editing_ to automatically mark the note as read-only. In this mode, the code pane is hidden and the diagram is displayed full-size. Similarly, press _Unlock editing_ to mark a read-only note as editable.
* Press the _Copy image reference to the clipboard_ to be able to insert the image representation of the diagram into a text note. See [Image references](Text/Images/Image%20references.md) for more information.
* Press the _Export diagram as SVG_ to download a scalable/vector rendering of the diagram. Can be used to present the diagram without degrading when zooming.
* Press the _Export diagram as PNG_ to download a normal image (at 1x scale, raster) of the diagram. Can be used to send the diagram in more traditional channels such as e-mail.
## Errors in the diagram
If there is an error in the source code, the error will be displayed in an information pane.
During the state of an error, the diagram will no longer be rendered and the previously working diagram will remain in the preview section.

15
docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout.md Normal file
View File

@ -0,0 +1,15 @@
# ELK layout
Mermaid supports a different layout engine which supports slightly more complex diagrams, called the [Eclipse Layout Kernel (ELK)](https://eclipse.dev/elk/). Trilium has support for these as well, but it's not enabled by default.
In order to activate ELK for any diagram, insert the following YAML frontmatter right at the beginning of the diagram:
```yaml
---
config:
layout: elk
---
```
| With ELK off | With ELK on |
| --- | --- |
| ![](ELK%20layout_ELK%20off.svg) | ![](ELK%20layout_ELK%20on.svg) |

1
docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK off.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK on.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

14
docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off.txt
View File

@ -1,14 +0,0 @@
---
title: Interfaces for B
---
flowchart LR
A-->|"Guarantee"|B
C-->|"User attributes"|B
C-.->|"Master data"|B
C-->|"Exchange Rate"|B
C-->|"Profit Centers"|B
C-->|"Vendor Partners"|B
C-->|"Work Situation"|B
C-->|"Customer"|B
C-->|"Profit Centers"|B
B-->|"Guarantee"|C

1
docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off_mermaid-export.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

16
docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on.txt
View File

@ -1,16 +0,0 @@
---
title: Interfaces for B
config:
layout: elk
---
flowchart LR
A-->|"Guarantee"|B
C-->|"User attributes"|B
C-.->|"Master data"|B
C-->|"Exchange Rate"|B
C-->|"Profit Centers"|B
C-->|"Vendor Partners"|B
C-->|"Work Situation"|B
C-->|"Customer"|B
C-->|"Profit Centers"|B
B-->|"Guarantee"|C

1
docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on_mermaid-export.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
docs/User Guide/User Guide/Note Types/Mermaid Diagrams_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 B

BIN
docs/User Guide/User Guide/Note Types/Text/Images/1_Image references_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 376 B

BIN
docs/User Guide/User Guide/Note Types/Text/Images/2_Image references_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 B

21
docs/User Guide/User Guide/Note Types/Text/Images/Image references.md Normal file
View File

@ -0,0 +1,21 @@
# Image references
![](Image%20references_image.png)
Image references are an easy way to embed the preview of another note type into a [Text](../../Text.md) note.
## Supported note types
* [Canvas](../../Canvas.md)
* [Mermaid Diagrams](../../Mermaid%20Diagrams.md)
* [Mind Map](../../Mind%20Map.md)
## Steps
1. Go to one of the supported notes (listed above) and look for the ![](1_Image%20references_image.png) button in the [Floating buttons](../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) area.
2. Go to a [Text](../../Text.md) note and use the Paste function to insert the reference to that note.
## Interaction
* Double-clicking an image reference from a text note will automatically open the target note.
* Clicking an image reference while <kbd>Ctrl</kbd> is pressed will open the target note in a new tab.
* Modifying the target note should also update the image reference. If that doesn't happen, consider [Refreshing the application](../../../Troubleshooting/Refreshing%20the%20application.md).

BIN
docs/User Guide/User Guide/Note Types/Text/Images/Image references_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

279
src/public/app/doc_notes/en/User Guide/!!!meta.json generated
View File

@ -1803,6 +1803,86 @@
"dataFileName": "Split View_1_Split View_im.png"
}
]
},
{
"isClone": false,
"noteId": "XpOYSgsLkTJy",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"Vc8PjrjAGuOp",
"XpOYSgsLkTJy"
],
"title": "Floating buttons",
"notePosition": 150,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-rectangle",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "s1aBHPd79XYj",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "grjYqerjn243",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "CoFPLs3dRlXc",
"isInheritable": false,
"position": 60
}
],
"format": "html",
"dataFileName": "Floating buttons.html",
"attachments": [
{
"attachmentId": "drdKIHK5GzfU",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Floating buttons_image.png"
},
{
"attachmentId": "FNh39vXBEZxT",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Floating buttons_image.png"
}
]
}
]
},
@ -4060,6 +4140,98 @@
"position": 10,
"dataFileName": "10_Images_image.png"
}
],
"dirFileName": "Images",
"children": [
{
"isClone": false,
"noteId": "0Ofbk1aSuVRu",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"iPIMuisry3hd",
"mT0HEkOsz6i1",
"0Ofbk1aSuVRu"
],
"title": "Image references",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "s1aBHPd79XYj",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "gBbsAeiuUxI5",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "grjYqerjn243",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 70
}
],
"format": "html",
"dataFileName": "Image references.html",
"attachments": [
{
"attachmentId": "6OgYPJ60Uz76",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Image references_image.png"
},
{
"attachmentId": "72VNSgANtMVT",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Image references_image.png"
},
{
"attachmentId": "kXBghrixmV2J",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Image references_image.png"
}
]
}
]
},
{
@ -4913,6 +5085,20 @@
"value": "bx bx-selection",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "XpOYSgsLkTJy",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "0Ofbk1aSuVRu",
"isInheritable": false,
"position": 40
}
],
"format": "html",
@ -4926,6 +5112,22 @@
"position": 10,
"dataFileName": "Mermaid Diagrams_ELK off.svg"
},
{
"attachmentId": "EN4DhmgiSH6t",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Mermaid Diagrams_image.png"
},
{
"attachmentId": "if9nzuWHt5KP",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Mermaid Diagrams_image.png"
},
{
"attachmentId": "IKxo3tblVDHq",
"title": "ELK on.svg",
@ -4933,63 +5135,60 @@
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "Mermaid Diagrams_ELK on.svg"
},
{
"attachmentId": "TpPwoCFIePXm",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Mermaid Diagrams_image.png"
}
],
"dirFileName": "Mermaid Diagrams",
"children": [
{
"isClone": false,
"noteId": "opAFABmyb3CU",
"noteId": "RH6yLjjWJHof",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"s1aBHPd79XYj",
"opAFABmyb3CU"
"RH6yLjjWJHof"
],
"title": "ELK on",
"notePosition": 10,
"title": "ELK layout",
"notePosition": 30,
"prefix": null,
"isExpanded": false,
"type": "mermaid",
"mime": "text/plain",
"attributes": [],
"dataFileName": "ELK on.txt",
"attachments": [
"type": "text",
"mime": "text/html",
"attributes": [
{
"attachmentId": "biyznKlYQ7my",
"title": "mermaid-export.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "ELK on_mermaid-export.svg"
"type": "label",
"name": "iconClass",
"value": "bx bxs-network-chart",
"isInheritable": false,
"position": 10
}
]
},
{
"isClone": false,
"noteId": "r44dpvA1xFu8",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"s1aBHPd79XYj",
"r44dpvA1xFu8"
],
"title": "ELK off",
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"type": "mermaid",
"mime": "text/plain",
"attributes": [],
"dataFileName": "ELK off.txt",
"format": "html",
"dataFileName": "ELK layout.html",
"attachments": [
{
"attachmentId": "rQI7SXljnpJM",
"title": "mermaid-export.svg",
"attachmentId": "DOY5C5S4vCs7",
"title": "ELK off.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "ELK off_mermaid-export.svg"
"dataFileName": "ELK layout_ELK off.svg"
},
{
"attachmentId": "E1ysxcfkmGBZ",
"title": "ELK on.svg",
"role": "image",
"mime": "image/svg+xml",
"position": 10,
"dataFileName": "ELK layout_ELK on.svg"
}
]
}
@ -5004,7 +5203,7 @@
"grjYqerjn243"
],
"title": "Canvas",
"notePosition": 160,
"notePosition": 170,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -5040,7 +5239,7 @@
"1vHRoWCEjj0L"
],
"title": "Web View",
"notePosition": 170,
"notePosition": 180,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -5067,7 +5266,7 @@
"gBbsAeiuUxI5"
],
"title": "Mind Map",
"notePosition": 180,
"notePosition": 190,
"prefix": null,
"isExpanded": false,
"type": "text",
@ -5094,7 +5293,7 @@
"81SGnPGMk7Xc"
],
"title": "Geo map",
"notePosition": 190,
"notePosition": 200,
"prefix": null,
"isExpanded": false,
"type": "text",

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_Floating buttons_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

41
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.html generated Normal file
View File

@ -0,0 +1,41 @@
<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>Floating buttons</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Floating buttons</h1>
<div class="ck-content">
<figure class="image">
<img style="aspect-ratio:893/144;" src="Floating buttons_image.png" width="893"
height="144">
</figure>
<p>Depending on the current note, a panel will appear near the top-right
of the note, right underneath the&nbsp;<a class="reference-link" href="Ribbon.html">Ribbon</a>.
These buttons offer additional interaction that is specific to that particular
note.</p>
<p>For example:</p>
<ul>
<li>For&nbsp;<a class="reference-link" href="../../Note%20Types/Mermaid%20Diagrams.html">Mermaid Diagrams</a>&nbsp;and&nbsp;
<a
class="reference-link" href="../../Note%20Types/Canvas.html">Canvas</a>, there are buttons to download the SVG representation of the
note, or to copy a reference to the note for pasting it a&nbsp;<a class="reference-link"
href="../../Note%20Types/Text.html">Text</a>&nbsp;note.</li>
<li>For <a href="../Notes/Read-Only%20Notes.html">read-only notes</a>, there
is a button to temporarily edit the note for quick modifications.</li>
</ul>
<h2>Interaction</h2>
<p>The floating button area can be collapsed by pressing the two right arrows
at the end of the section.</p>
</div>
</div>
</body>
</html>

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

98
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html generated
View File

@ -13,47 +13,73 @@
<h1 data-trilium-h1>Mermaid Diagrams</h1>
<div class="ck-content">
<figure class="image image-style-align-center">
<img style="aspect-ratio:886/663;" src="2_Mermaid Diagrams_image.png"
width="886" height="663">
</figure>
<p>Trilium supports Mermaid, which adds support for various diagrams such
as flowchart, sequence diagram, class diagram, state diagram, pie charts,
etc., all using a text description of the chart instead of manually drawing
the diagram.</p>
<p>For the official documentation of Mermaid.js see <a href="https://mermaid.js.org/intro/">mermaid.js.org/intro/</a>.</p>
<h2>ELK layout engine</h2>
<p>Mermaid supports a different layout engine which supports slightly more
complex diagrams, called the <a href="https://eclipse.dev/elk/">Eclipse Layout Kernel (ELK)</a>.
Trilium has support for these as well, but it's not enabled by default.</p>
<p>In order to activate ELK for any diagram, insert the following YAML frontmatter
right at the beginning of the diagram:</p><pre><code class="language-text-x-yaml">---
config:
layout: elk
---</code></pre>
<figure class="table">
<table>
<thead>
<tr>
<th>With ELK off</th>
<th>With ELK on</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:513/442;" src="Mermaid Diagrams_ELK off.svg"
width="513" height="442">
</figure>
<p>&nbsp;</p>
</td>
<td>
<figure class="image">
<img style="aspect-ratio:531/491;" src="Mermaid Diagrams_ELK on.svg" width="531"
height="491">
</figure>
</td>
</tr>
</tbody>
</table>
</figure>
<h2>Layouts</h2>
<p>Depending on the chart being edited and user preference, there are two
layouts supported by the Mermaid note type:</p>
<ul>
<li>Horizontal, where the source code (editable part) is on the left side
of the screen and the preview is to the right.</li>
<li>Vertical, where the source code is at the bottom of the screen and the
preview is at the top.</li>
</ul>
<p>It's possible to switch between the two layouts at any time by pressing
the
<img src="Mermaid Diagrams_image.png" width="16" height="16">icon in the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area.</p>
<h2>Interaction</h2>
<ul>
<li>The source code of the diagram (in Mermaid format) is displayed on the
left or bottom side of the note (depending on the layout).
<ul>
<li>Changing the diagram code will refresh automatically the diagram.</li>
</ul>
</li>
<li>The preview of the diagram is displayed at the right or top side of the
note (depending on the layout):
<ul>
<li>There are dedicated buttons at the bottom-right of the preview to control
the zoom in, zoom out or re-center the diagram:
<img src="1_Mermaid Diagrams_image.png"
width="90" height="18">
</li>
<li>The preview can be moved around by holding the left mouse button and dragging.</li>
<li>Zooming can also be done by using the scroll wheel.</li>
<li>The zoom and position on the preview will remain fixed as the diagram
changes, to be able to work more easily with large diagrams.</li>
</ul>
</li>
<li>In the&nbsp;<a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area:
<ul>
<li>The source/preview can be laid out left-right or bottom-top via the <em>Move editing pane to the left / bottom </em>option.</li>
<li>Press <em>Lock editing</em> to automatically mark the note as read-only.
In this mode, the code pane is hidden and the diagram is displayed full-size.
Similarly, press <em>Unlock editing</em> to mark a read-only note as editable.</li>
<li>Press the <em>Copy image reference to the clipboard</em> to be able to insert
the image representation of the diagram into a text note. See&nbsp;<a class="reference-link"
href="Text/Images/Image%20references.html">Image references</a>&nbsp;for
more information.</li>
<li>Press the <em>Export diagram as SVG</em> to download a scalable/vector rendering
of the diagram. Can be used to present the diagram without degrading when
zooming.</li>
<li>Press the <em>Export diagram as PNG</em> to download a normal image (at
1x scale, raster) of the diagram. Can be used to send the diagram in more
traditional channels such as e-mail.</li>
</ul>
</li>
</ul>
<h2>Errors in the diagram</h2>
<p>If there is an error in the source code, the error will be displayed in
an information pane.</p>
<p>During the state of an error, the diagram will no longer be rendered and
the previously working diagram will remain in the preview section.</p>
</div>
</div>
</body>

55
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout.html generated Normal file
View File

@ -0,0 +1,55 @@
<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>ELK layout</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>ELK layout</h1>
<div class="ck-content">
<p>Mermaid supports a different layout engine which supports slightly more
complex diagrams, called the <a href="https://eclipse.dev/elk/">Eclipse Layout Kernel (ELK)</a>.
Trilium has support for these as well, but it's not enabled by default.</p>
<p>In order to activate ELK for any diagram, insert the following YAML frontmatter
right at the beginning of the diagram:</p><pre><code class="language-text-x-yaml">---
config:
layout: elk
---</code></pre>
<figure class="table">
<table>
<thead>
<tr>
<th>With ELK off</th>
<th>With ELK on</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:513/442;" src="ELK layout_ELK off.svg" width="513"
height="442">
</figure>
<p>&nbsp;</p>
</td>
<td>
<figure class="image">
<img style="aspect-ratio:531/491;" src="ELK layout_ELK on.svg" width="531"
height="491">
</figure>
</td>
</tr>
</tbody>
</table>
</figure>
</div>
</div>
</body>
</html>

1
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK off.svg generated Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK on.svg generated Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

14
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off.txt generated
View File

@ -1,14 +0,0 @@
---
title: Interfaces for B
---
flowchart LR
A-->|"Guarantee"|B
C-->|"User attributes"|B
C-.->|"Master data"|B
C-->|"Exchange Rate"|B
C-->|"Profit Centers"|B
C-->|"Vendor Partners"|B
C-->|"Work Situation"|B
C-->|"Customer"|B
C-->|"Profit Centers"|B
B-->|"Guarantee"|C

1
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off_mermaid-export.svg generated
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

16
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on.txt generated
View File

@ -1,16 +0,0 @@
---
title: Interfaces for B
config:
layout: elk
---
flowchart LR
A-->|"Guarantee"|B
C-->|"User attributes"|B
C-.->|"Master data"|B
C-->|"Exchange Rate"|B
C-->|"Profit Centers"|B
C-->|"Vendor Partners"|B
C-->|"Work Situation"|B
C-->|"Customer"|B
C-->|"Profit Centers"|B
B-->|"Guarantee"|C

1
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on_mermaid-export.svg generated
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/1_Image references_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 376 B

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/2_Image references_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 B

52
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/Image references.html generated Normal file
View File

@ -0,0 +1,52 @@
<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>Image references</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Image references</h1>
<div class="ck-content">
<figure class="image image-style-align-center">
<img style="aspect-ratio:880/553;" src="Image references_image.png" width="880"
height="553">
</figure>
<p>Image references are an easy way to embed the preview of another note
type into a&nbsp;<a class="reference-link" href="../../Text.html">Text</a>&nbsp;note.</p>
<h2>Supported note types</h2>
<ul>
<li><a class="reference-link" href="../../Canvas.html">Canvas</a>
</li>
<li><a class="reference-link" href="../../Mermaid%20Diagrams.html">Mermaid Diagrams</a>
</li>
<li><a class="reference-link" href="../../Mind%20Map.html">Mind Map</a>
</li>
</ul>
<h2>Steps</h2>
<ol>
<li>Go to one of the supported notes (listed above) and look for the
<img src="1_Image references_image.png"
width="18" height="18">button in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a>&nbsp;area.</li>
<li>Go to a&nbsp;<a class="reference-link" href="../../Text.html">Text</a>&nbsp;note
and use the Paste function to insert the reference to that note.</li>
</ol>
<h2>Interaction</h2>
<ul>
<li>Double-clicking an image reference from a text note will automatically
open the target note.</li>
<li>Clicking an image reference while <kbd>Ctrl</kbd> is pressed will open the
target note in a new tab.</li>
<li>Modifying the target note should also update the image reference. If that
doesn't happen, consider&nbsp;<a class="reference-link" href="../../../Troubleshooting/Refreshing%20the%20application.html">Refreshing the application</a>.</li>
</ul>
</div>
</div>
</body>
</html>

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/Image references_image.png generated Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

13
src/public/app/doc_notes/en/User Guide/navigation.html generated
View File

@ -109,6 +109,9 @@
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Split%20View.html"
target="detail">Split View</a>
</li>
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html"
target="detail">Floating buttons</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/Notes.html" target="detail">Notes</a>
@ -219,6 +222,11 @@
<li><a href="User%20Guide/Note%20Types/Text/Formatting%20toolbar.html" target="detail">Formatting toolbar</a>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Images.html" target="detail">Images</a>
<ul>
<li><a href="User%20Guide/Note%20Types/Text/Images/Image%20references.html"
target="detail">Image references</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Note%20Types/Text/Links.html" target="detail">Links</a>
</li>
@ -254,9 +262,8 @@
</li>
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams.html" target="detail">Mermaid Diagrams</a>
<ul>
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams/ELK%20on.txt" target="detail">ELK on</a>
</li>
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams/ELK%20off.txt" target="detail">ELK off</a>
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams/ELK%20layout.html"
target="detail">ELK layout</a>
</li>
</ul>
</li>