# mermaid-draw **Repository Path**: zptcsoft/mermaid-draw ## Basic Information - **Project Name**: mermaid-draw - **Description**: No description available - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-02-08 - **Last Updated**: 2026-02-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Mermaid 图表绘制工具 这是一个基于 Mermaid.js 的图表绘制工具，支持多种图表类型的快速创建和预览。提供直观的用户界面和丰富的图表模板，帮助用户快速创建专业的图表。 ## 功能特性 - 🎯 **支持 14 种不同类型的 Mermaid 图表** - 覆盖流程图、架构图、思维导图等 - 🔄 **实时预览图表效果** - 代码修改即时渲染，所见即所得 - 📝 **代码编辑与图表展示分离** - 左侧编辑，右侧预览，操作便捷 - 📱 **响应式设计** - 适配不同屏幕尺寸，支持移动端访问 - 🗂️ **多标签页管理** - 支持同时管理多个图表项目 - 🎨 **语法高亮支持** - 集成代码编辑器，提供专业的代码编辑体验 - 📚 **完整文档指南** - 每种图表类型都有详细的使用说明和最佳实践 - 💡 **智能图表提示** - 为每种图表类型显示专业、准确的专用内容 - 🔧 **专业图表文档** - 每种图表类型配备完整的语法说明、结构定义和使用示例 - 📤 **导出功能** - 支持将图表导出为 PNG、SVG、PDF 等格式 - 🎨 **自定义主题** - 支持多种主题切换，可自定义图表样式 - ⌨️ **快捷键支持** - 提供常用快捷键，提升编辑效率 - 💾 **本地存储** - 支持图表数据本地存储，方便后续编辑和使用 ## 支持的图表类型 1. **流程图 (Flowchart)** - 展示流程逻辑和决策路径 2. **时序图 (Sequence)** - 展示对象间的交互时序 3. **类图 (Class)** - 展示类的结构和关系 4. **甘特图 (Gantt)** - 项目进度规划和时间管理 5. **饼图 (Pie)** - 数据占比和统计分析 6. **状态图 (State)** - 状态转换和生命周期 7. **ER图 (ER)** - 实体关系和数据建模 8. **思维导图 (Mindmap)** - 思维组织和知识结构 9. **架构图 (Architecture)** - 系统架构和技术栈 10. **用户旅程图 (User Journey)** - 用户体验和交互流程 11. **需求图 (Requirements)** - 需求管理和追踪 12. **象限图 (Quadrant)** - 数据分类和优先级分析 13. **信息图表 (Infographic)** - 信息可视化和数据展示 14. **组织结构图 (Organization)** - 组织架构和团队关系 ## 项目结构 ``` mermaid-draw/ ├── index.html # 主页面 - 图表类型选择和快速入口 ├── demos.html # 案例展示页面 - 丰富的图表示例集合 ├── editor.html # 代码编辑器页面 - 专业图表编辑环境 ├── editor2.html # 思维导图编辑器页面 - 专业思维导图编辑环境 ├── public/ # 静态资源目录 │ └── data/ # 公共数据文件目录 │ ├── demos-charts.js # 案例页面图表数据 │ └── index-charts.js # 首页图表数据 ├── docs/ # 文档中心 │ ├── README.md # 文档首页 │ ├── _coverpage.md # 封面配置 │ ├── _sidebar.md # 侧边栏导航配置 │ ├── charts/ # 图表类型指南 │ │ ├── architecture.md # 架构图指南 │ │ ├── class.md # 类图指南 │ │ ├── er.md # ER图指南 │ │ ├── flowchart.md # 流程图指南 │ │ ├── gantt.md # 甘特图指南 │ │ ├── infographic.md # 信息图表指南 │ │ ├── mindmap.md # 思维导图指南 │ │ ├── network.md # 网络图指南 │ │ ├── organization.md # 组织结构图指南 │ │ ├── pie.md # 饼图指南 │ │ ├── quadrant.md # 象限图指南 │ │ ├── requirement.md # 需求图指南 │ │ ├── sequence.md # 时序图指南 │ │ ├── state.md # 状态图指南 │ │ └── user-journey.md # 用户旅程图指南 │ ├── api.md # API文档 │ ├── development.md # 开发指南 │ ├── editor.md # 编辑器使用说明 │ ├── faq.md # 常见问题 │ ├── features.md # 功能特性 │ ├── index.html # 文档站点入口 │ └── quickstart.md # 快速开始指南 ├── src/ # 源代码目录 │ ├── css/ # CSS样式文件目录 │ │ ├── common.css # 全局样式 │ │ ├── demos.css # 案例页面特定样式 │ │ ├── editor.css # 编辑器页面样式 │ │ └── index.css # 首页特定样式 │ ├── data/ # 数据文件目录 │ │ └── chartDocs.js # 图表文档数据 │ ├── pages/ # 页面组件目录 │ │ ├── home/ # 首页组件 │ │ │ └── home.js # 首页逻辑 │ │ ├── demos/ # 案例页面组件 │ │ │ └── demos.js # 案例页面逻辑 │ │ ├── editor/ # 编辑器页面组件 │ │ │ └── editor.js # 编辑器逻辑 │ │ └── editor2/ # 思维导图编辑器组件 │ │ └── editor2.js # 思维导图编辑器逻辑 │ ├── services/ # 服务层目录 │ │ ├── ai/ # AI服务 │ │ │ └── aiService.js # AI相关功能 │ │ └── mindmap/ # 思维导图服务 │ │ ├── mindmapService.js # 思维导图核心服务 │ │ └── monacoEditor.js # Monaco编辑器配置 │ ├── utils/ # 工具函数目录 │ │ ├── common/ # 通用工具 │ │ │ └── navigationUtils.js # 导航功能 │ │ ├── theme/ # 主题工具 │ │ │ └── themeUtils.js # 主题工具函数 │ │ ├── aiUtils.js # AI工具公共函数 │ │ ├── chartUtils.js # 图表工具函数 │ │ ├── mermaidConfig.js # Mermaid配置 │ │ └── prismMermaid.js # Prism语法高亮 │ ├── app.js # 应用初始化逻辑 │ └── main.js # 应用入口文件 ├── dist/ # 构建输出目录（生产环境） ├── .gitignore # Git忽略文件配置 ├── .prettierrc.js # Prettier配置文件 ├── eslint.config.js # ESLint配置文件 ├── LICENSE # 许可证文件 ├── package.json # 项目配置和依赖 ├── package-lock.json # 依赖锁定文件 ├── vite.config.js # Vite构建配置 ├── README.md # 项目说明 └── README.en.md # 英文项目说明 ``` ## 使用方法 ### 开发模式 1. **安装依赖**： ```bash npm install ``` 2. **启动开发服务器**： ```bash npm run dev ``` 3. **访问应用**： - 🏠 主页面：`http://localhost:5174` - 图表类型选择和快速入口 - 📊 案例中心：`http://localhost:5174/demos.html` - 丰富的图表示例集合 - ✏️ 代码编辑器：`http://localhost:5174/editor.html` - 专业图表编辑环境 - 📚 文档中心：`http://localhost:5174/docs/index.html` - 完整的使用指南 ### 生产构建 ```bash npm run build ``` 构建后的文件将在 `dist` 目录中，可直接部署到生产环境。 ### 预览生产版本 ```bash npm run preview ``` 在本地预览构建后的生产版本，确保部署前的最终效果。 ### 静态服务器（备选方案） 如果需要使用简单的静态服务器： ```bash npm run serve ``` 然后访问：`http://localhost:8000` ## 使用指南 ### 快速开始 1. 打开编辑器页面，选择需要的图表类型。 2. 在代码编辑区输入 Mermaid 语法代码。 3. 实时预览图表效果。 4. 可通过快捷键或按钮进行代码格式化、导出图表等操作。 ### 编辑器功能 - **语法高亮**：专业的代码编辑体验，支持 Mermaid 语法高亮 - **实时预览**：代码修改即时渲染，所见即所得 - **错误提示**：智能语法检查，帮助定位代码问题 - **模板库**：提供丰富的图表模板，快速开始创建 - **导出功能**：支持导出为图片或其他格式 - **主题切换**：支持多种主题切换，可自定义图表样式 - **多标签页**：支持多图表标签页切换，方便同时编辑多个图表 ### 文档中心 访问 `http://localhost:5174/docs/index.html` 获取： - 📖 每种图表类型的详细语法指南 - 💡 实际应用案例和最佳实践 - 🎨 设计原则和注意事项 - ❓ 常见问题解答 ## 开发说明 ### 核心页面 - **index.html**: 主页面，展示14种图表类型和快速入口 - **demos.html**: 案例展示页面，包含各种图表的详细示例和应用场景 - **editor.html**: 专业代码编辑器页面，提供代码编辑和实时预览功能 - **docs/index.html**: 文档中心入口，集成完整的使用指南 ### 核心逻辑文件 - **src/js/main.js**: 核心功能模块，包含Mermaid渲染、代码高亮等公共功能 - **src/js/index.js**: 首页特定功能逻辑，处理图表类型选择和导航 - **src/js/demos.js**: 案例页面特定功能逻辑，管理图表示例展示 - **src/js/editor.js**: 编辑器页面逻辑，实现代码编辑和图表预览交互，包含图表提示功能的核心实现 ### 样式文件 - **src/css/common.css**: 全局样式定义，包含通用组件和响应式设计 - **src/css/index.css**: 首页特定样式，优化图表类型展示效果 - **src/css/demos.css**: 案例页面特定样式，突出图表示例效果 - **src/css/editor.css**: 编辑器页面样式，包含代码编辑器和预览区域布局 ### 数据和配置 - **public/data/index-charts.js**: 首页使用的图表模板数据，提供快速开始模板 - **public/data/demos-charts.js**: 案例页面使用的图表数据，展示实际应用场景 - **src/data/chart-docs.js**: 图表文档数据，包含每种图表类型的详细配置 - **docs/\_sidebar.md**: 文档中心侧边栏导航配置 - **package.json**: 项目依赖和脚本配置 ### 自定义图表 如果需要添加新的图表类型，需要： 1. **添加图表模板**：在 `public/data/index-charts.js` 中添加新的图表模板代码 2. **更新首页**：在 `index.html` 中添加对应的图表类型卡片 3. **配置数据属性**：确保按钮有正确的 `data-type` 属性 4. **创建文档**：在 `docs/charts/` 目录下创建对应的图表指南文档 5. **更新导航**：在 `docs/_sidebar.md` 中添加新图表的导航链接 6. **配置图表文档**：在 `src/data/chart-docs.js` 中添加新图表的详细配置，包括语法、结构、示例和提示 7. **测试验证**：确保新图表类型可以正常渲染和预览，并验证图表提示功能正确显示专用内容 ### 文档系统 项目包含完整的文档系统，位于 `docs/` 目录： - **图表类型指南**：每种图表都有详细的使用说明和最佳实践 - **API文档**：提供编程接口和配置选项说明 - **开发指南**：帮助开发者理解和扩展项目 - **快速开始**：新用户的入门指导 - **常见问题**：解决使用过程中的常见问题 文档使用 Docsify 构建，支持搜索、主题切换等功能。 ## 技术栈 - **前端技术**： - HTML5 - 语义化标签和现代化网页结构 - CSS3 - 响应式设计和动画效果 - JavaScript (ES6+) - 现代化JavaScript语法和特性 - **核心库**： - Mermaid.js - 图表渲染引擎，支持14种图表类型 - Monaco Editor v0.54.0 - 专业代码编辑器，提供语法高亮和智能提示 - Vite v5.0.0 - 现代化构建工具，提供快速的开发体验 - **代码质量工具**： - ESLint v10.0.0 - 代码质量检查和规范 - Prettier v3.8.1 - 代码格式化工具 - **文档系统**： - Docsify - 轻量级文档站点生成器 - 支持搜索、主题切换、响应式布局 ## 注意事项 ### 浏览器兼容性 - ✅ 请确保浏览器支持 ES6 模块导入语法 - ✅ 推荐使用现代浏览器（Chrome、Firefox、Safari、Edge） - ✅ 支持移动端访问，响应式设计适配各种屏幕尺寸 ### 图表渲染 - ⚠️ 某些复杂图表可能需要较大的渲染空间 - ⚠️ 图表代码需要严格遵循 Mermaid 语法规范 - ⚠️ 建议在桌面端进行复杂的图表编辑操作 ### 性能优化 - 🚀 使用 Vite 构建工具，提供快速的开发体验 - 🚀 生产环境代码经过优化和压缩 - 🚀 支持懒加载和代码分割 ### 文档和支持 - 📖 完整的文档系统：`http://localhost:5174/docs/index.html` - 🎯 14种图表类型的详细使用指南 - 💡 丰富的实际应用案例和最佳实践 - ❓ 常见问题解答和故障排除 - 🔧 **图表提示功能** - 每种图表类型配备专业的提示内容，帮助用户快速理解图表语法和使用方法 ## 许可证 MIT License - 详见 [LICENSE](LICENSE) 文件 ## 贡献指南 欢迎提交 Issue 和 Pull Request 来改进项目！ ## 更新日志 ### v2.0.0 - ✅ **项目架构重构** - 采用现代前端项目架构，分离关注点，提高代码可维护性 - 建立清晰的目录结构：pages/、services/、utils/ 等 - 实现模块化开发，支持ES6+模块导入 - 集成Vite构建工具，提供快速的开发体验 - ✅ **思维导图编辑器增强** - 专门的思维导图编辑页面(editor2.html) - 支持思维导图方向修改（左、右、上、下、四周发射） - 支持多种主题样式，包括颜色方案和线条样式 - 实现实时预览和Markdown导入导出 - 集成AI助手，支持智能生成思维导图 - ✅ **服务层封装** - 将业务逻辑封装到服务层 - MindmapService：思维导图核心服务，处理渲染、导出等功能 - AIService：AI相关功能，支持图表代码生成 - ✅ **工具函数优化** - 整理和优化工具函数 - 按功能分类组织工具函数 - 提高代码复用性和可测试性 - ✅ **构建系统优化** - 配置Vite构建工具 - 优化依赖管理和代码分割 - 提高构建速度和生产环境性能 - ✅ **错误处理增强** - 完善错误处理机制 - 实现资源加载的错误处理和 fallback 机制 - 提高应用的稳定性和用户体验 - ✅ **版本管理** - 使用Git标签管理版本 - 标记v2.0.0版本 - 提供清晰的版本更新历史 ### v1.2.0 - ✅ **修复图表提示功能** - 解决用户旅程图和思维导图的"图表提示"对话框显示通用内容问题 - 修复用户旅程图提示显示错误，正确显示阶段定义、任务评分、情绪状态等专用内容 - 修复思维导图提示显示错误，正确显示节点类型、节点形状、格式化选项等专用内容 - ✅ **优化图表文档系统** - 改进updateChartDocsContent函数，支持图表特有字段结构 - ✅ **增强用户体验** - 提升图表提示对话框的内容准确性和专业性 - ✅ **完善错误处理** - 改进图表类型检测和文档内容匹配逻辑 - ✅ **项目结构优化** - 清理冗余目录和文件，统一数据存储 - ✅ **依赖管理优化** - 清理未使用依赖，添加代码质量工具 - ✅ **构建配置优化** - 标准化配置文件，优化构建选项 - ✅ **代码规范优化** - 添加ESLint和Prettier配置，统一代码风格 - ✅ **文档优化** - 更新README.md文件，完善项目文档结构和内容 - ✅ **开发工具集成** - 添加lint和format脚本命令，方便代码检查和格式化 - ✅ **文件命名优化** - 统一使用驼峰命名法，提高代码可读性和一致性 - `ai.js` → `aiService.js` - `navigation.js` → `navigationUtils.js` - `prism-mermaid.js` → `prismMermaid.js` - `chart-docs.js` → `chartDocs.js` - ✅ **代码复用性改进** - 提取公共AI功能到`aiUtils.js`，减少代码重复 - ✅ **文档导航优化** - 改进docs/index.html导航栏和样式，与项目整体风格保持一致 - ✅ **响应式设计增强** - 优化文档页面在不同设备上的显示效果 ### v1.1.0 - ✅ 新增14种图表类型的完整支持 - ✅ 集成专业代码编辑器 - ✅ 添加完整的文档系统 - ✅ 优化响应式设计和用户体验 - ✅ 支持实时预览和语法高亮 ## AI 配置信息 ### 备用 API 密钥 以下是备用的 AI API 配置信息，用于生成 Mermaid 图表代码： - **API Key**: `sk-8e7b19a12e6d4ef0a168cadc73f93574` - **Base URL**: `https://dashscope.aliyuncs.com/compatible-mode/v1` - **Model**: `qwen-plus` ### 使用方法 1. 启动应用后，点击代码面板右上角的 AI 图标 2. 在弹出的配置模态框中填写上述信息 3. 点击「测试连接」验证配置是否正确 4. 点击「保存配置」完成设置 5. 使用右下角的浮动聊天按钮打开 AI 助手，开始生成图表代码 --- **🎉 现在您可以开始使用这个强大的 Mermaid 图表绘制工具了！** 访问 `http://localhost:5174` 开始创建您的第一个图表。