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 || "", diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index fdd6f9fb2d..4b1baa0d53 100644 --- a/apps/client/src/translations/en/translation.json +++ b/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" } } diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.css b/apps/client/src/widgets/layout/NoteContentSwitcher.css new file mode 100644 index 0000000000..86cb23f54a --- /dev/null +++ b/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; + } +} diff --git a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx new file mode 100644 index 0000000000..a47ff308b6 --- /dev/null +++ b/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 && +
+ {text}{" "} + + {templates.map(sample => ( + { + await server.put(`notes/${note.noteId}/data`, { + content: sample.content + }); + }} + /> + ))} +
+ ); +} 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/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/SplitEditor.css b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css index 0dce268ea1..2c9a6a602e 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css +++ b/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 { 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} ); diff --git a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx index a587eba63a..d0043f9784 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={( , 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); @@ -158,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, @@ -186,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(() => { diff --git a/apps/client/src/widgets/type_widgets/Mermaid.tsx b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx similarity index 63% rename from apps/client/src/widgets/type_widgets/Mermaid.tsx rename to apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx index 9403c4cf61..8293560cd2 100644 --- a/apps/client/src/widgets/type_widgets/Mermaid.tsx +++ b/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={( + + )} {...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..732cbb54bc --- /dev/null +++ b/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
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<["   "]>(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,
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; 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: