From ce71068f6d3e2cb73afb74542792e89268eea4c6 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 09:18:38 +0200 Subject: [PATCH 01/16] chore(mermaid): add a bottom section for switching between samples --- .../src/widgets/layout/NoteContentSwitcher.tsx | 9 +++++++++ apps/client/src/widgets/type_widgets/Mermaid.tsx | 9 ++++++++- .../src/widgets/type_widgets/helpers/SplitEditor.tsx | 12 ++++++++---- 3 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 apps/client/src/widgets/layout/NoteContentSwitcher.tsx diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx new file mode 100644 index 0000000000..0470bac361 --- /dev/null +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx @@ -0,0 +1,9 @@ +import { ComponentChildren } from "preact"; + +interface NoteContentSwitcherProps { + children: ComponentChildren; +} + +export default function NoteContentSwitcher({ children }: NoteContentSwitcherProps) { + return

{children}

; +} diff --git a/apps/client/src/widgets/type_widgets/Mermaid.tsx b/apps/client/src/widgets/type_widgets/Mermaid.tsx index 9403c4cf61..3d47d25fac 100644 --- a/apps/client/src/widgets/type_widgets/Mermaid.tsx +++ b/apps/client/src/widgets/type_widgets/Mermaid.tsx @@ -1,7 +1,9 @@ import { useCallback } from "preact/hooks"; + +import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid"; +import NoteContentSwitcher from "../layout/NoteContentSwitcher"; import SvgSplitEditor from "./helpers/SvgSplitEditor"; import { TypeWidgetProps } from "./type_widget"; -import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid"; let idCounter = 1; let registeredErrorReporter = false; @@ -30,6 +32,11 @@ export default function Mermaid(props: TypeWidgetProps) { attachmentName="mermaid-export" renderSvg={renderSvg} noteType="mermaid" + extraContent={( + + Foo + + )} {...props} /> ); diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx index 237556b5e7..bf6d331ea5 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx +++ b/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(null); const splitEditorOrientation = useSplitOrientation(forceOrientation); @@ -57,9 +58,12 @@ function EditorWithSplit({ note, error, splitOptions, previewContent, previewBut {...editorProps} /> - {error && - {error} - } + {error && ( + + {error} + + )} + {extraContent} ); From 069d8b1ae4dfdba740e42f1d38a01960e2466441 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 09:20:07 +0200 Subject: [PATCH 02/16] refactor(mermaid): move into own directory --- apps/client/src/widgets/note_types.tsx | 2 +- .../src/widgets/type_widgets/{ => mermaid}/Mermaid.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) rename apps/client/src/widgets/type_widgets/{ => mermaid}/Mermaid.tsx (84%) diff --git a/apps/client/src/widgets/note_types.tsx b/apps/client/src/widgets/note_types.tsx index 433841fc03..b80d4d545e 100644 --- a/apps/client/src/widgets/note_types.tsx +++ b/apps/client/src/widgets/note_types.tsx @@ -84,7 +84,7 @@ export const TYPE_MAPPINGS: Record = { printable: true }, mermaid: { - view: () => import("./type_widgets/Mermaid"), + view: () => import("./type_widgets/mermaid/Mermaid"), className: "note-detail-mermaid", printable: true, isFullHeight: true diff --git a/apps/client/src/widgets/type_widgets/Mermaid.tsx b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx similarity index 84% rename from apps/client/src/widgets/type_widgets/Mermaid.tsx rename to apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx index 3d47d25fac..0339e48936 100644 --- a/apps/client/src/widgets/type_widgets/Mermaid.tsx +++ b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx @@ -1,9 +1,9 @@ import { useCallback } from "preact/hooks"; -import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid"; -import NoteContentSwitcher from "../layout/NoteContentSwitcher"; -import SvgSplitEditor from "./helpers/SvgSplitEditor"; -import { TypeWidgetProps } from "./type_widget"; +import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../../services/mermaid"; +import NoteContentSwitcher from "../../layout/NoteContentSwitcher"; +import SvgSplitEditor from "../helpers/SvgSplitEditor"; +import { TypeWidgetProps } from "../type_widget"; let idCounter = 1; let registeredErrorReporter = false; From 72038fb2ec57e9a584bbc764e4167cfbb3f51bd9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 09:26:14 +0200 Subject: [PATCH 03/16] chore(mermaid): basic logic for content switcher --- .../widgets/layout/NoteContentSwitcher.css | 15 ++++++++++++ .../widgets/layout/NoteContentSwitcher.tsx | 24 +++++++++++++++---- .../widgets/type_widgets/mermaid/Mermaid.tsx | 5 ++-- .../type_widgets/mermaid/sample_diagrams.ts | 17 +++++++++++++ 4 files changed, 54 insertions(+), 7 deletions(-) create mode 100644 apps/client/src/widgets/layout/NoteContentSwitcher.css create mode 100644 apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.css b/apps/client/src/widgets/layout/NoteContentSwitcher.css new file mode 100644 index 0000000000..2212402273 --- /dev/null +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.css @@ -0,0 +1,15 @@ +.note-content-switcher { + --badge-radius: 12px; + position: relative; + top: 5px; + display: flex; + min-height: 35px; + gap: 5px; + + .ext-badge { + --color: var(--input-background-color); + color: var(--main-text-color); + font-size: 0.9rem; + flex-shrink: 0; + } +} diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx index 0470bac361..b2386ad3fb 100644 --- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx @@ -1,9 +1,25 @@ -import { ComponentChildren } from "preact"; +import "./NoteContentSwitcher.css"; + +import { Badge } from "../react/Badge"; + +export interface NoteContentTemplate { + name: string; + content: string; +} interface NoteContentSwitcherProps { - children: ComponentChildren; + templates: NoteContentTemplate[]; } -export default function NoteContentSwitcher({ children }: NoteContentSwitcherProps) { - return

{children}

; +export default function NoteContentSwitcher({ templates }: NoteContentSwitcherProps) { + return ( +
+ {templates.map(sample => ( + + ))} +
+ ); } diff --git a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx index 0339e48936..5d57c5b22f 100644 --- a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx +++ b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx @@ -4,6 +4,7 @@ import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../ 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; @@ -33,9 +34,7 @@ export default function Mermaid(props: TypeWidgetProps) { renderSvg={renderSvg} noteType="mermaid" extraContent={( - - Foo - + )} {...props} /> diff --git a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts new file mode 100644 index 0000000000..c6c036a104 --- /dev/null +++ b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts @@ -0,0 +1,17 @@ +import type { NoteContentTemplate } from "../../layout/NoteContentSwitcher"; + +const SAMPLE_DIAGRAMS: NoteContentTemplate[] = [ + { + name: "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] + ` + } +]; + +export default SAMPLE_DIAGRAMS; From 4134c4ddd04393e19edc2b8035d5e284021400e0 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 09:29:28 +0200 Subject: [PATCH 04/16] feat(mermaid): replace note content on switch --- apps/client/src/widgets/layout/NoteContentSwitcher.tsx | 10 +++++++++- .../src/widgets/type_widgets/mermaid/Mermaid.tsx | 2 +- .../widgets/type_widgets/mermaid/sample_diagrams.ts | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx index b2386ad3fb..37cd5df9b8 100644 --- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx @@ -1,5 +1,7 @@ import "./NoteContentSwitcher.css"; +import FNote from "../../entities/fnote"; +import server from "../../services/server"; import { Badge } from "../react/Badge"; export interface NoteContentTemplate { @@ -8,16 +10,22 @@ export interface NoteContentTemplate { } interface NoteContentSwitcherProps { + note: FNote; templates: NoteContentTemplate[]; } -export default function NoteContentSwitcher({ templates }: NoteContentSwitcherProps) { +export default function NoteContentSwitcher({ note, templates }: NoteContentSwitcherProps) { return (
{templates.map(sample => ( { + await server.put(`notes/${note.noteId}/data`, { + content: sample.content + }); + }} /> ))}
diff --git a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx index 5d57c5b22f..2d3c312283 100644 --- a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx +++ b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx @@ -34,7 +34,7 @@ export default function Mermaid(props: TypeWidgetProps) { renderSvg={renderSvg} noteType="mermaid" extraContent={( - + )} {...props} /> diff --git a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts index c6c036a104..3979baf122 100644 --- a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts +++ b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts @@ -10,7 +10,7 @@ flowchart TD C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] - ` +` } ]; From b9a8e4e4ba1ebed8c18b171c4848d8c9ad6752a3 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 09:39:05 +0200 Subject: [PATCH 05/16] feat(mermaid): add all official samples --- .../widgets/layout/NoteContentSwitcher.css | 4 +- .../type_widgets/mermaid/sample_diagrams.ts | 452 ++++++++++++++++++ 2 files changed, 455 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.css b/apps/client/src/widgets/layout/NoteContentSwitcher.css index 2212402273..7a8cc38668 100644 --- a/apps/client/src/widgets/layout/NoteContentSwitcher.css +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.css @@ -1,10 +1,12 @@ .note-content-switcher { --badge-radius: 12px; position: relative; - top: 5px; display: flex; min-height: 35px; gap: 5px; + padding: 5px; + flex-wrap: wrap; + flex-shrink: 0; .ext-badge { --color: var(--input-background-color); diff --git a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts index 3979baf122..11833e5535 100644 --- a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts +++ b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts @@ -10,6 +10,458 @@ flowchart TD C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] +` + }, + { + name: "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: "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: "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: "State", + content: `\ +stateDiagram-v2 + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +` + }, + { + name: "Mindmap", + content: `\ +mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness
and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid +` + }, + { + name: "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: "Block", + content: `\ +block-beta +columns 1 + db(("DB")) + blockArrowId6<["   "]>(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: "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,
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: "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: "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: "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: "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: "Pie", + content: `\ +pie title Pets adopted by volunteers + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +` + }, + { + name: "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: "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: "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: "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: "Timeline", + content: `\ +timeline + title History of Social Media Platform + 2002 : LinkedIn + 2004 : Facebook + : Google + 2005 : YouTube + 2006 : Twitter + ` + }, + { + name: "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: "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: "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] ` } ]; From aba6750c18f2c1432ebfc584d695866fbc445864 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 09:44:06 +0200 Subject: [PATCH 06/16] chore(mermaid): add rounded corners to code editor --- .../src/widgets/type_widgets/helpers/SplitEditor.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css index 0dce268ea1..4767d5ef19 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css +++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css @@ -23,8 +23,13 @@ contain: size !important; } -.note-detail-split .note-detail-code-editor .cm-editor { - margin: 0 !important; +.note-detail-split .note-detail-code-editor { + border-radius: 6px; + margin-top: 1px; + + .cm-editor { + margin: 0 !important; + } } .note-detail-split .note-detail-error-container { From 6c151afca3a77f47a9b56807d99e174241db844c Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 09:58:45 +0200 Subject: [PATCH 07/16] fix(mermaid): error text not selectable --- apps/client/src/widgets/type_widgets/helpers/SplitEditor.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css index 4767d5ef19..120b91a620 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css +++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css @@ -38,6 +38,7 @@ white-space: pre-wrap; font-size: 0.85em; overflow: auto; + user-select: text; } .note-detail-split .note-detail-split-preview { From da193b456bb0588f8f7815d2e4ad1680b163fca6 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 10:00:18 +0200 Subject: [PATCH 08/16] fix(mermaid): error when diagram is empty --- apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx index 2d3c312283..eeda0be5ed 100644 --- a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx +++ b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx @@ -18,6 +18,10 @@ export default function Mermaid(props: TypeWidgetProps) { registeredErrorReporter = true; } + if (!content.trim()) { + return ""; + } + mermaid.initialize({ startOnLoad: false, ...(getMermaidConfig() as any), From 92f8459f286ee11c7acb7d57c56f6ccefab372c0 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 10:02:05 +0200 Subject: [PATCH 09/16] feat(mermaid): show switcher only when note is empty --- apps/client/src/widgets/layout/NoteContentSwitcher.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx index 37cd5df9b8..5465a174dd 100644 --- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx @@ -3,6 +3,7 @@ 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; @@ -15,7 +16,9 @@ interface NoteContentSwitcherProps { } export default function NoteContentSwitcher({ note, templates }: NoteContentSwitcherProps) { - return ( + const blob = useNoteSavedData(note?.noteId); + + return (blob?.length === 0 &&
{templates.map(sample => ( Date: Sat, 14 Mar 2026 10:03:15 +0200 Subject: [PATCH 10/16] chore(mermaid): remove default placeholder content --- apps/client/src/services/note_create.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/apps/client/src/services/note_create.ts b/apps/client/src/services/note_create.ts index c4441e8692..9c4f37f4c5 100644 --- a/apps/client/src/services/note_create.ts +++ b/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(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId || ""}`, { title: options.title, content: options.content || "", From 21d1cd395b153e25923ee02b00f07428e979fd44 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 10:14:21 +0200 Subject: [PATCH 11/16] feat(mermaid): add a text for sample diagram switcher --- apps/client/src/translations/en/translation.json | 3 +++ apps/client/src/widgets/layout/NoteContentSwitcher.css | 4 +++- apps/client/src/widgets/layout/NoteContentSwitcher.tsx | 5 ++++- apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx | 6 +++++- 4 files changed, 15 insertions(+), 3 deletions(-) diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index fdd6f9fb2d..eea9ef2b44 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2202,5 +2202,8 @@ }, "setup_form": { "more_info": "Learn more" + }, + "mermaid": { + "sample_diagrams": "Sample diagrams:" } } diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.css b/apps/client/src/widgets/layout/NoteContentSwitcher.css index 7a8cc38668..86cb23f54a 100644 --- a/apps/client/src/widgets/layout/NoteContentSwitcher.css +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.css @@ -7,11 +7,13 @@ 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: 0.9rem; + font-size: 1em; flex-shrink: 0; } } diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx index 5465a174dd..c018d84ac9 100644 --- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx @@ -11,15 +11,18 @@ export interface NoteContentTemplate { } interface NoteContentSwitcherProps { + text: string; note: FNote; templates: NoteContentTemplate[]; } -export default function NoteContentSwitcher({ note, templates }: NoteContentSwitcherProps) { +export default function NoteContentSwitcher({ text, note, templates }: NoteContentSwitcherProps) { const blob = useNoteSavedData(note?.noteId); return (blob?.length === 0 &&
+ {text}{" "} + {templates.map(sample => ( + )} {...props} /> From a6b89cfa30872513c83426cc1474dd54f08cb3d8 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 10:22:35 +0200 Subject: [PATCH 12/16] chore(mermaid): use translations for sample names --- .../src/translations/en/translation.json | 24 +++++++++- .../type_widgets/mermaid/sample_diagrams.ts | 45 ++++++++++--------- 2 files changed, 46 insertions(+), 23 deletions(-) diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index eea9ef2b44..7a91c831af 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2204,6 +2204,28 @@ "more_info": "Learn more" }, "mermaid": { - "sample_diagrams": "Sample diagrams:" + "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" } } diff --git a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts index 11833e5535..732cbb54bc 100644 --- a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts +++ b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts @@ -1,8 +1,9 @@ +import { t } from "../../../services/i18n"; import type { NoteContentTemplate } from "../../layout/NoteContentSwitcher"; const SAMPLE_DIAGRAMS: NoteContentTemplate[] = [ { - name: "Flowchart", + name: t("mermaid.sample_flowchart"), content: `\ flowchart TD A[Christmas] -->|Get money| B(Go shopping) @@ -13,7 +14,7 @@ flowchart TD ` }, { - name: "Class", + name: t("mermaid.sample_class"), content: `\ classDiagram Animal <|-- Duck @@ -39,7 +40,7 @@ classDiagram ` }, { - name: "Sequence", + name: t("mermaid.sample_sequence"), content: `\ sequenceDiagram Alice->>+John: Hello John, how are you? @@ -49,7 +50,7 @@ sequenceDiagram ` }, { - name: "Entity Relationship", + name: t("mermaid.sample_entity_relationship"), content: `\ erDiagram CUSTOMER ||--o{ ORDER : places @@ -77,7 +78,7 @@ erDiagram ` }, { - name: "State", + name: t("mermaid.sample_state"), content: `\ stateDiagram-v2 [*] --> Still @@ -89,7 +90,7 @@ stateDiagram-v2 ` }, { - name: "Mindmap", + name: t("mermaid.sample_mindmap"), content: `\ mindmap root((mindmap)) @@ -111,7 +112,7 @@ mindmap ` }, { - name: "Architecture", + name: t("mermaid.sample_architecture"), content: `\ architecture-beta group api(cloud)[API] @@ -127,7 +128,7 @@ architecture-beta ` }, { - name: "Block", + name: t("mermaid.sample_block"), content: `\ block-beta columns 1 @@ -146,7 +147,7 @@ columns 1 ` }, { - name: "C4", + name: t("mermaid.sample_c4"), content: `\ C4Context title System Context diagram for Internet Banking System @@ -184,7 +185,7 @@ C4Context ` }, { - name: "Gantt", + name: t("mermaid.sample_gantt"), content: `\ gantt title A Gantt Diagram @@ -198,7 +199,7 @@ gantt ` }, { - name: "Git", + name: t("mermaid.sample_git"), content: `\ gitGraph commit @@ -218,7 +219,7 @@ gitGraph ` }, { - name: "Kanban", + name: t("mermaid.sample_kanban"), content: `\ --- config: @@ -246,7 +247,7 @@ kanban ` }, { - name: "Packet", + name: t("mermaid.sample_packet"), content: `\ --- title: "TCP Packet" @@ -272,7 +273,7 @@ packet ` }, { - name: "Pie", + name: t("mermaid.sample_pie"), content: `\ pie title Pets adopted by volunteers "Dogs" : 386 @@ -281,7 +282,7 @@ pie title Pets adopted by volunteers ` }, { - name: "Quadrant", + name: t("mermaid.sample_quadrant"), content: `\ quadrantChart title Reach and engagement of campaigns @@ -300,7 +301,7 @@ quadrantChart ` }, { - name: "Radar", + name: t("mermaid.sample_radar"), content: `\ --- title: "Grades" @@ -316,7 +317,7 @@ radar-beta ` }, { - name: "Requirement", + name: t("mermaid.sample_requirement"), content: `\ requirementDiagram @@ -335,7 +336,7 @@ requirementDiagram ` }, { - name: "Sankey", + name: t("mermaid.sample_sankey"), content: `\ --- config: @@ -415,7 +416,7 @@ Wind,Electricity grid,289.366 ` }, { - name: "Timeline", + name: t("mermaid.sample_timeline"), content: `\ timeline title History of Social Media Platform @@ -427,7 +428,7 @@ timeline ` }, { - name: "Treemap", + name: t("mermaid.sample_treemap"), content: `\ treemap-beta "Section 1" @@ -440,7 +441,7 @@ treemap-beta ` }, { - name: "User Journey", + name: t("mermaid.sample_user_journey"), content: `\ journey title My working day @@ -454,7 +455,7 @@ journey ` }, { - name: "XY", + name: t("mermaid.sample_xy"), content: `\ xychart-beta title "Sales Revenue" From 2c6bdc79af9c96146fe0541851ea3c44cb0353a6 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 10:25:59 +0200 Subject: [PATCH 13/16] chore(mermaid): rounded corners for editor only on desktop --- .../src/widgets/type_widgets/helpers/SplitEditor.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css index 120b91a620..2c9a6a602e 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css +++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css @@ -23,13 +23,13 @@ contain: size !important; } -.note-detail-split .note-detail-code-editor { +.note-detail-split .note-detail-code-editor .cm-editor { + margin: 0 !important; +} + +body.desktop .note-detail-split .note-detail-code-editor { border-radius: 6px; margin-top: 1px; - - .cm-editor { - margin: 0 !important; - } } .note-detail-split .note-detail-error-container { From 5f1486cf6a902921ae478de0d51c895f18a26cae Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 10:31:28 +0200 Subject: [PATCH 14/16] feat(mermaid): use custom placeholder --- apps/client/src/translations/en/translation.json | 1 + apps/client/src/widgets/layout/NoteContentSwitcher.tsx | 2 +- apps/client/src/widgets/type_widgets/code/Code.tsx | 5 +++-- .../src/widgets/type_widgets/helpers/SvgSplitEditor.tsx | 1 + 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 7a91c831af..4b1baa0d53 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2204,6 +2204,7 @@ "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", diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx index c018d84ac9..a47ff308b6 100644 --- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx +++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx @@ -19,7 +19,7 @@ interface NoteContentSwitcherProps { export default function NoteContentSwitcher({ text, note, templates }: NoteContentSwitcherProps) { const blob = useNoteSavedData(note?.noteId); - return (blob?.length === 0 && + return (blob?.trim().length === 0 &&
{text}{" "} diff --git a/apps/client/src/widgets/type_widgets/code/Code.tsx b/apps/client/src/widgets/type_widgets/code/Code.tsx index 3c12a8036b..f59d6eff3c 100644 --- a/apps/client/src/widgets/type_widgets/code/Code.tsx +++ b/apps/client/src/widgets/type_widgets/code/Code.tsx @@ -30,6 +30,7 @@ export interface EditableCodeProps extends TypeWidgetProps, Omit 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(null); const containerRef = useRef(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={() => { diff --git a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx index a587eba63a..ac0a44f9a7 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx +++ b/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={( Date: Sat, 14 Mar 2026 10:37:26 +0200 Subject: [PATCH 15/16] fix(mermaid): not recentering when using the sample switcher --- .../widgets/type_widgets/helpers/SvgSplitEditor.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx index ac0a44f9a7..d0043f9784 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx +++ b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx @@ -152,6 +152,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg, function useResizer(containerRef: RefObject, noteId: string, svg: string | undefined) { const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>(); const lastNoteId = useRef(); + const wasEmpty = useRef(false); const zoomRef = useRef(); const width = useElementSize(containerRef); @@ -159,9 +160,14 @@ function useResizer(containerRef: RefObject, 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, @@ -187,7 +193,7 @@ function useResizer(containerRef: RefObject, noteId: string, svg zoomRef.current = undefined; zoomInstance.destroy(); }; - }, [ svg, width ]); + }, [ containerRef, noteId, svg, width ]); // React to container changes. useEffect(() => { From e623e91a82671967230f0f3cecf6dcc31205051d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 14 Mar 2026 10:44:55 +0200 Subject: [PATCH 16/16] docs(user): mention changes to Mermaid diagrams --- .../en/User Guide/User Guide/Note Types.html | 190 +++++++++--------- .../Note Types/Mermaid Diagrams.html | 10 + .../User Guide/Note Types/Spreadsheets.html | 58 ++---- docs/User Guide/!!!meta.json | 20 +- docs/User Guide/User Guide.md | 2 +- .../User Guide/Note Types/Mermaid Diagrams.md | 7 + 6 files changed, 140 insertions(+), 147 deletions(-) diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types.html index 2e4a185647..e1c453eb6b 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types.html +++ b/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:

  • Insert note after, to put the new note underneath the one selected.
    • -
  • Insert child note, to insert the note as a child of the selected +
  • Insert child note, to insert the note as a child of the selected note.

@@ -21,8 +20,7 @@

  • When adding a link in a Text note, type the desired title of the new note and press Enter. Afterwards the type of the note will be asked.
    • -
  • Similarly, when creating a new tab, type the desired title and press Enter.
    • +
  • Similarly, when creating a new tab, type the desired title and press Enter.

    • Changing the type of a note

    It is possible to change the type of a note after it has been created @@ -32,96 +30,94 @@ edit the source of a note.

    Supported note types

    The following note types are supported by Trilium:

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Note TypeDescription
    Text - The default note type, which allows for rich text formatting, images, - admonitions and right-to-left support.
    Code - 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.
    Saved Search - 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.
    Relation Map - Allows easy creation of notes and relations between them. Can be used - for mainly relational data such as a family tree.
    Note Map - Displays the relationships between the notes, whether via relations or - their hierarchical structure.
    Render Note - Used in Scripting, - 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.
    Collections - Displays the children of the note either as a grid, a list, or for a more - specialized case: a calendar.  -
    -
    Generally useful for easy reading of short notes.
    Mermaid Diagrams - 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.
    Canvas - Allows easy drawing of sketches, diagrams, handwritten content. Uses the - same technology behind excalidraw.com.
    Web View - Displays the content of an external web page, similar to a browser.
    Mind Map - Easy for brainstorming ideas, by placing them in a hierarchical layout.
    Geo Map - 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.
    File - Represents an uploaded file such as PDFs, images, video or audio files.
    -
    \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Note TypeDescription
    Text + The default note type, which allows for rich text formatting, images, + admonitions and right-to-left support.
    Code + 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.
    Saved Search + 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.
    Relation Map + Allows easy creation of notes and relations between them. Can be used + for mainly relational data such as a family tree.
    Note Map + Displays the relationships between the notes, whether via relations or + their hierarchical structure.
    Render Note + Used in Scripting, + 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.
    Collections + Displays the children of the note either as a grid, a list, or for a more + specialized case: a calendar.  +
    +
    Generally useful for easy reading of short notes.
    Mermaid Diagrams + 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.
    Canvas + Allows easy drawing of sketches, diagrams, handwritten content. Uses the + same technology behind excalidraw.com.
    Web View + Displays the content of an external web page, similar to a browser.
    Mind Map + Easy for brainstorming ideas, by placing them in a hierarchical layout.
    Geo Map + 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.
    File + Represents an uploaded file such as PDFs, images, video or audio files.
    \ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html index 8329576815..eef00ae659 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html @@ -6,10 +6,20 @@ +

    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:

    diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Spreadsheets.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Spreadsheets.html index 5b34fba0eb..010b594aa6 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Spreadsheets.html +++ b/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.

    Spreadsheets vs. collections

    There is a slight overlap between spreadsheets and the Table 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.

    + href="#root/_help_2FvYrpmOXm29">Table 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.

    Spreadsheets also benefit from a wider range of features such as data validation, formatting and can work on a relatively large dataset.

    Important statement regarding data format

    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,  Text notes can be exported to either HTML or Markdown, making + class="reference-link" href="#root/_help_iPIMuisry3hd">Text 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.

    For spreadsheets, Trilium uses a technology called Univer Sheets, @@ -41,28 +41,16 @@

    Supported features

    The spreadsheet has support for the following features:

      -
    • -

      Filtering

      -
      • -
    • -

      Sorting

      -
      • -
    • -

      Data validation

      -
      • -
    • -

      Conditional formatting

      -
      • -
    • -

      Notes / annotations

      -
      • -
    • -

      Find / replace

      -
      • +
    • Filtering
      • +
    • Sorting
      • +
    • Data validation
      • +
    • Conditional formatting
      • +
    • Notes / annotations
      • +
    • Find / replace

    We might consider adding other features from Univer at some point. If there is a particular feature that can be added - easily, it can be discussed over GitHub Issues.

    + easily, it can be discussed over GitHub Issues.

    Features not supported yet

    Regarding Pro features

    Univer spreadsheets also feature a Pro plan which @@ -75,15 +63,9 @@

    There are a few features that are already planned but are not supported yet:

      -
    • -

      Trilium-specific formulas (e.g. to obtain the title of a note).

      -
      • -
    • -

      User-defined formulas

      -
      • -
    • -

      Cross-workbook calculation

      -
      • +
    • Trilium-specific formulas (e.g. to obtain the title of a note).
      • +
    • User-defined formulas
      • +
    • Cross-workbook calculation

    If you would like us to work on these features, consider supporting us.

    Known limitations

    @@ -92,12 +74,10 @@

    It is possible to share a spreadsheet, case in which a best-effort HTML rendering of the spreadsheet is done.

      -
    • -

      For more advanced use cases, this will most likely not work as intended. - Feel free to report issues, - but keep in mind that we might not be able to have a complete feature parity - with all the features of Univer.

      -
      • +
    • For more advanced use cases, this will most likely not work as intended. + Feel free to report issues, but keep in + mind that we might not be able to have a complete feature parity with all + the features of Univer.
  • diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json index c4d0e0a604..2a294ebda3 100644 --- a/docs/User Guide/!!!meta.json +++ b/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", diff --git a/docs/User Guide/User Guide.md b/docs/User Guide/User Guide.md index 3e5537135c..ce5357b26e 100644 --- a/docs/User Guide/User Guide.md +++ b/docs/User Guide/User Guide.md @@ -15,7 +15,7 @@ Trilium is an open-source solution for note-taking and organizing a personal kno * Desktop Installation * Server Installation -* Frontend API or Backend API +* Frontend API or [missing note] * [ETAPI reference](User%20Guide/Advanced%20Usage/ETAPI%20\(REST%20API\)/API%20Reference.dat) ## External links 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 ff2954f42a..14b0729875 100644 --- a/docs/User Guide/User Guide/Note Types/Mermaid Diagrams.md +++ b/docs/User Guide/User Guide/Note Types/Mermaid Diagrams.md @@ -4,8 +4,15 @@
    +## 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: