VisualMaid

Self-hosted Mermaid editor. No diagram limits, no ads, no account required. Available as a desktop app (Electron) and as a web app (Express + browser).

Requirements

• Node.js v22.5 or higher (v24 recommended)

Quick start (desktop)

npm install
npm run electron:dev        # Electron + Vite dev with HMR — for development
npm run electron:preview    # Electron + built frontend — local production test
npm run electron:build      # Creates NSIS/DMG/AppImage installer in dist-electron/

Web mode (browser only)

npm install
npm run dev     # Express server on :3001 + Vite HMR on :5173 (concurrent)
npm start       # production web only: Express serves client/dist/ on :3001

Frontend build

npm run build   # compiles the frontend into client/dist/

Structure

VisualMaid/
├── .github/
│   └── workflows/
│       └── release.yml           CI/CD: build & publish release on tag push
├── electron/
│   ├── main.js                   Electron main process (starts Express, opens BrowserWindow)
│   └── preload.js                Preload script (contextIsolation, sandbox)
├── server/
│   ├── index.js                  Express entry point (:3001)
│   ├── i18n.js                   Localized API messages (IT/EN/ES/FR) via Accept-Language
│   ├── db.js                     SQLite via node:sqlite (built-in Node.js)
│   └── routes/
│       ├── diagrams.js           CRUD /api/diagrams
│       ├── folders.js            CRUD /api/folders
│       ├── dataTransfer.js       export / import / full data wipe
│       └── settings.js           GET/PUT app settings (including `locale`)
├── client/
│   ├── index.html
│   ├── vite.config.ts
│   ├── tailwind.config.js
│   ├── tsconfig.json
│   └── src/
│       ├── App.tsx
│       ├── main.tsx
│       ├── index.css
│       ├── api.ts                Fetch wrapper, Accept-Language header, shared types
│       ├── i18n.ts               i18next bootstrap (fallback: Italian)
│       ├── locales/              it.json / en.json / es.json / fr.json — UI strings
│       ├── lib/
│       │   ├── dashboardPathStorage.ts  Persist last visited folder path
│       │   ├── formatDate.ts            Short dates based on locale
│       │   └── mermaidLanguage.ts       CodeMirror Mermaid language definition
│       ├── hooks/
│       │   ├── useDrag.tsx       Drag-and-drop logic for diagrams and folders
│       │   └── useSelection.ts   Multi-select state management
│       ├── pages/
│       │   ├── Dashboard.tsx     Grid with folders, search, drag-and-drop
│       │   └── Editor.tsx        Fullscreen canvas + overlay code panel
│       └── components/
│           ├── CanvasToolbarMermaidControls.tsx
│           ├── CodeEditor.tsx
│           ├── ConfirmDialog.tsx
│           ├── ContextMenu.tsx
│           ├── DiagramCanvas.tsx
│           ├── DiagramCard.tsx
│           ├── DragBatchStack.tsx
│           ├── FlagIcon.tsx
│           ├── FolderCard.tsx
│           ├── MermaidPreview.tsx
│           ├── MoveToDialog.tsx
│           ├── ScrollingTitle.tsx
│           ├── SettingsPopover.tsx
│           ├── TextInputDialog.tsx
│           └── Toast.tsx
├── package.json
├── LICENSE
└── diagrams.sqlite               Auto-created on first run (web mode)

Notes

• Diagrams are stored in diagrams.sqlite at the root (web) or in userData (packaged Electron).
• Supports all Mermaid diagram types: flowchart, sequence, class, ER, gantt, pie, etc.
• Export to SVG, PNG, JPEG, WebP and .mmd available in the editor.
• Save with Ctrl+S / Cmd+S.
• Optional auto-save (toggle in settings): saves ~1.5 s after the last edit.
• Folders and subfolders with drag-and-drop to organize diagrams.

License & copyright

Copyright © 2026 Marco Simone Cannizzaro (Retr0_). This project is released under the GNU Affero General Public License v3.0 only (SPDX: AGPL-3.0-only). The full text is in the LICENSE file.

Distributing or making a modified version available over a network requires offering users the corresponding source code, as per the Affero license.