repository·develop·Indexed 24 days ago
https://github.com/mermaid-js/mermaid-live-editorA web-based tool for editing, previewing, and sharing Mermaid diagrams such as flowcharts, sequence diagrams, and gantt charts in real time. The editor supports exporting diagrams as SVGs, generating shareable links, and provides features for history management, automatic saving, and external content loading via GitHub Gists or file URLs. It can be deployed using Docker or Docker Compose.
You can run the pre-built Mermaid Live Editor image using Docker. Note that the published image uses default environment variables that cannot be overridden at runtime; you must build your own image if you need custom configurations.
docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editorpnpm installed (enable pnpm via corepack enable pnpm).docker build process. Use these arguments to configure rendering services, analytics, and promotional features.You can run the Mermaid Live Editor locally using Docker Compose. The configuration builds the mermaid-dev target and maps the source code for live development.
Default Port Mappings:
3000: The main application port.24678: Internal service port.version: '3.7'
services:
mermaid:
build:
context: .
target: mermaid-dev
volumes:
- ./src:/app/src
ports:
- 3000:3000
- 24678:24678The State interface defines the configuration and current status of the Mermaid Live Editor session. It controls the diagram code, rendering options, and view settings.
Key properties include:
code: The raw text input.mermaid: The processed Mermaid syntax.updateDiagram: Boolean to trigger diagram updates.rough: Enables/disables rough diagram rendering.panZoom: Enables/disables pan and zoom functionality.grid: Enables/disables the background grid.editorMode: Sets the editor to either 'code' or 'config' mode.pan: An object containing { x: number, y: number } for viewport positioning.zoom: A number representing the current zoom level.loader: Configuration for loading external content via LoaderConfig.The LoaderConfig type allows the editor to fetch diagram data from external sources. It supports two types of loaders:
config.url (the Gist URL).config.codeURL (the URL of the diagram code).config.configURL (the URL of the Mermaid configuration).Import a list of history entries into the current stores. The function routes entries to either the 'auto' or 'manual' store based on their type property and skips entries with IDs that already exist.
Returns a RestoreResult object indicating the outcome.
You can manually save the current state to history or rely on the automatic saving mechanism.
addManualEntry(state: State): Saves the provided State to the manual history store. Returns true if the entry was added, or false if it was a duplicate of the most recent entry.addAutoEntry(state: State): Saves the provided State to the auto history store (limited to 30 entries). Returns true if added, false if it duplicated the most recent entry.copyToClipboard to copy a string to the user's clipboard. It attempts to use the modern navigator.clipboard API and automatically falls back to a document.execCommand('copy') method using a hidden textarea if the modern API fails.initHandler function performs the standard startup sequence for the editor. It applies migrations, loads state from the URL hash, initializes loading states, synchronizes the diagram, sets up URL subscriptions, and initializes analytics.