🧜‍♂️ Mermaid Monorepo Guide

Context: Deep-dive into the local Mermaid setup, covering the Core Monorepo, Live Editor, and CLI. Ports: 5514X range assigned for local dev.

---

🧠 Mermaid Core (Monorepo)

Path: /home/dv/merms/mermaid Tech Stack: pnpm (workspaces), Vite + esbuild (hybrid build), Docker, Cypress (E2E), Vitest (Unit), Langium (Parsers).

🔌 Ports

• Dev Server: 55145 (was 9000)
• Docs (Vitepress): 55146 (was 3333)

🛠️ Key Commands

• npx pnpm install 📦 Install dependencies (root)
• npx pnpm run dev 🚀 Start dev server (Esbuild/Vite hybrid)
• npx pnpm run docs:dev 📚 Start documentation server
• ./run 🐳 Docker helper script (e.g., ./run pnpm install)
• npx pnpm run build 🏗️ Build all packages
• npx pnpm run test 🧪 Run lints & unit tests

🧬 Structure

• packages/mermaid: Core library logic
• packages/parser: Langium grammar definitions
• demos: Static HTML files for testing diagrams
• .esbuild/server.ts: Custom dev server logic

---

🎨 Mermaid Live Editor

Path: /home/dv/merms/mermaid-live-editor Tech Stack: Svelte 5 (Runes), Vite, TailwindCSS, CodeMirror / Monaco.

🔌 Ports

• Dev Server: 55144 (was 3000)

🛠️ Key Commands

• npx pnpm install 📦 Install dependencies
• npx pnpm run dev 🚀 Start dev server (Hot Module Reload enabled)
• npx pnpm run build 🏗️ Production build
• npx pnpm run format 💅 Prettier/Lint fix

⚡ implementation Details

• State Management: Uses Svelte 5 runes ($state, $derived)
• Icons: unplugin-icons with FileSystemLoader
• Config: vite.config.js handles full reloads for stability

---

🖥️ Mermaid CLI

Path: /home/dv/merms/mermaid-cli Tech Stack: Node.js, Puppeteer (Chromium), Vite.

🔌 Ports

• Dev Server: 55141 (Internal dev/test server)

🛠️ Key Commands

• npm install 📦 Install dependencies (Standard npm)
• npm run dev 🚀 Start internal dev server
• npm run test 🧪 Run Jest tests
• npm run test:cli 🤖 Run CLI specific integration tests
• ./src/cli.js ⌨️ Direct CLI entry point

⚙️ Workflow

1. Spins up a local web server (Port 55141)
2. Puppeteer launches headless Chrome
3. Renders diagram SVG/PNG from input definitions

---

🔗 Common Ops

Dependency Management:

• Core & Live Editor use pnpm (strict, fast)
• CLI uses npm (legacy/compat)

Dev Loop:

1. Start Core dev (55145) to hack on rendering logic
2. Start Live Editor (55144) to test UI/UX with local changes (requires linking if needed)
3. Start CLI (55141) to verify headless generation