# MermaidEdit_v2 **Repository Path**: corffee/mermaid-edit_v2 ## Basic Information - **Project Name**: MermaidEdit_v2 - **Description**: 基于 Vue 3 + TypeScript 的 Mermaid 可视化编辑器，支持拖拽式图表编辑、实时代码生成和模板系统。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2026-03-30 - **Last Updated**: 2026-03-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # MermaidEdit v2.0 - 可视化图表编辑器 基于 Vue 3 + TypeScript 的 Mermaid 可视化编辑器，支持拖拽式图表编辑、实时代码生成和模板系统。 ## 🚀 项目特色 - **🎨 可视化编辑** - 直观的拖拽式图表编辑体验 - **⚡ 实时预览** - 即时生成标准 Mermaid 代码 - **🔧 语法映射** - 完整的类型安全和兼容性检查 - **📚 模板系统** - 丰富的预定义模板库 - **🧪 测试覆盖** - 完整的单元测试保障 ## 📦 技术栈 ### 核心框架 - **Vue 3** - 现代化的前端框架 - **TypeScript** - 类型安全的开发体验 - **Vite** - 快速的构建工具 - **Tailwind CSS** - 实用优先的CSS框架 ### 图表相关 - **Vue Flow** - 流程图编辑基础库 - **Mermaid.js** - 图表渲染引擎 - **Dagre** - 自动布局算法 ### 开发工具 - **Element Plus** - UI组件库 - **Vitest** - 测试框架 - **Vue TSC** - TypeScript编译器 ## 🎯 功能特性 ### ✅ 已实现功能 #### 1. 可视化节点编辑 - **12种节点类型**： - 矩形节点 (RectNode) - 圆角矩形节点 (RoundNode) - 菱形节点 (DiamondNode) - 圆形节点 (CircleNode) - 六边形节点 (HexagonNode) - 平行四边形节点 (ParallelogramNode) - 梯形节点 (TrapezoidNode) - 体育场形节点 (StadiumNode) - 子程序节点 (SubroutineNode) - 圆柱形节点 (CylindricalNode) - 双圆节点 (DoubleCircleNode) - 不对称节点 (AsymmetricNode) - **节点操作**： - 拖拽式布局 - 双击编辑文本 - 节点类型切换 - 复制和删除 #### 2. 可视化连接编辑 - **7种连接类型**： - 默认连接 (DefaultEdge) - 箭头连接 (ArrowEdge) - 直线连接 (LineEdge) - 虚线连接 (DashedEdge) - 虚线箭头连接 (DashedArrowEdge) - 粗线连接 (ThickEdge) - 粗箭头连接 (ThickArrowEdge) - **连接功能**： - 点击连接点建立连接 - 连接标签编辑 - 自动路径计算 - 连接类型切换 #### 3. 语法映射系统 - **完整的类型定义** - 基于 TypeScript 的类型安全 - **兼容性检查** - 智能检测和降级处理 - **图表类型支持** - 目前完全支持流程图 - **配置化映射** - JSON 配置文件管理 #### 4. 代码生成与解析 - **实时代码生成** - 编辑时即时生成 Mermaid 代码 - **语法解析** - 支持导入现有 Mermaid 代码 - **兼容性报告** - 详细的兼容性分析和警告 - **代码验证** - 语法正确性检查 #### 5. 模板系统 - **分类模板** - 算法、系统、业务等不同分类 - **快速应用** - 一键应用模板到画布 - **模板预览** - 可视化模板展示 #### 6. 用户界面 - **响应式设计** - 适配不同屏幕尺寸 - **侧边栏** - 可折叠的工具面板 - **实时预览** - 即时的 Mermaid 代码预览 - **快捷操作** - 快速拖拽节点创建 ### 🚧 支持的图表类型 #### Phase 1 (当前版本) - ✅ **流程图 (Flowchart)** - 完全支持 - 支持 `flowchart` 和 `graph` 语法 - 完整的节点和连接类型映射 - 兼容性检查和自动降级 #### Phase 2 (计划中) - 🔄 **状态图 (State Diagram)** - 基础解析支持 - 🔄 **序列图 (Sequence Diagram)** - 基础解析支持 - 🔄 **类图 (Class Diagram)** - 基础解析支持 - 🔄 **ER图 (Entity Relationship)** - 基础解析支持 - 🔄 **饼图 (Pie Chart)** - 基础解析支持 ## 🛠️ 安装与运行 ### 环境要求 - Node.js >= 16.0.0 - npm 或 yarn ### 安装依赖 ```bash npm install ``` ### 开发运行 ```bash npm run dev ``` ### 构建项目 ```bash npm run build ``` ### 运行测试 ```bash npm run test ``` ### 预览构建 ```bash npm run preview ``` ## 📁 项目结构 ``` src/ ├── components/ │ ├── MermaidSync_v2.vue # 主编辑器组件 │ └── MermaidEdit/ │ ├── nodes/ # 节点组件 │ │ ├── RectNode.vue │ │ ├── DiamondNode.vue │ │ └── ... (其他节点类型) │ ├── edges/ # 连接组件 │ │ ├── ArrowEdge.vue │ │ ├── DashedEdge.vue │ │ └── ... (其他连接类型) │ └── Sidebar.vue # 侧边栏组件 ├── assets/ │ ├── mermaid_syntax/ # 语法映射系统 │ │ ├── index.ts # 主入口 │ │ ├── types.ts # 类型定义 │ │ ├── chart_type/ # 图表类型解析器 │ │ │ └── flowchart.ts │ │ ├── templates/ # 模板文件 │ │ │ └── flowchart-templates.json │ │ ├── index.json # 主配置 │ │ ├── flowchart.json # 流程图映射 │ │ └── conversion-rules.json # 转换规则 │ └── vueflow/ # Vue Flow 工具 │ ├── useDnD.ts # 拖拽功能 │ └── useLayout.ts # 布局功能 └── test/ # 测试文件 ├── mermaid_syntax_utils_MermaidSyntaxParser.test.ts ├── mermaid_syntax_utils_SyntaxMappingLoader.test.ts └── ... (其他测试文件) ``` ## 🎮 使用指南 ### 1. 基础编辑操作 #### 添加节点 1. 从左侧工具栏选择节点类型 2. 拖拽到画布上释放 3. 双击节点编辑文本内容 #### 创建连接 1. 点击源节点的连接点 2. 点击目标节点建立连接 3. 选中连接可编辑标签和类型 #### 编辑属性 1. 选中节点或连接 2. 在右侧属性面板编辑 3. 实时预览更改效果 ### 2. 模板使用 #### 应用模板 1. 点击模板下拉菜单 2. 选择合适的模板分类 3. 点击应用模板到画布 #### 自定义模板 1. 创建图表布局 2. 导出 Mermaid 代码 3. 保存为自定义模板 ### 3. 代码导入导出 #### 导出代码 1. 完成图表编辑 2. 点击"导出代码"按钮 3. 复制生成的 Mermaid 代码 #### 导入代码 1. 点击"导入代码"按钮 2. 粘贴 Mermaid 代码 3. 查看兼容性警告并调整 ## 🔍 语法映射系统 ### 核心类和接口 ```typescript // 主要接口 interface MermaidSyntaxMapping { version: string supportedChartTypes: string[] supportedCharts: ChartTypeMapping[] // ... 其他配置 } // 主要类 class SyntaxMappingLoader // 配置加载器 class FlowChartMermaidSyntaxParser // 流程图解析器 class FlowChartMermaidCodeGenerator // 流程图代码生成器 class MermaidSyntax // 统一接口 ``` ### 使用示例 ```typescript import { MermaidSyntax } from '@/assets/mermaid_syntax' // 初始化 const mermaidSyntax = new MermaidSyntax() await mermaidSyntax.init_mapping() // 解析代码 const parser = mermaidSyntax.MermaidSyntaxParser() const result = parser.parse(mermaidCode) // 生成代码 const generator = mermaidSyntax.MermaidCodeGenerator() const code = generator.generate(nodes, connections) ``` ## 🧪 测试覆盖 ### 测试类型 - **单元测试** - 核心功能模块测试 - **集成测试** - 组件间交互测试 - **兼容性测试** - 语法兼容性验证 ### 测试覆盖内容 - ✅ 语法解析器测试 - ✅ 配置加载器测试 - ✅ 图表类型检测测试 - ✅ 兼容性分析测试 - ✅ 代码生成测试 ## 📊 兼容性支持 ### 支持级别 - **✅ 完全支持** - 直接导入，无需修改 - **⚠️ 部分支持** - 自动转换，显示警告 - **❌ 不支持** - 建议保持代码模式 ### 降级策略 - 六边形节点 → 矩形节点 - 平行四边形节点 → 矩形节点 - 梯形节点 → 矩形节点 - 双圆节点 → 单圆节点 ## 🚀 部署选项 ### 1. 静态文件部署 ```bash npm run build # 部署 dist/ 目录到静态服务器 ``` ### 2. 单文件打包 ```bash # 使用 vite.config.txt 配置 npm run build # 生成可直接打开的 HTML 文件 ``` ### 3. 开发服务器 ```bash npm run dev # 本地开发服务器运行 ``` ## 📈 性能优化 ### 限制设置 - 最大节点数：100 - 最大连接数：200 - 复杂度阈值：50 ### 优化策略 - 配置文件缓存 - 单例模式管理 - 按需加载组件 - 响应式数据优化 ## 🤝 贡献指南 ### 开发流程 1. Fork 项目仓库 2. 创建功能分支 3. 编写单元测试 4. 提交 Pull Request ### 代码规范 - 使用 TypeScript 类型定义 - 遵循 Vue 3 Composition API - 保持测试覆盖率 ### 新增功能 - 新增图表类型：在 `chart_type/` 目录添加解析器 - 新增节点类型：在 `nodes/` 目录添加组件 - 新增模板：在 `templates/` 目录添加 JSON 配置 ## 📄 许可证 MIT License - 详见 [LICENSE](LICENSE) 文件 ## 🎯 路线图 ### v0.3.0 (计划中) - [ ] 完善代码导入解析功能 - [ ] 添加撤销重做功能 - [ ] 优化拖拽性能 - [ ] 扩展模板库 ### v0.4.0 (计划中) - [ ] 支持状态图编辑 - [ ] 支持序列图编辑 - [ ] 添加批量操作功能 - [ ] 实现协作编辑 ### v1.0.0 (长期目标) - [ ] 完整的多图表类型支持 - [ ] 高级样式定制 - [ ] 插件系统 - [ ] 云端同步功能 --- **专为专利文档协作平台设计，提供专业的图表编辑解决方案。**