mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-08-13 04:13:19 +08:00
feat(docs): improve documentation on Mermaid
This commit is contained in:
Elian Doran
parent
2a8ab728a7
commit
be3e213ba3
@ -1803,6 +1803,86 @@
|
|||||||
"dataFileName": "Split View_1_Split View_im.png"
|
"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,
|
"position": 10,
|
||||||
"dataFileName": "10_Images_image.png"
|
"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",
|
"value": "bx bx-selection",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 20
|
"position": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "relation",
|
||||||
|
"name": "internalLink",
|
||||||
|
"value": "XpOYSgsLkTJy",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 30
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "relation",
|
||||||
|
"name": "internalLink",
|
||||||
|
"value": "0Ofbk1aSuVRu",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 40
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"format": "markdown",
|
"format": "markdown",
|
||||||
@ -4926,6 +5112,22 @@
|
|||||||
"position": 10,
|
"position": 10,
|
||||||
"dataFileName": "Mermaid Diagrams_ELK off.svg"
|
"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",
|
"attachmentId": "IKxo3tblVDHq",
|
||||||
"title": "ELK on.svg",
|
"title": "ELK on.svg",
|
||||||
@ -4933,63 +5135,60 @@
|
|||||||
"mime": "image/svg+xml",
|
"mime": "image/svg+xml",
|
||||||
"position": 10,
|
"position": 10,
|
||||||
"dataFileName": "Mermaid Diagrams_ELK on.svg"
|
"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",
|
"dirFileName": "Mermaid Diagrams",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"isClone": false,
|
"isClone": false,
|
||||||
"noteId": "opAFABmyb3CU",
|
"noteId": "RH6yLjjWJHof",
|
||||||
"notePath": [
|
"notePath": [
|
||||||
"pOsGYCXsbNQG",
|
"pOsGYCXsbNQG",
|
||||||
"KSZ04uQ2D1St",
|
"KSZ04uQ2D1St",
|
||||||
"s1aBHPd79XYj",
|
"s1aBHPd79XYj",
|
||||||
"opAFABmyb3CU"
|
"RH6yLjjWJHof"
|
||||||
],
|
],
|
||||||
"title": "ELK on",
|
"title": "ELK layout",
|
||||||
"notePosition": 10,
|
"notePosition": 30,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "mermaid",
|
"type": "text",
|
||||||
"mime": "text/plain",
|
"mime": "text/html",
|
||||||
"attributes": [],
|
"attributes": [
|
||||||
"dataFileName": "ELK on.txt",
|
|
||||||
"attachments": [
|
|
||||||
{
|
{
|
||||||
"attachmentId": "biyznKlYQ7my",
|
"type": "label",
|
||||||
"title": "mermaid-export.svg",
|
"name": "iconClass",
|
||||||
"role": "image",
|
"value": "bx bxs-network-chart",
|
||||||
"mime": "image/svg+xml",
|
"isInheritable": false,
|
||||||
"position": 10,
|
"position": 10
|
||||||
"dataFileName": "ELK on_mermaid-export.svg"
|
|
||||||
}
|
}
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"isClone": false,
|
|
||||||
"noteId": "r44dpvA1xFu8",
|
|
||||||
"notePath": [
|
|
||||||
"pOsGYCXsbNQG",
|
|
||||||
"KSZ04uQ2D1St",
|
|
||||||
"s1aBHPd79XYj",
|
|
||||||
"r44dpvA1xFu8"
|
|
||||||
],
|
],
|
||||||
"title": "ELK off",
|
"format": "markdown",
|
||||||
"notePosition": 20,
|
"dataFileName": "ELK layout.md",
|
||||||
"prefix": null,
|
|
||||||
"isExpanded": false,
|
|
||||||
"type": "mermaid",
|
|
||||||
"mime": "text/plain",
|
|
||||||
"attributes": [],
|
|
||||||
"dataFileName": "ELK off.txt",
|
|
||||||
"attachments": [
|
"attachments": [
|
||||||
{
|
{
|
||||||
"attachmentId": "rQI7SXljnpJM",
|
"attachmentId": "DOY5C5S4vCs7",
|
||||||
"title": "mermaid-export.svg",
|
"title": "ELK off.svg",
|
||||||
"role": "image",
|
"role": "image",
|
||||||
"mime": "image/svg+xml",
|
"mime": "image/svg+xml",
|
||||||
"position": 10,
|
"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"
|
"grjYqerjn243"
|
||||||
],
|
],
|
||||||
"title": "Canvas",
|
"title": "Canvas",
|
||||||
"notePosition": 160,
|
"notePosition": 170,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "text",
|
"type": "text",
|
||||||
@ -5040,7 +5239,7 @@
|
|||||||
"1vHRoWCEjj0L"
|
"1vHRoWCEjj0L"
|
||||||
],
|
],
|
||||||
"title": "Web View",
|
"title": "Web View",
|
||||||
"notePosition": 170,
|
"notePosition": 180,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "text",
|
"type": "text",
|
||||||
@ -5067,7 +5266,7 @@
|
|||||||
"gBbsAeiuUxI5"
|
"gBbsAeiuUxI5"
|
||||||
],
|
],
|
||||||
"title": "Mind Map",
|
"title": "Mind Map",
|
||||||
"notePosition": 180,
|
"notePosition": 190,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "text",
|
"type": "text",
|
||||||
@ -5094,7 +5293,7 @@
|
|||||||
"81SGnPGMk7Xc"
|
"81SGnPGMk7Xc"
|
||||||
],
|
],
|
||||||
"title": "Geo map",
|
"title": "Geo map",
|
||||||
"notePosition": 190,
|
"notePosition": 200,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "text",
|
"type": "text",
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,13 @@
|
|||||||
|
# Floating buttons
|
||||||
|
|
||||||
|
|
||||||
|
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.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -1,21 +1,37 @@
|
|||||||
# Mermaid Diagrams
|
# Mermaid Diagrams
|
||||||
|
|
||||||
|
|
||||||
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.
|
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/).
|
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
|
It's possible to switch between the two layouts at any time by pressing the  icon in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) area.
|
||||||
---
|
|
||||||
config:
|
|
||||||
layout: elk
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
| With ELK off | With ELK on |
|
## 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: 
|
||||||
|
* 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.
|
||||||
@ -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 |
|
||||||
|
| --- | --- |
|
||||||
|
|  |  |
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
@ -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
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 15 KiB |
@ -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
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 19 KiB |
BIN
docs/User Guide/User Guide/Note Types/Mermaid Diagrams_image.png
Normal file
BIN
docs/User Guide/User Guide/Note Types/Mermaid Diagrams_image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 B |
Binary file not shown.
|
After Width: | Height: | Size: 376 B |
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
@ -0,0 +1,21 @@
|
|||||||
|
# Image references
|
||||||
|
|
||||||
|
|
||||||
|
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  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).
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
279
src/public/app/doc_notes/en/User Guide/!!!meta.json
generated
279
src/public/app/doc_notes/en/User Guide/!!!meta.json
generated
@ -1803,6 +1803,86 @@
|
|||||||
"dataFileName": "Split View_1_Split View_im.png"
|
"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,
|
"position": 10,
|
||||||
"dataFileName": "10_Images_image.png"
|
"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",
|
"value": "bx bx-selection",
|
||||||
"isInheritable": false,
|
"isInheritable": false,
|
||||||
"position": 20
|
"position": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "relation",
|
||||||
|
"name": "internalLink",
|
||||||
|
"value": "XpOYSgsLkTJy",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 30
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "relation",
|
||||||
|
"name": "internalLink",
|
||||||
|
"value": "0Ofbk1aSuVRu",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 40
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"format": "html",
|
"format": "html",
|
||||||
@ -4926,6 +5112,22 @@
|
|||||||
"position": 10,
|
"position": 10,
|
||||||
"dataFileName": "Mermaid Diagrams_ELK off.svg"
|
"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",
|
"attachmentId": "IKxo3tblVDHq",
|
||||||
"title": "ELK on.svg",
|
"title": "ELK on.svg",
|
||||||
@ -4933,63 +5135,60 @@
|
|||||||
"mime": "image/svg+xml",
|
"mime": "image/svg+xml",
|
||||||
"position": 10,
|
"position": 10,
|
||||||
"dataFileName": "Mermaid Diagrams_ELK on.svg"
|
"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",
|
"dirFileName": "Mermaid Diagrams",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"isClone": false,
|
"isClone": false,
|
||||||
"noteId": "opAFABmyb3CU",
|
"noteId": "RH6yLjjWJHof",
|
||||||
"notePath": [
|
"notePath": [
|
||||||
"pOsGYCXsbNQG",
|
"pOsGYCXsbNQG",
|
||||||
"KSZ04uQ2D1St",
|
"KSZ04uQ2D1St",
|
||||||
"s1aBHPd79XYj",
|
"s1aBHPd79XYj",
|
||||||
"opAFABmyb3CU"
|
"RH6yLjjWJHof"
|
||||||
],
|
],
|
||||||
"title": "ELK on",
|
"title": "ELK layout",
|
||||||
"notePosition": 10,
|
"notePosition": 30,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "mermaid",
|
"type": "text",
|
||||||
"mime": "text/plain",
|
"mime": "text/html",
|
||||||
"attributes": [],
|
"attributes": [
|
||||||
"dataFileName": "ELK on.txt",
|
|
||||||
"attachments": [
|
|
||||||
{
|
{
|
||||||
"attachmentId": "biyznKlYQ7my",
|
"type": "label",
|
||||||
"title": "mermaid-export.svg",
|
"name": "iconClass",
|
||||||
"role": "image",
|
"value": "bx bxs-network-chart",
|
||||||
"mime": "image/svg+xml",
|
"isInheritable": false,
|
||||||
"position": 10,
|
"position": 10
|
||||||
"dataFileName": "ELK on_mermaid-export.svg"
|
|
||||||
}
|
}
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"isClone": false,
|
|
||||||
"noteId": "r44dpvA1xFu8",
|
|
||||||
"notePath": [
|
|
||||||
"pOsGYCXsbNQG",
|
|
||||||
"KSZ04uQ2D1St",
|
|
||||||
"s1aBHPd79XYj",
|
|
||||||
"r44dpvA1xFu8"
|
|
||||||
],
|
],
|
||||||
"title": "ELK off",
|
"format": "html",
|
||||||
"notePosition": 20,
|
"dataFileName": "ELK layout.html",
|
||||||
"prefix": null,
|
|
||||||
"isExpanded": false,
|
|
||||||
"type": "mermaid",
|
|
||||||
"mime": "text/plain",
|
|
||||||
"attributes": [],
|
|
||||||
"dataFileName": "ELK off.txt",
|
|
||||||
"attachments": [
|
"attachments": [
|
||||||
{
|
{
|
||||||
"attachmentId": "rQI7SXljnpJM",
|
"attachmentId": "DOY5C5S4vCs7",
|
||||||
"title": "mermaid-export.svg",
|
"title": "ELK off.svg",
|
||||||
"role": "image",
|
"role": "image",
|
||||||
"mime": "image/svg+xml",
|
"mime": "image/svg+xml",
|
||||||
"position": 10,
|
"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"
|
"grjYqerjn243"
|
||||||
],
|
],
|
||||||
"title": "Canvas",
|
"title": "Canvas",
|
||||||
"notePosition": 160,
|
"notePosition": 170,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "text",
|
"type": "text",
|
||||||
@ -5040,7 +5239,7 @@
|
|||||||
"1vHRoWCEjj0L"
|
"1vHRoWCEjj0L"
|
||||||
],
|
],
|
||||||
"title": "Web View",
|
"title": "Web View",
|
||||||
"notePosition": 170,
|
"notePosition": 180,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "text",
|
"type": "text",
|
||||||
@ -5067,7 +5266,7 @@
|
|||||||
"gBbsAeiuUxI5"
|
"gBbsAeiuUxI5"
|
||||||
],
|
],
|
||||||
"title": "Mind Map",
|
"title": "Mind Map",
|
||||||
"notePosition": 180,
|
"notePosition": 190,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "text",
|
"type": "text",
|
||||||
@ -5094,7 +5293,7 @@
|
|||||||
"81SGnPGMk7Xc"
|
"81SGnPGMk7Xc"
|
||||||
],
|
],
|
||||||
"title": "Geo map",
|
"title": "Geo map",
|
||||||
"notePosition": 190,
|
"notePosition": 200,
|
||||||
"prefix": null,
|
"prefix": null,
|
||||||
"isExpanded": false,
|
"isExpanded": false,
|
||||||
"type": "text",
|
"type": "text",
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -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 <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 <a class="reference-link" href="../../Note%20Types/Mermaid%20Diagrams.html">Mermaid Diagrams</a> and
|
||||||
|
<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 <a class="reference-link"
|
||||||
|
href="../../Note%20Types/Text.html">Text</a> 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>
|
||||||
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png
generated
Normal file
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png
generated
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -13,47 +13,73 @@
|
|||||||
<h1 data-trilium-h1>Mermaid Diagrams</h1>
|
<h1 data-trilium-h1>Mermaid Diagrams</h1>
|
||||||
|
|
||||||
<div class="ck-content">
|
<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
|
<p>Trilium supports Mermaid, which adds support for various diagrams such
|
||||||
as flowchart, sequence diagram, class diagram, state diagram, pie charts,
|
as flowchart, sequence diagram, class diagram, state diagram, pie charts,
|
||||||
etc., all using a text description of the chart instead of manually drawing
|
etc., all using a text description of the chart instead of manually drawing
|
||||||
the diagram.</p>
|
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>
|
<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>
|
<h2>Layouts</h2>
|
||||||
<p>Mermaid supports a different layout engine which supports slightly more
|
<p>Depending on the chart being edited and user preference, there are two
|
||||||
complex diagrams, called the <a href="https://eclipse.dev/elk/">Eclipse Layout Kernel (ELK)</a>.
|
layouts supported by the Mermaid note type:</p>
|
||||||
Trilium has support for these as well, but it's not enabled by default.</p>
|
<ul>
|
||||||
<p>In order to activate ELK for any diagram, insert the following YAML frontmatter
|
<li>Horizontal, where the source code (editable part) is on the left side
|
||||||
right at the beginning of the diagram:</p><pre><code class="language-text-x-yaml">---
|
of the screen and the preview is to the right.</li>
|
||||||
config:
|
<li>Vertical, where the source code is at the bottom of the screen and the
|
||||||
layout: elk
|
preview is at the top.</li>
|
||||||
---</code></pre>
|
</ul>
|
||||||
<figure class="table">
|
<p>It's possible to switch between the two layouts at any time by pressing
|
||||||
<table>
|
the
|
||||||
<thead>
|
<img src="Mermaid Diagrams_image.png" width="16" height="16">icon in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area.</p>
|
||||||
<tr>
|
<h2>Interaction</h2>
|
||||||
<th>With ELK off</th>
|
<ul>
|
||||||
<th>With ELK on</th>
|
<li>The source code of the diagram (in Mermaid format) is displayed on the
|
||||||
</tr>
|
left or bottom side of the note (depending on the layout).
|
||||||
</thead>
|
<ul>
|
||||||
<tbody>
|
<li>Changing the diagram code will refresh automatically the diagram.</li>
|
||||||
<tr>
|
</ul>
|
||||||
<td>
|
</li>
|
||||||
<figure class="image">
|
<li>The preview of the diagram is displayed at the right or top side of the
|
||||||
<img style="aspect-ratio:513/442;" src="Mermaid Diagrams_ELK off.svg"
|
note (depending on the layout):
|
||||||
width="513" height="442">
|
<ul>
|
||||||
</figure>
|
<li>There are dedicated buttons at the bottom-right of the preview to control
|
||||||
<p> </p>
|
the zoom in, zoom out or re-center the diagram:
|
||||||
</td>
|
<img src="1_Mermaid Diagrams_image.png"
|
||||||
<td>
|
width="90" height="18">
|
||||||
<figure class="image">
|
</li>
|
||||||
<img style="aspect-ratio:531/491;" src="Mermaid Diagrams_ELK on.svg" width="531"
|
<li>The preview can be moved around by holding the left mouse button and dragging.</li>
|
||||||
height="491">
|
<li>Zooming can also be done by using the scroll wheel.</li>
|
||||||
</figure>
|
<li>The zoom and position on the preview will remain fixed as the diagram
|
||||||
</td>
|
changes, to be able to work more easily with large diagrams.</li>
|
||||||
</tr>
|
</ul>
|
||||||
</tbody>
|
</li>
|
||||||
</table>
|
<li>In the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area:
|
||||||
</figure>
|
<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 <a class="reference-link"
|
||||||
|
href="Text/Images/Image%20references.html">Image references</a> 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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
55
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout.html
generated
Normal file
55
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout.html
generated
Normal 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> </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>
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
@ -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
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 15 KiB |
@ -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
|
|
||||||
File diff suppressed because one or more lines are too long
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams_image.png
generated
Normal file
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/1_Image references_image.png
generated
Normal file
Binary file not shown.
|
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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/2_Image references_image.png
generated
Normal file
Binary file not shown.
|
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
52
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/Image references.html
generated
Normal 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 <a class="reference-link" href="../../Text.html">Text</a> 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 <a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html">Floating buttons</a> area.</li>
|
||||||
|
<li>Go to a <a class="reference-link" href="../../Text.html">Text</a> 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 <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
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text/Images/Image references_image.png
generated
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -109,6 +109,9 @@
|
|||||||
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Split%20View.html"
|
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Split%20View.html"
|
||||||
target="detail">Split View</a>
|
target="detail">Split View</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.html"
|
||||||
|
target="detail">Floating buttons</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="User%20Guide/Basic%20Concepts%20and%20Features/Notes.html" target="detail">Notes</a>
|
<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><a href="User%20Guide/Note%20Types/Text/Formatting%20toolbar.html" target="detail">Formatting toolbar</a>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="User%20Guide/Note%20Types/Text/Images.html" target="detail">Images</a>
|
<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>
|
||||||
<li><a href="User%20Guide/Note%20Types/Text/Links.html" target="detail">Links</a>
|
<li><a href="User%20Guide/Note%20Types/Text/Links.html" target="detail">Links</a>
|
||||||
</li>
|
</li>
|
||||||
@ -254,9 +262,8 @@
|
|||||||
</li>
|
</li>
|
||||||
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams.html" target="detail">Mermaid Diagrams</a>
|
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams.html" target="detail">Mermaid Diagrams</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams/ELK%20on.txt" target="detail">ELK on</a>
|
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams/ELK%20layout.html"
|
||||||
</li>
|
target="detail">ELK layout</a>
|
||||||
<li><a href="User%20Guide/Note%20Types/Mermaid%20Diagrams/ELK%20off.txt" target="detail">ELK off</a>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user