Modern Mermaid：开源的 Mermaid 图表编辑器，浏览器本地实时渲染
Modern Mermaid 是一个基于 TypeScript 的 Mermaid.js 图表编辑器与预览器，遵循 MIT 协议开源。所有解析与渲染都在浏览器本地完成，无需注册或登录，代码托管在 GitHub：
https://github.com/gotoailab/modern_mermaid
功能特性
- 跨平台：基于浏览器访问，针对移动设备和平板优化，支持 PWA 离线使用。
- 实时预览：输入即渲染，支持自动语法验证、错误高亮与建议；编辑器和预览面板尺寸可调。
- 专业主题：内置 10+ 主题，覆盖线性浅色/深色、工业风、手绘风、吉卜力风、复古风等；支持渐变/纯色/图案背景，可自定义字体（含 Fira Code、JetBrains Mono 等）；提供完整深色模式并支持主题自动切换。
- 图表类型：流程图、时序图、类图、状态图、实体关系图、用户旅程图、甘特图、饼图、Git 版本图、思维导图、时间轴图、象限图。
- 标注工具：提供箭头、矩形、圆形、直线、文本等标注组件，可自定义标注颜色以匹配当前主题。
- 隐私优先：无需登录账号，所有处理均在浏览器本地执行，图表和数据不会上传至任何服务器。
- 多语言支持：界面支持 6 种语言，包含中文。
- 导出功能：支持 PNG（透明背景）、JPG（带背景）、SVG 格式导出；可一键复制图表到剪贴板；支持自定义分辨率导出高清晰图像；可一次导出多个图表；支持通过 URL 分享。
在线使用
在线环境可直接通过浏览器访问：
基本使用流程：
- 在左侧编辑器面板输入 Mermaid 图表代码。
- 图表在右侧实时渲染预览。
- 从工具栏选择主题、背景和字体进行自定义。
- 使用标注工具突出重要部分。
- 以指定格式下载或复制图表。
系统也提供了示例图表，可直接加载后编辑。
下载安装
Modern Mermaid 依赖 Node.js 20.19+ 或 22.12+，以及 npm、pnpm 或 yarn 包管理器。
# 克隆仓库
git clone https://github.com/gotoailab/modern_mermaid.git
cd modern_mermaid
# 安装依赖（推荐使用 pnpm）
pnpm install
# 或使用 npm，命令为：
npm install
# 或使用 yarn，命令为：
yarn install
# 启动开发服务器
pnpm dev
启动后通过 http://localhost:5173 访问应用。
构建生产版本：
# 构建生产版本
pnpm build
# 预览生产构建
pnpm preview