Modern Mermaid：一款现代化的Mermaid图表编辑器

Modern Mermaid 是一款免费开源、功能强大且美观的现代化 Mermaid.js 图表编辑器和预览器。

Modern Mermaid 采用 TypeScript 语言开发，遵循 MIT 开源协议，代码托管在 GitHub：

https://github.com/gotoailab/modern_mermaid

功能特性

跨平台：基于浏览器访问，并且针对移动设备和平板进行了优化，支持离线使用（PWA）。
实时预览：用户输入的同时进行渲染预览，支持自动语法验证和错误高亮及建议，可以调整编辑器和预览面板大小。
专业主题：10+ 精美主题（线性浅色/深色、工业风、手绘风、吉卜力风、复古风等），自定义背景（渐变、纯色和图案），字体选择（包括 Fira Code、JetBrains Mono 等）支持完整的深色模式，自动主题切换。

图表类型：包括流程图、时序图、类图、状态图、实体关系图、用户旅程图、甘特图、饼图、Git 版本图、思维导图、时间轴图、象限图等。

标注工具：提供箭头、矩形、圆形、直线以及文本标注等绘图工具，自定义标注颜色以匹配主题。
隐私优先：不需要登录账号，所有处理过程都在浏览器本地执行，图表和数据不会上传任何服务器。
多语言支持：系统界面支持 6 种语言，包括中文。
导出功能：导出 PNG（透明）、JPG（带背景）、SVG 格式图表，支持一键复制图表到剪贴板，支持自定义分辨率导出超清晰图像，可以一次导出多个图表，支持通过 URL 进行分享。

在线使用

Modern Mermaid 提供了一个在线环境，通过浏览器访问以下地址即可：

https://modern-mermaid.live/

一个基本的使用流程如下：

输入 Mermaid 代码：在左侧编辑器面板中输入 Mermaid 图表代码。
查看实时预览：图表在右侧实时渲染。
自定义：从工具栏选择主题、背景和字体。
标注：使用标注工具突出重要部分。
导出：以指定的格式下载或复制图表。

另外，也可以使用系统提供的示例图表进行编辑。

下载安装

Modern Mermaid 需要依赖 Node.js 20.19+ 或者 22.12+ 版本，以及 npm、pnpm 或者 yarn 包管理器。

bash 复制代码

# 克隆仓库
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 访问应用。

生产版本的构建命令如下：

bash 复制代码

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview