项目概述

Mermaid 在线图表导出器是一个基于 Web 的工具，用于创建和导出 Mermaid 图表。该项目提供了一个简洁的在线编辑器，支持实时预览和 SVG 格式导出功能。

• 在线访问: https://mermaid-exporter.vercel.app
• 源代码: https://github.com/brianxiadong/mermaid-exporter
  

技术栈

前端框架

• Next.js 15.5.5: React 全栈框架，提供服务端渲染和静态生成
• React 19.1.0: 用户界面构建库
• TypeScript: 静态类型检查，提高代码质量

样式和 UI

• Tailwind CSS 4: 实用优先的 CSS 框架
• Lucide React: 轻量级图标库

核心功能库

• Mermaid 11.12.0: 图表渲染引擎
• Monaco Editor: 代码编辑器组件，提供语法高亮和自动补全

开发工具

• ESLint: 代码质量检查
• PostCSS: CSS 处理工具

主要功能

1. 代码编辑器

• 基于 Monaco Editor 的代码编辑界面
• 支持 Mermaid 语法高亮
• 实时语法检查和错误提示

2. 实时预览

• 代码变更时自动更新图表预览
• 支持多种 Mermaid 图表类型：
  • 流程图 (Flowchart)
  • 时序图 (Sequence Diagram)
  • 甘特图 (Gantt Chart)
  • 类图 (Class Diagram)
  • 状态图 (State Diagram)
  • 用户旅程图 (User Journey)

3. 主题系统

• 内置多种预设主题
• 支持自定义主题配置
• 实时主题切换预览

4. 导出功能

• SVG 格式导出
• 自定义导出尺寸
• 背景颜色配置选项

5. 示例模板

• 提供常用图表模板
• 快速开始功能
• 模板分类管理

使用指南

基本使用流程

1. 访问编辑器

   • 打开 https://mermaid-exporter.vercel.app
   • 点击"开始创建"进入编辑器

2. 编写 Mermaid 代码

3. 实时预览

   • 代码编辑器右侧会实时显示图表预览
   • 语法错误会在编辑器中高亮显示

4. 主题选择

   • 使用主题选择器切换图表样式
   • 支持的主题包括：default、neutral、dark、forest 等

5. 导出图表

   • 点击导出按钮
   • 选择 SVG 格式
   • 配置导出参数（尺寸、背景等）
   • 下载生成的文件

高级功能

自定义配置

// 主题配置示例
{
  theme: 'base',
  themeVariables: {
    primaryColor: '#ff0000',
    primaryTextColor: '#fff',
    primaryBorderColor: '#ff0000'
  }
}

支持的图表类型

流程图

时序图

甘特图

技术实现细节

架构设计

• 组件化架构: 使用 React 组件化开发模式
• 状态管理: 基于 React Hooks 的本地状态管理
• 响应式设计: 支持桌面和移动设备

性能优化

• 代码分割: 使用 Next.js 自动代码分割
• 懒加载: Monaco Editor 按需加载
• 缓存策略: 利用浏览器缓存和 CDN 加速

部署方案

• Vercel 部署: 自动化 CI/CD 流程
• 静态生成: 利用 Next.js SSG 提高加载速度
• CDN 分发: 全球内容分发网络

开发环境搭建

环境要求

• Node.js 16.20.2 或更高版本
• pnpm 包管理器

本地开发

# 克隆项目
git clone https://github.com/brianxiadong/mermaid-exporter.git

# 安装依赖
cd mermaid-exporter
pnpm install

# 启动开发服务器
pnpm dev

# 访问 http://localhost:3000

构建部署

# 构建生产版本
pnpm build

# 启动生产服务器
pnpm start

项目结构

mermaid-exporter/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── editor/         # 编辑器页面
│   │   ├── help/           # 帮助文档
│   │   └── page.tsx        # 首页
│   └── components/         # React 组件
│       ├── MermaidEditor.tsx    # 代码编辑器
│       ├── MermaidPreview.tsx   # 图表预览
│       ├── ThemeSelector.tsx    # 主题选择器
│       └── ExportPanel.tsx      # 导出面板
├── public/                 # 静态资源
├── package.json           # 项目配置
└── vercel.json           # 部署配置

技术特点

1. 现代化技术栈

• 采用最新的 React 19 和 Next.js 15
• TypeScript 提供类型安全
• Tailwind CSS 4 实现响应式设计

2. 用户体验优化

• 实时预览减少反馈延迟
• 直观的界面设计
• 移动端适配

3. 功能完整性

• 支持完整的 Mermaid 语法
• 多种导出格式和配置选项
• 丰富的示例模板

4. 开发友好

• 组件化架构便于维护
• TypeScript 类型定义完整
• 标准化的代码规范

总结

Mermaid 在线图表导出器是一个功能完整的 Web 应用，采用现代化的前端技术栈构建。项目结构清晰，代码质量良好，提供了完整的 Mermaid 图表编辑和导出功能。通过合理的架构设计和性能优化，为用户提供了流畅的使用体验。

该项目适合作为学习现代前端开发技术的参考案例，也可以直接用于日常的图表创建需求。