# Mermaid Live Editor: Browser-Based Diagram Preview and Docker Self-Hosting > The Mermaid Live Editor is the official browser-based tool for writing, previewing, and sharing Mermaid diagrams. It runs as a hosted service at mermaid.live and can be self-hosted with Docker, making it useful for teams who need diagram tooling in air-gapped or private environments. **mermaid-js/mermaid-live-editor** — Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. - Repository: https://github.com/mermaid-js/mermaid-live-editor - Website: https://mermaid.live - Stars: 6,834 · Forks: 1,174 - Language: TypeScript - License: MIT - Published: 2026-09-22 · Updated: 2026-09-22 · Language: en - Canonical page: https://hysenlabs.com/projects/mermaid-js-mermaid-live-editor ## What the Mermaid Live Editor Does and Who Uses It Mermaid is a text-based diagramming syntax that renders flowcharts, sequence diagrams, Gantt charts, and other diagram types from plain text definitions. The Mermaid Live Editor is the official web application for the mermaid-js project that provides a real-time editing environment for this syntax. The hosted version at mermaid.live is the primary way users interact with the tool. The editor pane on the left accepts Mermaid syntax; the preview updates on every change. Diagrams can be exported as SVG files, or a shareable link can be generated so someone else can view the diagram without editing it, or edit it and return a modified link. The typical user is an engineer or technical writer who needs to produce or share a system diagram, sequence diagram, or architecture chart. The text format makes Mermaid diagrams easy to store in version control alongside code. The live editor serves as a quick drafting environment before the diagram text is committed to a repository or embedded in documentation. ## Core Features: Real-Time Preview, SVG Export, and Link Sharing The README lists four capabilities that define the editor. First, editing flowcharts, sequence diagrams, and Gantt diagrams with real-time preview. Second, saving results as SVG. Third, generating a viewer link that displays the diagram to anyone with the URL. Fourth, generating an editor link that allows someone else to modify the diagram and return a new link. The shareable link encodes the diagram definition in the URL. This means diagrams can be shared as a single link without any account or server-side storage. It also means that links can become long for complex diagrams. The SVG export produces a standalone file suitable for documentation, presentations, or embedding in web pages. The README mentions PNG and SVG export through a rendering service. The default rendering service is mermaid.ink, a public service; setting the MERMAID_RENDERER_URL build argument to an empty string disables both the PNG and SVG links under the Actions area when building a self-hosted instance. The editor also integrates with Kroki, a multi-format diagram rendering service. The default Kroki endpoint is kroki.io. Both the renderer URL and the Kroki URL are configurable at build time in the Docker image. ## Running the Editor: Hosted Version, Docker Image, and Development Mode The hosted version at mermaid.live requires no setup. For self-hosting, the README documents a Docker image published to the GitHub Container Registry. To run the published image on port 8000: ```bash docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor ``` The README notes that the published image is built with default environment variables and cannot be overridden at runtime. If you need to change the renderer URL, Kroki endpoint, or analytics configuration, you must build the image yourself. For local development, the repository provides a Docker Compose configuration: ```bash docker compose up --build ``` This builds the development target and serves the app at localhost:3000 with hot reloading. Source changes in the src/ directory are reflected immediately through a volume mount. The README also documents running without Docker using pnpm: ```sh pnpm install pnpm dev -- --open ``` The pnpm approach requires Node.js at the current LTS version and pnpm installed via corepack enable pnpm. Running pnpm dev -- --open starts the SvelteKit development server and opens the browser automatically. ## Self-Hosting Configuration: Build Arguments and Customization When building your own Docker image, the Dockerfile exposes several build arguments that control behavior. MERMAID_RENDERER_URL sets the rendering service; the default is https://mermaid.ink. Setting this to an empty string removes the PNG and SVG export links from the Actions area. MERMAID_KROKI_RENDERER_URL sets the Kroki instance. The default is https://kroki.io. Setting it to an empty string disables the Kroki link. MERMAID_ANALYTICS_URL and MERMAID_DOMAIN configure a Plausible analytics instance. Both default to empty, which disables analytics entirely in a self-hosted deployment. This is the default for privacy-conscious self-hosters. MERMAID_IS_ENABLED_MERMAID_CHART_LINKS, when set to true, adds a button to save diagrams to Mermaid Chart (the commercial product from the mermaid-js organization) and shows a promotional banner. This is disabled by default. The Privacy.svelte component controls the security modal that appears when users click the security link. The README notes that the modal's content assumes all four services (analytics, renderer, Kroki, Mermaid Chart) are enabled. If you disable some of them in your self-hosted build, you should update Privacy.svelte to match. This build-time-only configuration model is a real constraint: any change to renderer or analytics settings requires rebuilding the Docker image rather than passing environment variables at runtime. ## Technical Stack and Release Process The application is built with SvelteKit and deployed as a static site behind nginx. The Dockerfile builds the app in a multi-stage process: a Node 24 Alpine image runs pnpm install and pnpm build, then an nginx image serves the compiled output from docs/ directory. The nginx configuration is in nginx.conf in the repository root. The package.json version is 2.0.67. Releases happen through Netlify's CI integration: when a pull request targeting the master branch is merged, Netlify automatically deploys the result. There are no GitHub Releases in the repository; version tracking happens through the package.json. The test suite includes both unit tests via vitest and end-to-end tests via Playwright. The build process also produces a separate embed bundle (vite.embed.config.js) which allows embedding the live editor as an iframe in other pages. The last push was on 2026-09-26, reflecting active maintenance close to the review date. ## Limitations: Runtime Configuration and Security Considerations The most significant operational limitation is the build-time configuration model described above. Teams that need to frequently change the renderer endpoint or toggle features must maintain a build pipeline for their Docker image rather than adjusting environment variables on a running container. The security model for diagram links deserves attention for enterprise deployments. Diagram definitions are encoded in the URL, which means they transit through any logging or monitoring infrastructure that inspects URLs. For sensitive architecture diagrams, this may be a reason to avoid the shareable link feature or to use a fully self-hosted instance without any external rendering service. The README does not document content security policy configuration or authentication for the self-hosted instance. If your use case requires access control (for example, an internal team tool), you would need to add authentication at the reverse proxy level rather than within the application itself. The platform/amd64 flag on the Docker run command is worth noting for teams running on ARM hosts. The published image targets linux/amd64; running it on ARM (for example an Apple Silicon Mac or an ARM-based cloud instance) adds emulation overhead. ## Mermaid Live Editor vs VS Code Extensions and PlantUML Editors VS Code extensions like the Mermaid Preview extension render diagrams inline in the editor without opening a browser. The trade-off is that they render locally and do not generate shareable links. For individual developer workflow, the VS Code extension is faster; for sharing and collaboration, the live editor is better suited. PlantUML is an alternative text-based diagramming format with its own web-based editor. The two tools cover overlapping diagram types (sequence diagrams, Gantt charts, class diagrams) but use different syntax and different rendering infrastructure. PlantUML requires a Java-based rendering server; Mermaid renders in the browser using JavaScript. The Mermaid Live Editor is simpler to self-host because it has no Java runtime dependency. The Mermaid Live Editor is the reference implementation for testing Mermaid syntax, which is a specific advantage: if a Mermaid diagram renders correctly in the live editor, it will render correctly in any environment that uses the same Mermaid library version. ## License and Project Status The repository is MIT-licensed. The last push was on 2026-09-26, and the project receives regular commits from the mermaid-js organization. The live editor is the official reference implementation from the same organization that maintains the Mermaid diagram library itself. Changes to the Mermaid syntax or rendering pipeline are reflected in the live editor as they are released. This close alignment with the core library means the hosted version always reflects the current Mermaid feature set. For teams evaluating self-hosting, the MIT license imposes no restrictions on private deployment. The only practical consideration is the maintenance cost of keeping a custom Docker build current with upstream changes as the Mermaid library continues to add diagram types. ## Conclusion The Mermaid Live Editor is the right tool when you need to write or share Mermaid diagrams quickly without setting up a local environment, or when your team wants a self-hosted diagram editor with configurable rendering backends. It is not the right tool when you need offline desktop access without Docker or when you want to embed diagram editing inside a third-party application. Before self-hosting, check whether you need to customize the renderer URL or disable Kroki: the default Docker image bakes in the public rendering endpoints and cannot be reconfigured at runtime. ## FAQ ### Is the Mermaid Live Editor free? The hosted version at mermaid.live is free to use. The repository is MIT-licensed, which means anyone can self-host it at no cost. The commercial Mermaid Chart product is separate; the live editor's integration with it is disabled by default. ### What is the Mermaid Live Editor used for? It is used for writing Mermaid diagram syntax in a browser and seeing a real-time preview, then exporting the result as SVG or generating a shareable link. The README lists flowcharts, sequence diagrams, and Gantt diagrams as the supported types. ### Is there an online editor for Mermaid code? Yes, mermaid.live is the official online editor maintained by the mermaid-js project. The README also documents a Docker image for teams that need a self-hosted deployment. ### How do I use the Mermaid Live Editor? Open mermaid.live in a browser and type Mermaid syntax in the left editor pane. The preview updates automatically. Use the Actions area to export as SVG or to copy a shareable link. For self-hosting, run the Docker image with the docker run command documented in the README. ### Is the Mermaid Live Editor secure for internal diagrams? Diagram content is encoded in the URL when using shareable links, which means it passes through any infrastructure that logs URLs. For sensitive content, the README recommends self-hosting with the public renderer and Kroki endpoints disabled by setting the relevant build arguments to empty strings. ## Sources - [Issues](https://github.com/mermaid-js/mermaid-live-editor/issues) - [License: MIT](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/LICENSE) - [mermaid-js/mermaid-live-editor on GitHub](https://github.com/mermaid-js/mermaid-live-editor) - [Project website](https://mermaid.live) - [README](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/mermaid-js-mermaid-live-editor