Portainer Templates logo

Portainer Templates

Mermaid Live Editor Mermaid Live Editor

Container

DevelopmentTools

Browser editor for Mermaid diagrams, previewing flowcharts, sequence, class, Gantt and dozens of other diagram types live as you write them in plain text, then exporting them as PNG or SVG or sharing them as a link. Source: https://github.com/mermaid-js/mermaid-live-editor

Image details

Architecture: amd64, arm64
Image size: 26 MB
User: mermaid-js

Source details

Repo: mermaid-js/mermaid-live-editor
Stars: 7k
Forks: 1k
Language: TypeScript
License: MIT
Updated: 8 hours ago
Website: mermaid.live/

Configuration

Type
Container
Platform
linux
Image
ghcr.io/mermaid-js/mermaid-live-editor:latest
Ports
8980:8080/tcp
Restart
unless-stopped

Template by NotAFlightRisk

Report issue

Notes

Open http://<your-host>:8980. There's no login and nothing to back up on the server, since your diagram and its history are kept in your browser's own storage, so another browser or a cleared cache starts empty. Share puts the whole diagram in the link, and Actions --> PNG or SVG downloads it straight from your browser. The pink banner, Save diagram, Edit visually and Contact sales all belong to Mermaid Chart, the makers' paid service, and the two save buttons send your diagram there when clicked, as do the mermaid.ink and Kroki links under Actions. Otherwise the only outside request is the Config tab fetching its schema from mermaid.js.org. Docs: mermaid.js.org

Standalone Install

Select an install method, to see config/commands for deploying Mermaid Live Editor

Installation method

Install on Portainer

Import all app templates into your Portainer instance, for easy 1-click deploys

  1. Ensure both Docker and Portainer are installed, and up-to-date
  2. Log into your Portainer web UI
  3. Under Settings → App Templates, paste the below URL
  4. Head to Home → App Templates, and the list of apps will show up
  5. Select Mermaid Live Editor, fill in any config options, and hit Deploy

Template Import URL

https://raw.githubusercontent.com/Lissy93/portainer-templates/main/templates.json
Show Me demo

More install options in our documentation, or see mermaid-js/mermaid-live-editor for app-specific guidance.

Join our Discord! Netlify Status

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 MERMAIDRENDERERURL 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 MERMAIDKROKIRENDERERURL 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 MERMAIDANALYTICSURL build argument to your plausible instance, and MERMAIDDOMAIN to your domain.
Default is empty, disabling analytics.

To enable Mermaid Chart links and promotion

When building set the MERMAIDISENABLEDMERMAIDCHARTLINKS 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:

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

  • Node.js current LTS version
  • pnpm package manager. Install with corepack enable pnpm

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.

Serve Mermaid Live Editor on your own domain behind Caddy, Nginx or Traefik. Fill in your domain and copy the result. It's a starting point, some apps need their own base URL or extra headers set too.

Proxying mermaid-live-editor.example.com to http://mermaid-live-editor:8080

Add this to your Caddyfile

mermaid-live-editor.example.com {
	reverse_proxy http://mermaid-live-editor:8080
}

Check the logs first

Nine times out of ten the logs tell you exactly what went wrong.

  • In Portainer, go to Containers, click the container, then Logs. Or run docker logs mermaid-live-editor
  • Exit codes help too: 137 means killed, usually out of memory. 126 or 127 means the command inside the image is broken.

Port already in use

If deployment fails with "Bind for 0.0.0.0:8980 failed: port is already allocated", something else on your server is using that port.

  • Find what's using it: sudo ss -tlnp | grep :8980
  • Stop the other service, or pick a different host port. In 8980:8080 only the left number is yours to change, the right one belongs to the app.

Running but the page won't load

The container is up but nothing appears in your browser.

  • Use your server's real IP: http://your-server-ip:8980. The 0.0.0.0 link Portainer shows isn't a real address.
  • Give it a minute after first deploy, mermaid-live-editor can take a while to initialise.
  • Make sure your firewall allows the port, e.g. sudo ufw allow 8980

Image won't pull

Test the pull directly on the host: docker pull ghcr.io/mermaid-js/mermaid-live-editor:latest

  • "manifest unknown" means the tag no longer exists. This template uses latest, so try pinning a specific version instead.
  • "toomanyrequests" is the Docker Hub rate limit. Log in with docker login to raise it.
  • "no space left on device" means a full disk. Reclaim space with docker system prune

"exec format error"

This means the image was built for a different CPU architecture than your server.

  • This image supports: amd64, arm64
  • Check yours with uname -m: x86_64 is amd64, aarch64 is arm64. Raspberry Pi and other ARM boards are the usual culprits.

Container keeps restarting

The unless-stopped restart policy relaunches the app after every crash, so the real error can scroll past.

  • Check the logs right after a restart, the last few lines before it died are the useful ones.
  • Get the exit code with docker inspect mermaid-live-editor --format '{{.State.ExitCode}}'
  • Still stuck? Redeploy once with the restart policy set to no so the failure stays visible.

Data disappears when the container is recreated

This template doesn't define any volumes, so everything mermaid-live-editor saves lives inside the container and is lost on update or recreate.

  • Add a volume mapping for mermaid-live-editor's data folder before storing anything you care about.

Raise an issue

Found something which isn't working as it should? Here's how to report it.

A single container

Mermaid Live Editor runs as one container, the simplest kind of app here. Just the one image to pull and nothing else wired up alongside it.

The app image

An image is the app packed up ready to go, everything Mermaid Live Editor needs bundled into one download. This template pulls ghcr.io/mermaid-js/mermaid-live-editor:latest, which Docker fetches once (about 26 MB) and then starts your own copy from.

Where the image comes from

Docker pulls its images from registries, public libraries of ready-built apps. Mermaid Live Editor's comes from the GitHub Container Registry, published by mermaid-js.

Version tags

The bit after the colon in the image name is the version tag. Here it's latest, which always points at the newest build, so a redeploy can bump you to a newer release without you asking. Pin a specific tag if you would rather stay on one version.

Which machines it runs on

Every image is built for particular CPU types. This one ships for amd64, arm64, so it runs on both regular x86 servers and ARM boards like a Raspberry Pi.

Ports

A port is the door the app answers on. A mapping like 8980:8080 means it's reachable on port 8980 of your server, where the left number is yours to change and the right one belongs to the app. Once it's running, open http://your-server-ip:8980 in a browser. It opens:

  • 8980:8080, likely the web interface

No stored data

This template doesn't mount any storage, so whatever Mermaid Live Editor writes stays inside the container and is wiped if it's recreated or updated. That's fine for something stateless, but add a volume before trusting it with anything you want to keep.

Restart policy

The restart policy here is unless-stopped, so Docker restarts Mermaid Live Editor after a crash or reboot, but leaves it off when you stop it on purpose. You can change this on the deploy screen. The choices are no (never restart), on-failure (only after a crash), unless-stopped (restart unless you stop it), and always (bring it back no matter what).

Networking

Nothing custom is set, so Mermaid Live Editor sits on Docker's default bridge network: its own private space that reaches the outside world only through the ports it publishes.

Container name

Once it's deployed, Portainer names the container mermaid-live-editor. That's what you'll spot in the containers list and use in commands like docker logs mermaid-live-editor.

Platform

The platform is linux, the kind of system the container is built to run on. Docker and Portainer handle this on a normal Linux server.

Open source license

Mermaid Live Editor is open source, released under the MIT license. In plain terms the code is out in the open, so you're free to run it and change it to fit what you need.

Portainer app templates

Zooming out, this whole page comes from a Portainer app template: a short recipe telling Portainer how to set Mermaid Live Editor up. Add the template list to Portainer once, then deploying Mermaid Live Editor is a click rather than a wall of config.