Merge branch 'feature/mermaid_diagram_switcher' into renovate/mermaid-11.x

apps/client/src/services/note_create.ts

@@ -67,14 +67,6 @@ async function createNote(parentNotePath: string | undefined, options: CreateNot
 
     const parentNoteId = treeService.getNoteIdFromUrl(parentNotePath);
 
-    if (options.type === "mermaid" && !options.content && !options.templateNoteId) {
-        options.content = `graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;`;
-    }
-
     const { note, branch } = await server.post<Response>(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId || ""}`, {
         title: options.title,
         content: options.content || "",

apps/client/src/translations/en/translation.json

@@ -2202,5 +2202,31 @@
   },
   "setup_form": {
     "more_info": "Learn more"
+  },
+  "mermaid": {
+    "placeholder": "Type the content of your Mermaid diagram or use one of the sample diagrams below.",
+    "sample_diagrams": "Sample diagrams:",
+    "sample_flowchart": "Flowchart",
+    "sample_class": "Class",
+    "sample_sequence": "Sequence",
+    "sample_entity_relationship": "Entity Relationship",
+    "sample_state": "State",
+    "sample_mindmap": "Mindmap",
+    "sample_architecture": "Architecture",
+    "sample_block": "Block",
+    "sample_c4": "C4",
+    "sample_gantt": "Gantt",
+    "sample_git": "Git",
+    "sample_kanban": "Kanban",
+    "sample_packet": "Packet",
+    "sample_pie": "Pie",
+    "sample_quadrant": "Quadrant",
+    "sample_radar": "Radar",
+    "sample_requirement": "Requirement",
+    "sample_sankey": "Sankey",
+    "sample_timeline": "Timeline",
+    "sample_treemap": "Treemap",
+    "sample_user_journey": "User Journey",
+    "sample_xy": "XY"
   }
 }

apps/client/src/widgets/layout/NoteContentSwitcher.css

@@ -0,0 +1,19 @@
+.note-content-switcher {
+    --badge-radius: 12px;
+    position: relative;
+    display: flex;
+    min-height: 35px;
+    gap: 5px;
+    padding: 5px;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    font-size: 0.9rem;
+    align-items: center;
+
+    .ext-badge {
+        --color: var(--input-background-color);
+        color: var(--main-text-color);
+        font-size: 1em;
+        flex-shrink: 0;
+    }
+}

apps/client/src/widgets/layout/NoteContentSwitcher.tsx

@@ -0,0 +1,39 @@
+import "./NoteContentSwitcher.css";
+
+import FNote from "../../entities/fnote";
+import server from "../../services/server";
+import { Badge } from "../react/Badge";
+import { useNoteSavedData } from "../react/hooks";
+
+export interface NoteContentTemplate {
+    name: string;
+    content: string;
+}
+
+interface NoteContentSwitcherProps {
+    text: string;
+    note: FNote;
+    templates: NoteContentTemplate[];
+}
+
+export default function NoteContentSwitcher({ text, note, templates }: NoteContentSwitcherProps) {
+    const blob = useNoteSavedData(note?.noteId);
+
+    return (blob?.trim().length === 0 &&
+        <div className="note-content-switcher">
+            {text}{" "}
+
+            {templates.map(sample => (
+                <Badge
+                    key={sample.name}
+                    text={sample.name}
+                    onClick={async () => {
+                        await server.put(`notes/${note.noteId}/data`, {
+                            content: sample.content
+                        });
+                    }}
+                />
+            ))}
+        </div>
+    );
+}

apps/client/src/widgets/note_types.tsx

@@ -84,7 +84,7 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
         printable: true
     },
     mermaid: {
-        view: () => import("./type_widgets/Mermaid"),
+        view: () => import("./type_widgets/mermaid/Mermaid"),
         className: "note-detail-mermaid",
         printable: true,
         isFullHeight: true

apps/client/src/widgets/type_widgets/code/Code.tsx

@@ -30,6 +30,7 @@ export interface EditableCodeProps extends TypeWidgetProps, Omit<CodeEditorProps
     onContentChanged?: (content: string) => void;
     /** Invoked after the content of the note has been uploaded to the server, using a spaced update. */
     dataSaved?: () => void;
+    placeholder?: string;
 }
 
 export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWidgetProps) {
@@ -74,7 +75,7 @@ function formatViewSource(note: FNote, content: string) {
     return content;
 }
 
-export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, ...editorProps }: EditableCodeProps) {
+export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, placeholder, ...editorProps }: EditableCodeProps) {
     const editorRef = useRef<VanillaCodeMirror>(null);
     const containerRef = useRef<HTMLPreElement>(null);
     const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
@@ -115,7 +116,7 @@ export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentC
                 editorRef={editorRef} containerRef={containerRef}
                 mime={mime ?? "text/plain"}
                 className="note-detail-code-editor"
-                placeholder={t("editable_code.placeholder")}
+                placeholder={placeholder ?? t("editable_code.placeholder")}
                 vimKeybindings={vimKeymapEnabled}
                 tabIndex={300}
                 onContentChanged={() => {

apps/client/src/widgets/type_widgets/helpers/SplitEditor.css

@@ -27,12 +27,18 @@
     margin: 0 !important;
 }
 
+body.desktop .note-detail-split .note-detail-code-editor {
+    border-radius: 6px;
+    margin-top: 1px;
+}
+
 .note-detail-split .note-detail-error-container {
     font-family: var(--monospace-font-family);
     margin: 5px;
     white-space: pre-wrap;
     font-size: 0.85em;
     overflow: auto;
+    user-select: text;
 }
 
 .note-detail-split .note-detail-split-preview {

apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx

@@ -19,6 +19,7 @@ export interface SplitEditorProps extends EditableCodeProps {
     previewButtons?: ComponentChildren;
     editorBefore?: ComponentChildren;
     forceOrientation?: "horizontal" | "vertical";
+    extraContent?: ComponentChildren;
 }
 
 /**
@@ -41,7 +42,7 @@ export default function SplitEditor(props: SplitEditorProps) {
 
 }
 
-function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, ...editorProps }: SplitEditorProps) {
+function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, extraContent, ...editorProps }: SplitEditorProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const splitEditorOrientation = useSplitOrientation(forceOrientation);
 
@@ -57,9 +58,12 @@ function EditorWithSplit({ note, error, splitOptions, previewContent, previewBut
                     {...editorProps}
                 />
             </div>
-            {error && <Admonition type="caution" className="note-detail-error-container">
-                {error}
-            </Admonition>}
+            {error && (
+                <Admonition type="caution" className="note-detail-error-container">
+                    {error}
+                </Admonition>
+            )}
+            {extraContent}
         </div>
     );
 

apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx

@@ -117,6 +117,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
             error={error}
             onContentChanged={onContentChanged}
             dataSaved={onSave}
+            placeholder={t("mermaid.placeholder")}
             previewContent={(
                 <RawHtmlBlock
                     className="render-container"
@@ -151,6 +152,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
 function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg: string | undefined) {
     const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>();
     const lastNoteId = useRef<string>();
+    const wasEmpty = useRef<boolean>(false);
     const zoomRef = useRef<SvgPanZoom.Instance>();
     const width = useElementSize(containerRef);
 
@@ -158,9 +160,14 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
     useEffect(() => {
         if (zoomRef.current || width?.width === 0) return;
 
-        const shouldPreservePanZoom = (lastNoteId.current === noteId);
+        const shouldPreservePanZoom = (lastNoteId.current === noteId) && !wasEmpty.current;
         const svgEl = containerRef.current?.querySelector("svg");
-        if (!svgEl) return;
+        if (!svgEl) {
+            if (svg?.trim().length === 0) {
+                wasEmpty.current = true;
+            }
+            return;
+        };
 
         const zoomInstance = svgPanZoom(svgEl, {
             zoomEnabled: true,
@@ -186,7 +193,7 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
             zoomRef.current = undefined;
             zoomInstance.destroy();
         };
-    }, [ svg, width ]);
+    }, [ containerRef, noteId, svg, width ]);
 
     // React to container changes.
     useEffect(() => {

apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx

@@ -1,7 +1,11 @@
 import { useCallback } from "preact/hooks";
-import SvgSplitEditor from "./helpers/SvgSplitEditor";
-import { TypeWidgetProps } from "./type_widget";
-import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid";
+
+import { t } from "../../../services/i18n";
+import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../../services/mermaid";
+import NoteContentSwitcher from "../../layout/NoteContentSwitcher";
+import SvgSplitEditor from "../helpers/SvgSplitEditor";
+import { TypeWidgetProps } from "../type_widget";
+import SAMPLE_DIAGRAMS from "./sample_diagrams";
 
 let idCounter = 1;
 let registeredErrorReporter = false;
@@ -15,6 +19,10 @@ export default function Mermaid(props: TypeWidgetProps) {
             registeredErrorReporter = true;
         }
 
+        if (!content.trim()) {
+            return "";
+        }
+
         mermaid.initialize({
             startOnLoad: false,
             ...(getMermaidConfig() as any),
@@ -30,6 +38,12 @@ export default function Mermaid(props: TypeWidgetProps) {
             attachmentName="mermaid-export"
             renderSvg={renderSvg}
             noteType="mermaid"
+            extraContent={(
+                <NoteContentSwitcher
+                    text={t("mermaid.sample_diagrams")}
+                    note={props.note}
+                    templates={SAMPLE_DIAGRAMS} />
+            )}
             {...props}
         />
     );

apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts

@@ -0,0 +1,470 @@
+import { t } from "../../../services/i18n";
+import type { NoteContentTemplate } from "../../layout/NoteContentSwitcher";
+
+const SAMPLE_DIAGRAMS: NoteContentTemplate[] = [
+    {
+        name: t("mermaid.sample_flowchart"),
+        content: `\
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+`
+    },
+    {
+        name: t("mermaid.sample_class"),
+        content: `\
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }
+`
+    },
+    {
+        name: t("mermaid.sample_sequence"),
+        content: `\
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+`
+    },
+    {
+        name: t("mermaid.sample_entity_relationship"),
+        content: `\
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ ORDER_ITEM : contains
+    PRODUCT ||--o{ ORDER_ITEM : includes
+    CUSTOMER {
+        string id
+        string name
+        string email
+    }
+    ORDER {
+        string id
+        date orderDate
+        string status
+    }
+    PRODUCT {
+        string id
+        string name
+        float price
+    }
+    ORDER_ITEM {
+        int quantity
+        float price
+    }
+`
+    },
+    {
+        name: t("mermaid.sample_state"),
+        content: `\
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+`
+    },
+    {
+        name: t("mermaid.sample_mindmap"),
+        content: `\
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+`
+    },
+    {
+        name: t("mermaid.sample_architecture"),
+        content: `\
+architecture-beta
+    group api(cloud)[API]
+
+    service db(database)[Database] in api
+    service disk1(disk)[Storage] in api
+    service disk2(disk)[Storage] in api
+    service server(server)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+`
+    },
+    {
+        name: t("mermaid.sample_block"),
+        content: `\
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px
+`
+    },
+    {
+        name: t("mermaid.sample_c4"),
+        content: `\
+C4Context
+    title System Context diagram for Internet Banking System
+    Enterprise_Boundary(b0, "BankBoundary0") {
+        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")
+
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+        Enterprise_Boundary(b1, "BankBoundary") {
+            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+            System_Boundary(b2, "BankBoundary2") {
+                System(SystemA, "Banking System A")
+                System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+            }
+
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+            Boundary(b3, "BankBoundary3", "boundary") {
+                SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+                SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+            }
+        }
+    }
+
+    BiRel(customerA, SystemAA, "Uses")
+    BiRel(SystemAA, SystemE, "Uses")
+    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+    Rel(SystemC, customerA, "Sends e-mails to")
+`
+    },
+    {
+        name: t("mermaid.sample_gantt"),
+        content: `\
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+`
+    },
+    {
+        name: t("mermaid.sample_git"),
+        content: `\
+gitGraph
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    branch feature
+    checkout feature
+    commit
+    commit
+    checkout main
+    merge feature
+`
+    },
+    {
+        name: t("mermaid.sample_kanban"),
+        content: `\
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
+---
+kanban
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [In progress]
+    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
+  id11[Done]
+    id5[define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: 2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
+`
+    },
+    {
+        name: t("mermaid.sample_packet"),
+        content: `\
+---
+title: "TCP Packet"
+---
+packet
+0-15: "Source Port"
+16-31: "Destination Port"
+32-63: "Sequence Number"
+64-95: "Acknowledgment Number"
+96-99: "Data Offset"
+100-105: "Reserved"
+106: "URG"
+107: "ACK"
+108: "PSH"
+109: "RST"
+110: "SYN"
+111: "FIN"
+112-127: "Window"
+128-143: "Checksum"
+144-159: "Urgent Pointer"
+160-191: "(Options and Padding)"
+192-255: "Data (variable length)"
+        `
+    },
+    {
+        name: t("mermaid.sample_pie"),
+        content: `\
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+`
+    },
+    {
+        name: t("mermaid.sample_quadrant"),
+        content: `\
+quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+`
+    },
+    {
+        name: t("mermaid.sample_radar"),
+        content: `\
+---
+title: "Grades"
+---
+radar-beta
+  axis m["Math"], s["Science"], e["English"]
+  axis h["History"], g["Geography"], a["Art"]
+  curve a["Alice"]{85, 90, 80, 70, 75, 90}
+  curve b["Bob"]{70, 75, 85, 80, 90, 85}
+
+  max 100
+  min 0
+        `
+    },
+    {
+        name: t("mermaid.sample_requirement"),
+        content: `\
+requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+`
+    },
+    {
+        name: t("mermaid.sample_sankey"),
+        content: `\
+---
+config:
+  sankey:
+    showValues: false
+---
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,NGas,40.719
+Gas reserves,NGas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+NGas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366
+`
+    },
+    {
+        name: t("mermaid.sample_timeline"),
+        content: `\
+timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook
+         : Google
+    2005 : YouTube
+    2006 : Twitter
+        `
+    },
+    {
+        name: t("mermaid.sample_treemap"),
+        content: `\
+treemap-beta
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2"
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20
+    "Leaf 2.2": 25
+`
+    },
+    {
+        name: t("mermaid.sample_user_journey"),
+        content: `\
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+`
+    },
+    {
+        name: t("mermaid.sample_xy"),
+        content: `\
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+`
+    }
+];
+
+export default SAMPLE_DIAGRAMS;

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types.html

@@ -9,8 +9,7 @@
   note where to place the new one and select:</p>
 <ul>
   <li><em>Insert note after</em>, to put the new note underneath the one selected.</li>
-  <li
- ><em>Insert child note</em>, to insert the note as a child of the selected
+  <li><em>Insert child note</em>, to insert the note as a child of the selected
     note.</li>
 </ul>
 <p>
@@ -21,8 +20,7 @@
   <li>When adding a <a href="#root/_help_QEAPj01N5f7w">link</a> in a&nbsp;<a class="reference-link"
     href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;note, type the desired title of
     the new note and press Enter. Afterwards the type of the note will be asked.</li>
-  <li
- >Similarly, when creating a new tab, type the desired title and press Enter.</li>
+  <li>Similarly, when creating a new tab, type the desired title and press Enter.</li>
 </ul>
 <h2>Changing the type of a note</h2>
 <p>It is possible to change the type of a note after it has been created
@@ -32,96 +30,94 @@
   edit the <a href="#root/_help_4FahAwuGTAwC">source of a note</a>.</p>
 <h2>Supported note types</h2>
 <p>The following note types are supported by Trilium:</p>
-<figure class="table">
-  <table>
-    <thead>
-      <tr>
-        <th>Note Type</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>
-        </td>
-        <td>The default note type, which allows for rich text formatting, images,
-          admonitions and right-to-left support.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>
-        </td>
-        <td>Uses a mono-space font and can be used to store larger chunks of code
-          or plain text than a text note, and has better syntax highlighting.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_m523cpzocqaD">Saved Search</a>
-        </td>
-        <td>Stores the information about a search (the search text, criteria, etc.)
-          for later use. Can be used for quick filtering of a large amount of notes,
-          for example. The search can easily be triggered.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_iRwzGnHPzonm">Relation Map</a>
-        </td>
-        <td>Allows easy creation of notes and relations between them. Can be used
-          for mainly relational data such as a family tree.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_bdUJEHsAPYQR">Note Map</a>
-        </td>
-        <td>Displays the relationships between the notes, whether via relations or
-          their hierarchical structure.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
-        </td>
-        <td>Used in&nbsp;<a class="reference-link" href="#root/_help_CdNpE2pqjmI6">Scripting</a>,
-          it displays the HTML content of another note. This allows displaying any
-          kind of content, provided there is a script behind it to generate it.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>
-        </td>
-        <td>Displays the children of the note either as a grid, a list, or for a more
-          specialized case: a calendar.&nbsp;
-          <br>
-          <br>Generally useful for easy reading of short notes.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>
-        </td>
-        <td>Displays diagrams such as bar charts, flow charts, state diagrams, etc.
-          Requires a bit of technical knowledge since the diagrams are written in
-          a specialized format.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a>
-        </td>
-        <td>Allows easy drawing of sketches, diagrams, handwritten content. Uses the
-          same technology behind <a href="https://excalidraw.com">excalidraw.com</a>.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_1vHRoWCEjj0L">Web View</a>
-        </td>
-        <td>Displays the content of an external web page, similar to a browser.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a>
-        </td>
-        <td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_81SGnPGMk7Xc">Geo Map</a>
-        </td>
-        <td>Displays the children of the note as a geographical map, one use-case
-          would be to plan vacations. It even has basic support for tracks. Notes
-          can also be created from it.</td>
-      </tr>
-      <tr>
-        <td><a class="reference-link" href="#root/_help_W8vYD3Q1zjCR">File</a>
-        </td>
-        <td>Represents an uploaded file such as PDFs, images, video or audio files.</td>
-      </tr>
-    </tbody>
-  </table>
-</figure>
+<table>
+  <thead>
+    <tr>
+      <th>Note Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>
+      </td>
+      <td>The default note type, which allows for rich text formatting, images,
+        admonitions and right-to-left support.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>
+      </td>
+      <td>Uses a mono-space font and can be used to store larger chunks of code
+        or plain text than a text note, and has better syntax highlighting.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_m523cpzocqaD">Saved Search</a>
+      </td>
+      <td>Stores the information about a search (the search text, criteria, etc.)
+        for later use. Can be used for quick filtering of a large amount of notes,
+        for example. The search can easily be triggered.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_iRwzGnHPzonm">Relation Map</a>
+      </td>
+      <td>Allows easy creation of notes and relations between them. Can be used
+        for mainly relational data such as a family tree.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_bdUJEHsAPYQR">Note Map</a>
+      </td>
+      <td>Displays the relationships between the notes, whether via relations or
+        their hierarchical structure.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
+      </td>
+      <td>Used in&nbsp;<a class="reference-link" href="#root/_help_CdNpE2pqjmI6">Scripting</a>,
+        it displays the HTML content of another note. This allows displaying any
+        kind of content, provided there is a script behind it to generate it.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>
+      </td>
+      <td>Displays the children of the note either as a grid, a list, or for a more
+        specialized case: a calendar.&nbsp;
+        <br>
+        <br>Generally useful for easy reading of short notes.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>
+      </td>
+      <td>Displays diagrams such as bar charts, flow charts, state diagrams, etc.
+        Requires a bit of technical knowledge since the diagrams are written in
+        a specialized format.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a>
+      </td>
+      <td>Allows easy drawing of sketches, diagrams, handwritten content. Uses the
+        same technology behind <a href="https://excalidraw.com">excalidraw.com</a>.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_1vHRoWCEjj0L">Web View</a>
+      </td>
+      <td>Displays the content of an external web page, similar to a browser.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a>
+      </td>
+      <td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_81SGnPGMk7Xc">Geo Map</a>
+      </td>
+      <td>Displays the children of the note as a geographical map, one use-case
+        would be to plan vacations. It even has basic support for tracks. Notes
+        can also be created from it.</td>
+    </tr>
+    <tr>
+      <td><a class="reference-link" href="#root/_help_W8vYD3Q1zjCR">File</a>
+      </td>
+      <td>Represents an uploaded file such as PDFs, images, video or audio files.</td>
+    </tr>
+  </tbody>
+</table>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html

@@ -6,10 +6,20 @@
   <img style="aspect-ratio:886/663;" src="2_Mermaid Diagrams_image.png"
   width="886" height="663">
 </figure>
+<h2>Types of diagrams</h2>
 <p>Trilium supports Mermaid, which adds support for various diagrams such
   as flowchart, sequence diagram, class diagram, state diagram, pie charts,
   etc., all using a text description of the chart instead of manually drawing
   the diagram.</p>
+<p>Starting with v0.103.0, Mermaid diagrams no longer start with a sample
+  flowchart, but instead a pane at the bottom will show all the supported
+  diagrams with sample code for each:</p>
+<ul>
+  <li>Simply click on any of the samples to apply it.</li>
+  <li>The pane will disappear as soon as something is typed in the code editor
+    or a sample is selected. To make it appear again, simply remove the content
+    of the note.</li>
+</ul>
 <h2>Layouts</h2>
 <p>Depending on the chart being edited and user preference, there are two
   layouts supported by the Mermaid note type:</p>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Spreadsheets.html

@@ -11,17 +11,17 @@
   Calc, with support for formulas, data validation and text formatting.</p>
 <h2>Spreadsheets vs. collections</h2>
 <p>There is a slight overlap between spreadsheets and the&nbsp;<a class="reference-link"
-  href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_2FvYrpmOXm29">Table</a>&nbsp;collection.
-  In general the table collection is useful to track meta-information about
-  notes (for example a collection of people and their birthdays), whereas
-  spreadsheets are quite useful for calculations since they support formulas.</p>
+  href="#root/_help_2FvYrpmOXm29">Table</a>&nbsp;collection. In general the table
+  collection is useful to track meta-information about notes (for example
+  a collection of people and their birthdays), whereas spreadsheets are quite
+  useful for calculations since they support formulas.</p>
 <p>Spreadsheets also benefit from a wider range of features such as data
   validation, formatting and can work on a relatively large dataset.</p>
 <h2>Important statement regarding data format</h2>
 <p>For Trilium as a knowledge database, it is important that data is stored
   in a format that is easy to convert to something else. For example,&nbsp;
   <a
-  class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_iPIMuisry3hd">Text</a>&nbsp;notes can be exported to either HTML or Markdown, making
+  class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes can be exported to either HTML or Markdown, making
     it relatively easy to migrate to another software or simply to stand the
     test of time.</p>
 <p>For spreadsheets, Trilium uses a technology called <a href="https://docs.univer.ai/">Univer Sheets</a>,
@@ -41,28 +41,16 @@
 <h2>Supported features</h2>
 <p>The spreadsheet has support for the following features:</p>
 <ul>
-  <li>
-    <p>Filtering</p>
-  </li>
-  <li>
-    <p>Sorting</p>
-  </li>
-  <li>
-    <p>Data validation</p>
-  </li>
-  <li>
-    <p>Conditional formatting</p>
-  </li>
-  <li>
-    <p>Notes / annotations</p>
-  </li>
-  <li>
-    <p>Find / replace</p>
-  </li>
+  <li>Filtering</li>
+  <li>Sorting</li>
+  <li>Data validation</li>
+  <li>Conditional formatting</li>
+  <li>Notes / annotations</li>
+  <li>Find / replace</li>
 </ul>
 <p>We might consider adding <a href="https://docs.univer.ai/guides/sheets/features/filter">other features</a> from
   Univer at some point. If there is a particular feature that can be added
-  easily, it can be discussed over <a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_wy8So3yZZlH9">GitHub Issues</a>.</p>
+  easily, it can be discussed over <a href="#root/_help_wy8So3yZZlH9">GitHub Issues</a>.</p>
 <h2>Features not supported yet</h2>
 <h3>Regarding Pro features</h3>
 <p>Univer spreadsheets also feature a <a href="https://univer.ai/pro">Pro plan</a> which
@@ -75,15 +63,9 @@
 <p>There are a few features that are already planned but are not supported
   yet:</p>
 <ul>
-  <li>
-    <p>Trilium-specific formulas (e.g. to obtain the title of a note).</p>
-  </li>
-  <li>
-    <p>User-defined formulas</p>
-  </li>
-  <li>
-    <p>Cross-workbook calculation</p>
-  </li>
+  <li>Trilium-specific formulas (e.g. to obtain the title of a note).</li>
+  <li>User-defined formulas</li>
+  <li>Cross-workbook calculation</li>
 </ul>
 <p>If you would like us to work on these features, consider <a href="https://triliumnotes.org/en/support-us">supporting us</a>.</p>
 <h2>Known limitations</h2>
@@ -92,12 +74,10 @@
     <p>It is possible to share a spreadsheet, case in which a best-effort HTML
       rendering of the spreadsheet is done.</p>
     <ul>
-      <li>
-        <p>For more advanced use cases, this will most likely not work as intended.
-          Feel free to <a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_wy8So3yZZlH9">report issues</a>,
-          but keep in mind that we might not be able to have a complete feature parity
-          with all the features of Univer.</p>
-      </li>
+      <li>For more advanced use cases, this will most likely not work as intended.
+        Feel free to <a href="#root/_help_wy8So3yZZlH9">report issues</a>, but keep in
+        mind that we might not be able to have a complete feature parity with all
+        the features of Univer.</li>
     </ul>
   </li>
   <li>

docs/User Guide/!!!meta.json

@@ -10663,33 +10663,33 @@
                             "type": "text",
                             "mime": "text/html",
                             "attributes": [
-                                {
-                                    "type": "label",
-                                    "name": "iconClass",
-                                    "value": "bx bx-table",
-                                    "isInheritable": false,
-                                    "position": 30
-                                },
                                 {
                                     "type": "relation",
                                     "name": "internalLink",
                                     "value": "2FvYrpmOXm29",
                                     "isInheritable": false,
-                                    "position": 40
+                                    "position": 10
                                 },
                                 {
                                     "type": "relation",
                                     "name": "internalLink",
                                     "value": "iPIMuisry3hd",
                                     "isInheritable": false,
-                                    "position": 50
+                                    "position": 20
                                 },
                                 {
                                     "type": "relation",
                                     "name": "internalLink",
                                     "value": "wy8So3yZZlH9",
                                     "isInheritable": false,
-                                    "position": 60
+                                    "position": 30
+                                },
+                                {
+                                    "type": "label",
+                                    "name": "iconClass",
+                                    "value": "bx bx-table",
+                                    "isInheritable": false,
+                                    "position": 30
                                 }
                             ],
                             "format": "markdown",

docs/User Guide/User Guide.md

@@ -15,7 +15,7 @@ Trilium is an open-source solution for note-taking and organizing a personal kno
 
 *   <a class="reference-link" href="User%20Guide/Installation%20%26%20Setup/Desktop%20Installation.md">Desktop Installation</a>
 *   <a class="reference-link" href="User%20Guide/Installation%20%26%20Setup/Server%20Installation.md">Server Installation</a>
-*   <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Frontend%20API">Frontend API</a> or <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Backend%20API.dat">Backend API</a>
+*   <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Frontend%20API">Frontend API</a> or <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Backend%20API.dat">[missing note]</a>
 *   [ETAPI reference](User%20Guide/Advanced%20Usage/ETAPI%20\(REST%20API\)/API%20Reference.dat)
 
 ## External links

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

@@ -4,8 +4,15 @@
 
 <figure class="image image-style-align-center"><img style="aspect-ratio:886/663;" src="2_Mermaid Diagrams_image.png" width="886" height="663"></figure>
 
+## Types of 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.
 
+Starting with v0.103.0, Mermaid diagrams no longer start with a sample flowchart, but instead a pane at the bottom will show all the supported diagrams with sample code for each:
+
+*   Simply click on any of the samples to apply it.
+*   The pane will disappear as soon as something is typed in the code editor or a sample is selected. To make it appear again, simply remove the content of the note.
+
 ## Layouts
 
 Depending on the chart being edited and user preference, there are two layouts supported by the Mermaid note type: