feat(docs): improve documentation on Mermaid

docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Floating buttons.md

@@ -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.

docs/User Guide/User Guide/Note Types/Mermaid Diagrams.md

@@ -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.

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 |
+| --- | --- |
+| ![](ELK%20layout_ELK%20off.svg) | ![](ELK%20layout_ELK%20on.svg) |

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

@@ -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

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

@@ -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

docs/User Guide/User Guide/Note Types/Text/Images/Image references.md

@@ -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).