{"id":45261667,"url":"https://github.com/skydiver/mermaidjs-desktop-client","last_synced_at":"2026-02-21T00:27:54.942Z","repository":{"id":265532323,"uuid":"852545798","full_name":"skydiver/mermaidjs-desktop-client","owner":"skydiver","description":"Desktop editor for Mermaid diagrams with real-time preview, syntax highlighting, and SVG/PNG export","archived":false,"fork":false,"pushed_at":"2026-01-31T03:09:08.000Z","size":1469,"stargazers_count":11,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-31T18:33:35.471Z","etag":null,"topics":["desktop-app","desktop-application","mermaid","mermaid-diagrams","mermaidjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skydiver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2024-09-05T01:54:58.000Z","updated_at":"2026-01-31T03:09:11.000Z","dependencies_parsed_at":"2024-11-29T23:00:29.624Z","dependency_job_id":null,"html_url":"https://github.com/skydiver/mermaidjs-desktop-client","commit_stats":null,"previous_names":["skydiver/mermaidjs-desktop-client"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/skydiver/mermaidjs-desktop-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydiver%2Fmermaidjs-desktop-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydiver%2Fmermaidjs-desktop-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydiver%2Fmermaidjs-desktop-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydiver%2Fmermaidjs-desktop-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skydiver","download_url":"https://codeload.github.com/skydiver/mermaidjs-desktop-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydiver%2Fmermaidjs-desktop-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29668685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T00:11:43.526Z","status":"ssl_error","status_checked_at":"2026-02-20T23:52:33.807Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["desktop-app","desktop-application","mermaid","mermaid-diagrams","mermaidjs"],"created_at":"2026-02-21T00:27:54.287Z","updated_at":"2026-02-21T00:27:54.937Z","avatar_url":"https://github.com/skydiver.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MermaidJS Desktop Client\n\nMermaidJS Desktop Client is a desktop editor for [Mermaid](https://mermaid.js.org/) diagrams with real-time preview, syntax highlighting, and SVG/PNG export. Built with Tauri, it pairs a CodeMirror-based authoring experience with a live preview, file management helpers, and zoom controls for both editor and preview.\n\n# Table of Contents\n\n1. [Features](#features)\n2. [Prerequisites](#prerequisites)\n3. [Getting Started](#getting-started)\n4. [Building](#building)\n5. [Tooling](#tooling)\n6. [Project Structure](#project-structure)\n7. [Screenshots](#screenshots)\n8. [Acknowledgements](#acknowledgements)\n\n## Features\n\n- **Live editing** – Write Mermaid syntax with syntax highlighting, line wrapping, and tab indentation support.\n- **Instant preview** – Debounced rendering (300ms) keeps the preview in sync while typing, with friendly error feedback when diagrams fail to render.\n- **File workflow** – New, open, and save actions integrate with the native filesystem via Tauri dialog and fs plugins. Status bar tracks unsaved changes and last saved time.\n- **Built-in examples** – Quick-start templates for flowchart, class, sequence, entity-relationship, state, gantt, and git diagrams.\n- **Smart exports** – Save diagrams as PNG (1× and 2× scale) or SVG with built-in padding, white backgrounds, and automatic scaling (min 512px for 1×, 1024px for 2×).\n- **Keyboard shortcuts** – Standard shortcuts for file operations, editor zoom (Cmd/Ctrl+=/−/0), and help (F1).\n- **Editor zoom** – Zoom in/out and reset the code editor font size with keyboard shortcuts.\n- **Preview zoom** – Zoom diagrams with Ctrl+Scroll or toolbar controls.\n- **Help dialog** – Press F1 to view app info, keyboard shortcuts, and available diagram examples.\n- **Dark mode** – Toggle between light and dark themes. Mermaid diagrams, editor syntax highlighting, and UI chrome all adapt. Preference persists between launches.\n- **Resizable workspace** – Drag the divider to resize editor/preview panes or double-click to reset.\n- **Window persistence** – Window position, size, and maximized state persist between launches via Tauri store plugin.\n\n## Prerequisites\n\nMake sure the common Tauri requirements are installed:\n\n- [Node.js](https://nodejs.org/) 18 or newer\n- [pnpm](https://pnpm.io/) (preferred package manager for this repo)\n- [Rust toolchain](https://www.rust-lang.org/learn/get-started) with `cargo`\n- Platform-specific dependencies listed in the [Tauri docs](https://tauri.app/v1/guides/getting-started/prerequisites/) (e.g., Xcode Command Line Tools on macOS)\n\n## Getting Started\n\n```bash\n# Install dependencies\npnpm install\n\n# Run the desktop app with live reload\npnpm tauri dev\n```\n\nThe command above launches both the Vite dev server and the Tauri shell. For faster iteration on UI/preview features without native APIs, you can run the frontend standalone:\n\n```bash\npnpm dev\n```\n\nand open the reported URL (typically `http://localhost:5173`) in your browser.\n\n## Building\n\n```bash\n# Type-check and bundle the frontend\npnpm build\n\n# Produce a platform-specific production bundle\n# Creates .app on macOS, .exe installer on Windows, or .deb/.AppImage on Linux\npnpm tauri build\n```\n\n## Tooling\n\n- `pnpm clean` – Remove build artifacts (`dist/`, `src-tauri/target/`)\n- `pnpm lint` – Run [Biome](https://biomejs.dev/) linter and formatter checks\n- `pnpm lint:fix` – Automatically apply Biome fixes\n- `pnpm typecheck` – Type-check TypeScript without emitting files\n\n## Project Structure\n\n- `src/` – Frontend source (TypeScript/Vite)\n  - `editor/` – CodeMirror configuration (language support, theme, zoom)\n  - `preview/` – Mermaid rendering logic and zoom controls\n  - `toolbar/` – File operations, export handlers, examples menu\n  - `workspace/` – Resizable pane management\n  - `window/` – Theme management and persistence layer for window state\n  - `help/` – Help dialog with shortcuts and app info\n  - `examples/` – Built-in Mermaid diagram templates\n- `src-tauri/` – Tauri backend (Rust) with plugins for dialog, filesystem, store, and shell\n- `public/` – Static assets served by Vite (if added)\n\n## Screenshots\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/CJz8cVo.png\" alt=\"Editor and preview workspace\" width=\"30%\" /\u003e\n  \u003cimg src=\"https://i.imgur.com/pn6gfKd.png\" alt=\"Example diagrams menu\" width=\"30%\" /\u003e\n  \u003cimg src=\"https://i.imgur.com/UJt3kFq.png\" alt=\"Export options\" width=\"30%\" /\u003e\n\u003c/p\u003e\n\n## Acknowledgements\n\nBuilt with [Tauri 2](https://tauri.app/) (v2.9+), [Vite 7](https://vitejs.dev/), [CodeMirror 6](https://codemirror.net/6/), [Mermaid 11](https://mermaid.js.org/) (v11.12+), and [Biome](https://biomejs.dev/) for linting/formatting.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydiver%2Fmermaidjs-desktop-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskydiver%2Fmermaidjs-desktop-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydiver%2Fmermaidjs-desktop-client/lists"}