Add Mermaid Local Editor (Custom Template)

.changeset/crazy-jobs-see.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/mermaid-local-editor': patch
+---
+
+feat: add local editor package for Mermaid diagrams

package.json

@@ -15,9 +15,15 @@
     "git graph"
   ],
   "scripts": {
+    "clean": "rimraf packages/mermaid/dist",
+    "copy:dompurify": "cpy node_modules/.pnpm/dompurify@*/node_modules/dompurify/dist/purify.min.js packages/mermaid/dist/mermaid-local-editor/vendor/ --flat",
+    "copy:mermaid": "cpy packages/mermaid/dist/mermaid.min.js packages/mermaid/dist/mermaid-local-editor/vendor/ --flat",
+    "copy:editor": "cpy \"packages/mermaid-local-editor/static/**/*\" packages/mermaid/dist/mermaid-local-editor",
+    "serve:dist": "sirv packages/mermaid/dist/mermaid-local-editor --port 8081 --dev --no-clear",
     "build": "pnpm build:esbuild && pnpm build:types",
     "build:esbuild": "pnpm run -r clean && tsx .esbuild/build.ts",
     "build:mermaid": "pnpm build:esbuild --mermaid",
+    "build:mermaid:full": "pnpm clean && pnpm build:mermaid && pnpm copy:editor && pnpm copy:mermaid && pnpm copy:dompurify && pnpm serve:dist",
     "build:viz": "pnpm build:esbuild --visualize",
     "build:types": "pnpm --filter mermaid types:build-config && tsx .build/types.ts",
     "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
@@ -133,6 +139,7 @@
     "prettier-plugin-jsdoc": "^1.3.3",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^6.0.5",
+    "sirv-cli": "^3.0.1",
     "start-server-and-test": "^2.1.3",
     "tslib": "^2.8.1",
     "tsx": "^4.20.6",

packages/mermaid-local-editor/README.md

@@ -0,0 +1,74 @@
+# Mermaid Local Editor
+
+Standalone local editor for Mermaid diagrams.
+Runs entirely from `dist/` with no external dependencies.
+
+---
+
+## Usage
+
+```sh
+pnpm build:mermaid:full
+```
+
+---
+
+## Build Pipeline
+
+The `build:mermaid:full` command performs the following steps:
+
+1. **Clean**
+
+   Removes the existing build output:
+
+   ```sh
+   pnpm clean
+   ```
+
+2. **Build Mermaid**
+
+   Compiles Mermaid using the repository build pipeline:
+
+   ```sh
+   pnpm build:mermaid
+   ```
+
+3. **Copy Editor**
+
+   Copies the local editor sources into the distribution directory:
+
+   ```sh
+   pnpm copy:editor
+   ```
+
+4. **Bundle Dependencies**
+
+   Copies required runtime dependencies into the editor bundle:
+
+   ```sh
+   pnpm copy:mermaid
+   pnpm copy:dompurify
+   ```
+
+5. **Serve**
+
+   Starts a local static server:
+
+   ```sh
+   pnpm serve:dist
+   ```
+
+---
+
+## Output
+
+After build, the editor is available at [`packages/mermaid/dist/mermaid-local-editor/`](../mermaid/dist/mermaid-local-editor):
+
+---
+
+## Notes
+
+- No external CDN dependencies are used
+- DOMPurify is bundled locally
+- The editor is fully offline-capable
+- Designed to run directly from the `dist/` directory

packages/mermaid-local-editor/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@mermaid-js/mermaid-local-editor",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module"
+}

packages/mermaid-local-editor/static/app.js

@@ -0,0 +1,80 @@
+import { initMermaid, state, IS_E2E } from './js/config.js';
+import { createStorage } from './js/storage.js';
+import { renderDiagram } from './js/renderer.js';
+import { setupUI, refreshList } from './js/ui.js';
+import { createNavigation } from './js/navigation.js';
+
+initMermaid();
+
+const srcPanel = document.getElementById('srcPanel');
+const preview = document.getElementById('preview');
+const diagramsSelect = document.getElementById('diagrams');
+const nameInput = document.getElementById('name');
+const storage = createStorage();
+const navigation = createNavigation({
+  state,
+  preview,
+  srcPanel,
+  applyTransform,
+});
+
+function render() {
+  void renderDiagram({
+    srcValue: srcPanel.value,
+    preview,
+    state,
+    IS_E2E,
+    applyTransform,
+    rebuildNavNodes: navigation.rebuildNavNodes,
+  });
+}
+
+function load(name) {
+  storage.setCurrent(name);
+  const d = storage.diagrams[name];
+
+  srcPanel.value = d.src;
+
+  // restore the view
+  state.scale = d.view?.scale ?? 1;
+  state.panX = d.view?.panX ?? 0;
+  state.panY = d.view?.panY ?? 0;
+
+  refreshList({ diagramsSelect, nameInput, storage });
+  render();
+  requestAnimationFrame(applyTransform);
+}
+
+function applyTransform() {
+  if (!state.iframeRef) {
+    return;
+  }
+
+  const svg = state.iframeRef.contentDocument?.querySelector('svg');
+  if (!svg) {
+    return;
+  }
+
+  state.panY = Math.max(-20000, Math.min(20000, state.panY));
+  state.panX = Math.max(-20000, Math.min(20000, state.panX));
+
+  svg.style.transform = `translate(${state.panX}px, ${state.panY}px) scale(${state.scale})`;
+
+  storage.updateCurrent({
+    view: { scale: state.scale, panX: state.panX, panY: state.panY },
+  });
+}
+
+setupUI({
+  src: srcPanel,
+  diagramsSelect,
+  nameInput,
+  storage,
+  state,
+  render,
+  load,
+  applyTransform,
+});
+
+navigation.setupKeyboardNav();
+load(storage.current);

packages/mermaid-local-editor/static/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Mermaid Local Editor</title>
+
+    <link rel="stylesheet" href="./styles.css" />
+
+    <script src="./vendor/mermaid.min.js"></script>
+    <script src="./vendor/purify.min.js"></script>
+
+    <script type="module" src="./app.js"></script>
+  </head>
+  <body>
+    <div id="toolbar">
+      <button id="toggleToolbar" title="Toggle toolbar">☰</button>
+      <select id="diagrams"></select>
+      <input id="name" placeholder="Enter diagram name" />
+      <button id="save">💾 Save</button>
+      <button id="new">➕ New</button>
+      <button id="del">🗑 Delete</button>
+      <button id="resetView">↺ Reset View</button>
+      <button id="exportSvg">⬇ Export SVG</button>
+    </div>
+
+    <div id="main">
+      <textarea id="srcPanel"></textarea>
+      <div id="preview"></div>
+    </div>
+  </body>
+</html>

packages/mermaid-local-editor/static/js/config.js

@@ -0,0 +1,24 @@
+/* global mermaid */
+
+export const IS_E2E = navigator.webdriver || location.search.includes('graph=');
+
+export function initMermaid() {
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'dark',
+    securityLevel: 'strict',
+    deterministicIds: true,
+    fontFamily: 'Arial',
+    htmlLabels: false,
+    flowchart: {
+      useMaxWidth: false,
+    },
+  });
+}
+
+export let state = {
+  scale: 1,
+  panX: 0,
+  panY: 0,
+  iframeRef: null,
+};

packages/mermaid-local-editor/static/js/navigation.js

@@ -0,0 +1,96 @@
+export function createNavigation({ state, preview, srcPanel, applyTransform }) {
+  let navNodes = [];
+  let navIndex = 0;
+
+  function rebuildNavNodes() {
+    navNodes = [];
+    navIndex = 0;
+
+    const svg = state.iframeRef?.contentDocument?.querySelector('svg');
+    if (!svg) {
+      return;
+    }
+
+    navNodes = [...svg.querySelectorAll('g.node')];
+    navIndex = 0;
+
+    if (navNodes.length) {
+      highlightCurrentNode();
+      centerCurrentNode();
+    }
+  }
+
+  function highlightCurrentNode() {
+    const svg = state.iframeRef?.contentDocument?.querySelector('svg');
+    if (!svg) {
+      return;
+    }
+
+    svg
+      .querySelectorAll('g.node.selected-node')
+      .forEach((n) => n.classList.remove('selected-node'));
+
+    const node = navNodes[navIndex];
+    if (node) {
+      node.classList.add('selected-node');
+    }
+  }
+
+  function centerCurrentNode() {
+    const node = navNodes[navIndex];
+    if (!node) {
+      return;
+    }
+
+    const nodeRect = node.getBoundingClientRect();
+    const contRect = preview.getBoundingClientRect();
+
+    const nodeCenterY = nodeRect.top + nodeRect.height / 6;
+    const contCenterY = contRect.top + contRect.height / 6;
+    const deltaY = contCenterY - nodeCenterY;
+
+    // Intentionally biased to upper-left instead of strict center,
+    // so forward nodes remain visible in LR / TD diagrams.
+    const nodeCenterX = nodeRect.left + nodeRect.width / 6;
+    const contCenterX = contRect.left + contRect.width / 6;
+    const deltaX = contCenterX - nodeCenterX;
+
+    state.panX += deltaX;
+    state.panY += deltaY;
+
+    applyTransform();
+  }
+
+  function setupKeyboardNav() {
+    window.addEventListener('keydown', (e) => {
+      if (document.activeElement === srcPanel) {
+        return;
+      }
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (!navNodes.length) {
+          rebuildNavNodes();
+        }
+        navIndex = Math.min(navIndex + 1, navNodes.length - 1);
+        highlightCurrentNode();
+        centerCurrentNode();
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (!navNodes.length) {
+          rebuildNavNodes();
+        }
+        navIndex = Math.max(navIndex - 1, 0);
+        highlightCurrentNode();
+        centerCurrentNode();
+      }
+    });
+  }
+
+  return {
+    rebuildNavNodes,
+    setupKeyboardNav,
+  };
+}