---
title: "Deploy mermaid-live-editor"
description: "JavaScript based diagramming and charting tool"
category: "Other"
url: https://railway.com/deploy/mermaid-live-editor
---

# Deploy mermaid-live-editor

JavaScript based diagramming and charting tool

**[Deploy mermaid-live-editor on Railway](https://railway.com/template/mermaid-live-editor)**

- **Creator:** talosdeus's Projects
- **Category:** Other
- **Total deploys:** 5

## Template content

### mermaid-live-editor https://mermaid.live/favicon.svg

- **Image:** ghcr.io/mermaid-js/mermaid-live-editor
- **Public domain:** Yes

## Documentation

# Deploy and Host mermaid-live-editor on Railway

**mermaid‑live‑editor** is an open‑source, browser‑based IDE for the Mermaid diagramming language that provides a split‑pane markdown editor and real‑time rendered preview. It lets individuals and teams design flowcharts, sequence diagrams, ERDs, and more, then export to PNG/SVG or embed directly in docs and wikis—all without installing native graphing tools.

## About Hosting mermaid-live-editor

Running mermaid‑live‑editor onRailway gives you a stateless, auto‑scaling service that serves a pre‑built static SPA plus a lightweight Node/Express back‑end for on‑the‑fly diagram rendering (via the `@mermaid-js/mermaid-cli`).  Deployment typically involves cloning the upstream repository, installing Node ≥ 18 LTS dependencies, executing `pnpm run build`, and configuring Railway to expose port 9000.  Because the editor is pure front‑end and uses browser storage for drafts, no persistent database is required, keeping costs minimal and cold‑starts fast.  Environment variables are optional—set `BASE_PATH` if you want the app to live under a custom sub‑path.

## Common Use Cases

* **Technical documentation hubs** where engineers collaboratively draft sequence or architecture diagrams.
* **On‑call runbooks** that embed up‑to‑date flowcharts without committing binary images to repos.
* **Product or curriculum demos** that need an interactive diagram sandbox for workshops and tutorials.

## Dependencies for mermaid-live-editor Hosting

* **Node.js 18 LTS** (or newer) runtime for build and optional SSR.
* **pnpm** or **npm** package manager to install JavaScript dependencies.

### Deployment Dependencies

* Upstream repository: [https://github.com/mermaid-js/mermaid-live-editor](https://github.com/mermaid-js/mermaid-live-editor)
* Quick‑deploy template (community): [https://railway.app/new/template/mermaid-live-editor](https://railway.app/new/template/mermaid-live-editor)

### Implementation Details 

```bash
# Example Railway build & start commands
railway run pnpm i --frozen-lockfile
railway run pnpm run build
railway run pnpm run start -- --port=$PORT
```

Optional environment variables:

| Variable    | Purpose                                | Default |
| ----------- | -------------------------------------- | ------- |
| `PORT`      | Port exposed by Railway                | 9000    |
| `BASE_PATH` | Serve app under sub‑path (e.g. `/app`) | `/`     |

## Why Deploy mermaid-live-editor on Railway?



mermaid-live-editor is primarily a front‑end SPA with optional on‑the‑fly image rendering, so it thrives on Railway’s scale‑to‑zero model. Containers sleep automatically when no one is editing diagrams, cutting idle costs to near‑zero, yet wake in seconds when traffic returns. During spikes—like workshops or hackathons—Railway’s horizontal autoscaling spins up extra instances without manual tuning. Combined with per‑second billing, built‑in HTTPS, and global edge routing, you get an always‑fast, always‑secure diagram sandbox while only paying for the resources you actually use.




## Similar templates

- [Rocky Linux](https://railway.com/deploy/rocky-linux) — [Jul'26] Hosted Rocky Linux 9 workspace with SSH and persistent storage. 🚀
- [Foundry Virtual Tabletop](https://railway.com/deploy/X5tR6G) — A Self-Hosted & Modern Roleplaying Platform
- [Letta Code Remote](https://railway.com/deploy/letta-code-remote) — Run a Letta Code agent 24/7. No inbound ports, just deploy.

Open this page in a browser: https://railway.com/deploy/mermaid-live-editor