feat(docs): improve documentation on Mermaid
Elian Doran
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 28 KiB |
@ -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 |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
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
|
||||
|
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
|
||||
|
Before Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 242 B |
|
After Width: | Height: | Size: 376 B |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 23 KiB |
|
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>
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 28 KiB |
@ -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>
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
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
|
||||
|
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
|
||||
|
Before Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 242 B |
|
After Width: | Height: | Size: 376 B |
|
After Width: | Height: | Size: 474 B |
@ -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>
|
||||
|
After Width: | Height: | Size: 23 KiB |