diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json
index a8deff793..5edc83ad0 100644
--- a/docs/User Guide/!!!meta.json
+++ b/docs/User Guide/!!!meta.json
@@ -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",
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_Floating buttons_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_Floating buttons_image.png
new file mode 100644
index 000000000..4c21da3c8
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_Floating buttons_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.md b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.md
new file mode 100644
index 000000000..ea72b3461
--- /dev/null
+++ b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.md
@@ -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.
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons_image.png
new file mode 100644
index 000000000..af171ed81
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons_image.png differ
diff --git a/docs/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png b/docs/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png
new file mode 100644
index 000000000..351a09108
Binary files /dev/null and b/docs/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png differ
diff --git a/docs/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png b/docs/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png
new file mode 100644
index 000000000..c029e5d5a
Binary files /dev/null and b/docs/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png differ
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams.md b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams.md
index 7bb6784fd..efa2d7c9d 100644
--- a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams.md
+++ b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams.md
@@ -1,21 +1,37 @@
# 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.
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  icon in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) area.
-| With ELK off | With ELK on |
-| --- | --- |
-|  |  |
\ No newline at end of file
+## 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.
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout.md b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout.md
new file mode 100644
index 000000000..807cef8ab
--- /dev/null
+++ b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout.md
@@ -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 |
+| --- | --- |
+|  |  |
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK off.svg b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK off.svg
new file mode 100644
index 000000000..a6a8a0125
--- /dev/null
+++ b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK off.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK on.svg b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK on.svg
new file mode 100644
index 000000000..1a400331d
--- /dev/null
+++ b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK layout_ELK on.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off.txt b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off.txt
deleted file mode 100644
index 353f1ded4..000000000
--- a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off.txt
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off_mermaid-export.svg b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off_mermaid-export.svg
deleted file mode 100644
index 254078d88..000000000
--- a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK off_mermaid-export.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on.txt b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on.txt
deleted file mode 100644
index 4298215d0..000000000
--- a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on.txt
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on_mermaid-export.svg b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on_mermaid-export.svg
deleted file mode 100644
index 6fb0d2a0b..000000000
--- a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams/ELK on_mermaid-export.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams_image.png b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams_image.png
new file mode 100644
index 000000000..d96ae3c51
Binary files /dev/null and b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams_image.png differ
diff --git a/docs/User Guide/User Guide/Note Types/Text/Images/1_Image references_image.png b/docs/User Guide/User Guide/Note Types/Text/Images/1_Image references_image.png
new file mode 100644
index 000000000..8b18e07c7
Binary files /dev/null and b/docs/User Guide/User Guide/Note Types/Text/Images/1_Image references_image.png differ
diff --git a/docs/User Guide/User Guide/Note Types/Text/Images/2_Image references_image.png b/docs/User Guide/User Guide/Note Types/Text/Images/2_Image references_image.png
new file mode 100644
index 000000000..8071bec6e
Binary files /dev/null and b/docs/User Guide/User Guide/Note Types/Text/Images/2_Image references_image.png differ
diff --git a/docs/User Guide/User Guide/Note Types/Text/Images/Image references.md b/docs/User Guide/User Guide/Note Types/Text/Images/Image references.md
new file mode 100644
index 000000000..4174915b2
--- /dev/null
+++ b/docs/User Guide/User Guide/Note Types/Text/Images/Image references.md
@@ -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 Ctrl 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).
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Note Types/Text/Images/Image references_image.png b/docs/User Guide/User Guide/Note Types/Text/Images/Image references_image.png
new file mode 100644
index 000000000..4dd81d3df
Binary files /dev/null and b/docs/User Guide/User Guide/Note Types/Text/Images/Image references_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/!!!meta.json b/src/public/app/doc_notes/en/User Guide/!!!meta.json
index 59d4d561b..b25710e3b 100644
--- a/src/public/app/doc_notes/en/User Guide/!!!meta.json
+++ b/src/public/app/doc_notes/en/User Guide/!!!meta.json
@@ -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",
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_Floating buttons_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_Floating buttons_image.png
new file mode 100644
index 000000000..4c21da3c8
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_Floating buttons_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.html b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.html
new file mode 100644
index 000000000..7ff7e4e71
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+ Floating buttons
+
+
+
+
+
Floating buttons
+
+
+
+
+
+
Depending on the current note, a panel will appear near the top-right
+ of the note, right underneath the Ribbon.
+ These buttons offer additional interaction that is specific to that particular
+ note.
+
For example:
+
+
For Mermaid Diagrams and
+ Canvas, 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.
+
For read-only notes, 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.
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons_image.png
new file mode 100644
index 000000000..af171ed81
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png
new file mode 100644
index 000000000..351a09108
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/1_Mermaid Diagrams_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png
new file mode 100644
index 000000000..c029e5d5a
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/2_Mermaid Diagrams_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html b/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html
index 1edb6e8b2..95b8d98fa 100644
--- a/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html
@@ -13,47 +13,73 @@
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.
Mermaid supports a different layout engine which supports slightly more
- complex diagrams, called the Eclipse Layout Kernel (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:
---
-config:
- layout: elk
----
-
-
-
-
-
With ELK off
-
With ELK on
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Layouts
+
Depending on the chart being edited and user preference, there are two
+ layouts supported by the Mermaid note type:
+
+
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.
+
+
It's possible to switch between the two layouts at any time by pressing
+ the
+ icon in the Floating buttons area.
+
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.
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 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.
Mermaid supports a different layout engine which supports slightly more
+ complex diagrams, called the Eclipse Layout Kernel (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:
+ 
+ 
- 
- 
icon in the 
+ 
+ 
+