Sidharth VinodandClaude Opus 4.8
3628acec02
The auto (Timeline) and manual (Saved) history handling had several bugs.
This rewrites the state module into a small, tested source-of-truth API and
turns History.svelte into a thin view.
Bugs fixed:
- Auto-saves no longer leak into the Saved list. addEntry now writes only to
the store for its own type (previously every entry was also pushed to the
manual store).
- Dedup is keyed on code + config via stateKey() instead of the whole input
state, so volatile/view-only fields (renderCount, updateDiagram, pan/zoom)
no longer cause spurious saves or hide real edits.
- The active-tab highlight tracks the history mode. History binds
activeTabID={$historyModeStore} and Tabs derives the highlight reactively
instead of mutating its prop once, which had frozen it on the first tab.
- Auto-save runs for the whole edit session via startAutoSave() in +page,
with proper cleanup. Previously the interval lived in History.svelte, only
ran while the panel was open, and was never cleared (leaking a new interval
on every open).
- restoreEntries() routes each uploaded entry to the store matching its own
type instead of dumping everything into one store by the first entry's type.
The persisted localStorage keys (autoHistoryStore, manualHistoryStore,
autoHistoryMode) are unchanged, so existing user data is preserved.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mermaid Live Editor
Edit, preview and share mermaid charts/diagrams.
Features
- Edit and preview flowcharts, sequence diagrams, gantt diagrams in real time.
- Save the result as a svg
- Get a link to a viewer of the diagram so that you can share it with others.
- Get a link to edit the diagram so that someone else can tweak it and send a new link back
Live demo
You can try out a live version.
Contributors are welcome!
If you want to speed up the progress for mermaid-live-editor, join the Discord channel and contact knsv.
Docker
Run published image
docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor
The published docker image is built using our default environment variables. You cannot override them when running the image. If you need to customize them, you will need to build the image yourself.
To configure renderer URL
When building set the MERMAID_RENDERER_URL build argument to the rendering
service.
Example:
Default ishttps://mermaid.ink.
Set to empty string to disable PNG and SVG links under Actions
To configure Kroki Instance URL
When building set the MERMAID_KROKI_RENDERER_URL build argument to your Kroki
instance.
Default is https://kroki.io
Set to empty string to disable Kroki link under Actions
To configure Analytics
When building set the MERMAID_ANALYTICS_URL build argument to your plausible instance, and MERMAID_DOMAIN to your domain.
Default is empty, disabling analytics.
To enable Mermaid Chart links and promotion
When building set the MERMAID_IS_ENABLED_MERMAID_CHART_LINKS build argument to true
Default is empty, disabling button to save to Mermaid Chart and promotional banner.
To update the Security modal
The modal shown on clicking the security link assumes analytics, renderer, Kroki
and Mermaid chart are enabled. You can update it by modifying Privacy.svelte
if you wish.
Development
docker compose up --build
Then open http://localhost:3000
Building and running images locally
Build
docker build -t mermaid-js/mermaid-live-editor .
Run
docker run --detach --name mermaid-live-editor --publish 8080:8080 mermaid-js/mermaid-live-editor
Visit: http://localhost:8080
Stop
docker stop mermaid-live-editor
Setup
Below link will help you making a copy of the repository in your local system.
https://docs.github.com/en/get-started/quickstart/fork-a-repo
Requirements
Development
pnpm install
pnpm dev -- --open
This app is created with Svelte Kit.
Release
When a PR is created targeting master, it will be built and deployed by Netlify. The URL will be indicated in a Comment in the PR.
Once the PR is merged, it will automatically be released.