Elian DoranandClaude Opus 5.5 09e4bd965e feat(share): pan and zoom a shared Mermaid note's diagram
A shared Mermaid note's diagram goes into a viewer once Mermaid has drawn it: zoom out, the
percentage and zoom in in its bottom corner, between 50% and 1000% of its width on the page;
clicking the percentage or double-clicking returns to the whole diagram. Dragging pans only once
zoomed in, so a touch on the diagram still scrolls the page at the fitted size, and the wheel
zooms only while the viewer has focus (`useZoomPanWheel`'s `isFocusRequired`). Code blocks in
text notes are left as they were.

The viewer, `mermaid_zoom.tsx`, is the first share-theme code to reuse the app's: it drives
react-zoom-pan-pinch through the client's `useZoomPanPinch` and `useZoomPanWheel` from
`zoom_pan.ts`, imported as `@triliumnext/client/src/...`, with the app's zoom bounds. Since the
client's Vite build bundles the share theme, the built viewer is 1.5 KB of its own and imports the
app's `jsxRuntime`, `hooks` and `zoom_pan` chunks. `ZoomControls` is not reused: it imports the
client's `hooks.ts` and with it most of the app; `useZoomPanKeyboard` likewise reaches `utils.ts`,
so the viewer has no keyboard panning. `mermaid.ts` loads the viewer on demand, so only a page
with a Mermaid note loads Preact. preact and react-zoom-pan-pinch are not declared by the share
theme: the hoisted install resolves them to the client's copy.

The labels come from core as `data-*` attributes on `.mermaid-note`, so custom templates get them
too (four `share_theme.*` keys in `server.json`).

Build: `LAZY_MODULES` groups the viewer with mermaid, so `share_theme.json` lists it and the
Preact chunks it loads under `mermaid` (137 files, 7 of them the viewer's, 74 KB) and a page's own
files stay at 34. `scripts.css` is now built with every dynamic import external, so a module
loaded on demand brings its stylesheet from the app's build instead of also landing in
`scripts.css`, which is byte-for-byte unchanged.

`hasMermaidDiagrams()` now counts a Mermaid note. It only looked for diagrams in text and
Markdown notes, so the export of a subtree whose diagrams were all Mermaid notes carried neither
mermaid nor the viewer and showed the saved images.

The share theme's TypeScript project references the client's, compiles JSX for Preact, and its
specs and coverage include `.tsx`; the viewer's spec fakes react-zoom-pan-pinch as the client's
`SvgSplitEditor.spec.tsx` does, since happy-dom cannot lay it out.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
2026-10-09 23:32:17 +03:00
2026-03-01 20:00:23 +02:00
2025-12-23 20:52:07 +02:00
2026-09-10 00:53:30 +00:00
2026-10-05 17:59:25 +03:00
2022-02-12 13:17:49 +01:00
2024-01-28 23:09:57 +01:00

Trilium Notes

GitHub Sponsors LiberaPay patrons
Docker Pulls GitHub Downloads (all assets, all releases)
Translation status

Arabic | Chinese (Simplified Han script) | Chinese (Traditional Han script) | Czech | English (United Kingdom) | English | French | German | Greek | Indonesian | Irish | Italian | Japanese | Korean | Polish | Romanian | Russian | Spanish | Ukrainian | Urdu | Uyghur | Vietnamese

Trilium Notes is a free and open-source, cross-platform hierarchical note taking application with focus on building large personal knowledge bases.

Looking for "Trillium Notes"? The project's canonical spelling is "Trilium Notes", with one l.

Trilium Screenshot

⏬ Download

  • Latest release – stable version, recommended for most users.
  • Nightly build – unstable development version, updated daily with the latest features and fixes.

📚 Documentation

Visit our comprehensive documentation at docs.triliumnotes.org

Our documentation is available in multiple formats:

  • Online Documentation: Browse the full documentation at docs.triliumnotes.org
  • In-App Help: Press F1 within Trilium to access the same documentation directly in the application
  • GitHub: Navigate through the User Guide in this repository

🎁 Features

✨ Check out the following third-party resources/communities for more TriliumNext related goodies:

❓Why TriliumNext?

The original Trilium developer (Zadam) has graciously given the Trilium repository to the community project which resides at https://github.com/TriliumNext

⬆️Migrating from Zadam/Trilium?

There are no special migration steps to migrate from a zadam/Trilium instance to a TriliumNext/Trilium instance. Simply install TriliumNext/Trilium as usual and it will use your existing database.

Versions up to and including v0.90.4 are compatible with the latest zadam/trilium version of v0.63.7. Any later versions of TriliumNext/Trilium have their sync versions incremented which prevents direct migration.

💬 Discuss with us

Feel free to join our official conversations. We would love to hear what features, suggestions, or issues you may have!

🏗 Installation

Windows / MacOS

Download the binary release for your platform from the latest release page, unzip the package and run the trilium executable.

Linux

If your distribution is listed in the table below, use your distribution's package.

Packaging status

You may also download the binary release for your platform from the latest release page, unzip the package and run the trilium executable.

TriliumNext is also provided as a Flatpak, but not yet published on FlatHub.

Browser (any OS)

If you use a server installation (see below), you can directly access the web interface (which is almost identical to the desktop app).

Currently only the latest versions of Chrome & Firefox are supported (and tested).

Mobile

To use TriliumNext on a mobile device, you can use a mobile web browser to access the mobile interface of a server installation (see below).

See issue https://github.com/TriliumNext/Trilium/issues/4962 for more information on mobile app support.

TriliumDroid

If you prefer a native Android app, you can use TriliumDroid. Report bugs and missing features at their repository. Note: It is best to disable automatic updates on your server installation (see below) when using TriliumDroid since the sync version must match between Trilium and TriliumDroid.

Pocket Trilium

If you want a full-featured native Android app, check out Pocket Trilium. It runs a complete Trilium instance on your phone, supports full offline use, and allows you to sync with your server.

Trinote

If you want a native iOS app, you can use Trinote, an open-source client for your self-hosted Trilium / TriliumNext server. It lets you browse and organize your note tree, search for notes on the server, read and edit all note types (text, code, mindmap, spreadsheet, geomap, canvas, etc.), and keeps notes available and editable offline. Here's the repo if you're interested in contributing and here's the discord server if you have any feedback or suggestions you want to discuss.

Server

To install TriliumNext on your own server (including via Docker from Dockerhub) follow the server installation docs.

💻 Contribute

Translations

If you are a native speaker, help us translate Trilium by heading over to our Weblate page.

Here's the language coverage we have so far:

Translation status

Code

Download the repository, install dependencies using pnpm and then run the server (available at http://localhost:8080):

git clone https://github.com/TriliumNext/Trilium.git
cd Trilium
pnpm install
pnpm run server:start

Documentation

Download the repository, install dependencies using pnpm and then run the environment required to edit the documentation:

git clone https://github.com/TriliumNext/Trilium.git
cd Trilium
pnpm install
pnpm edit-docs:edit-docs

Alternatively, if you have Nix installed:

# Run directly
nix run .#edit-docs

# Or install to your profile
nix profile install .#edit-docs
trilium-edit-docs

Building the Executable

Download the repository, install dependencies using pnpm and then build the desktop app for Windows:

git clone https://github.com/TriliumNext/Trilium.git
cd Trilium
pnpm install
pnpm run --filter desktop electron-forge:make --arch=x64 --platform=win32

For more details, see the development docs.

Developer Documentation

Please view the documentation guide for details. If you have more questions, feel free to reach out via the links described in the "Discuss with us" section above.

💖 Sponsors

NetPerfect logo
NetPerfect

EV certificate & Windows CI
CKEditor logo
CKEditor

Premium editor features
Dosu logo
Dosu

Automated GitHub support

👏 Shoutouts

Trilium would not be possible without the technologies behind it:

  • CKEditor 5 - the visual editor behind text notes.
  • CodeMirror - code editor with support for huge amount of languages.
  • Excalidraw - the infinite whiteboard used in Canvas notes.
  • Mind Elixir - providing the mind map functionality.
  • Leaflet - for rendering geographical maps.
  • Tabulator - for the interactive table used in collections.
  • FancyTree - feature-rich tree library without real competition.

🤝 Support

Trilium is built and maintained with hundreds of hours of work. Your support keeps it open-source, improves features, and covers costs such as hosting.

Consider supporting the main developer (eliandoran) of the application via:

🔑 License

Copyright 2017-2025 zadam, Elian Doran, and other contributors

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Languages
TypeScript 79.5%
Fluent 7.8%
CSS 4.9%
HTML 4.2%
JavaScript 3.2%