# ACE Mermaid Draw **Repository Path**: bestACE/ace-mermaid-draw ## Basic Information - **Project Name**: ACE Mermaid Draw - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-02-27 - **Last Updated**: 2026-02-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ACE Mermaid Draw 一个基于 Vue 3 和 Mermaid.js 的专业图表绘制工具，支持 Mermaid 流程图、Markmap 思维导图和 Excalidraw 手绘风格图表的创建、编辑和导出。 ## 功能特性 - ✅ **多模式支持**：Mermaid 流程图、Markmap 思维导图和 Excalidraw 手绘风格图表 - ✅ **实时预览**：编辑代码时实时渲染图表 - ✅ **主题切换**：支持浅色/深色主题 - ✅ **多种图表类型**：Mermaid 支持流程图、序列图、类图、状态图等多种图表类型 - ✅ **导出功能**：支持导出为 SVG、PNG、PDF 格式 - ✅ **代码高亮**：Monaco Editor 提供语法高亮和代码提示 - ✅ **图表指南**：内置 Mermaid 和 Markmap 语法指南 - ✅ **响应式布局**：支持不同屏幕尺寸 - ✅ **AI 辅助**：集成 AI 聊天功能，可生成图表代码 - ✅ **智能代码补全**：Monaco Editor 提供 Mermaid 语法智能补全 - ✅ **代码格式化**：支持 Mermaid 代码自动格式化 - ✅ **错误检测**：实时检测 Mermaid 语法错误 - ✅ **提示词生成器**：内置提示词模板，快速生成图表代码 ## 技术栈 - **前端框架**：Vue 3 + Composition API - **图表库**：Mermaid.js、Markmap、Excalidraw - **代码编辑器**：Monaco Editor - **构建工具**：Vite - **样式管理**：CSS Variables + 模块化 CSS - **代码质量**：ESLint + Prettier - **类型安全**：TypeScript - **数学公式**：KaTeX - **路由**：Vue Router - **AI 集成**：自定义 AI 服务 ## 快速开始 ### 环境要求 - Node.js >= 18.0.0 - npm >= 9.0.0 ### 安装依赖 ```bash npm install ``` ### 开发模式 ```bash npm run dev ``` ### 构建生产版本 ```bash npm run build ``` ### 预览生产构建 ```bash npm run preview ``` ## 项目结构 ``` vue-mermaid-draw/ ├── src/ # 源代码 │ ├── components/ # 组件 │ │ ├── editor/ # 编辑器相关组件 │ │ │ └── EnhancedEditor.vue │ │ ├── renderer/ # 渲染器相关组件 │ │ │ ├── ExcalidrawComponent.vue │ │ │ ├── MarkmapRenderer.vue │ │ │ ├── MermaidRenderer.vue │ │ │ └── NormalModeComponent.vue │ │ ├── toolbar/ # 工具栏相关组件 │ │ │ ├── AIChatPanel.vue │ │ │ ├── ChartGuidePanel.vue │ │ │ ├── FloatingToolbar.vue │ │ │ ├── PromptGenerator.vue │ │ │ └── PromptGeneratorModal.vue │ │ ├── ChartEditorPreview.vue │ │ ├── Footer.vue │ │ ├── HeroSection.vue │ │ ├── MonacoEditor.vue │ │ └── TabsNavigation.vue │ ├── data/ # 数据文件 │ │ ├── chartDocs.js │ │ ├── demos-charts.js │ │ └── index-charts.js │ ├── pages/ # 页面组件 │ │ ├── DemosPage.vue │ │ ├── EditorPage.vue │ │ └── IndexPage.vue │ ├── router/ # 路由配置 │ │ └── index.js │ ├── services/ # 服务 │ │ ├── ai/ # AI 服务 │ │ │ └── aiService.js │ │ └── monaco/ # Monaco Editor 服务 │ │ └── MonacoSyntaxGuide.md │ ├── styles/ # 样式文件 │ │ ├── components/ # 组件样式 │ │ ├── variables.css # CSS 变量 │ │ ├── global.css # 全局样式 │ │ └── index.css # 样式入口 │ ├── utils/ # 工具函数 │ │ ├── theme/ # 主题相关工具 │ │ │ └── themeUtils.js │ │ └── exportUtils.ts │ ├── vendor/ # 第三方库 │ │ └── excalidraw/ # Excalidraw 库 │ ├── App.vue # 应用入口组件 │ ├── main.js # 应用入口文件 │ └── vite-env.d.ts # Vite 类型声明 ├── .eslintrc.cjs # ESLint 配置 ├── .prettierrc.json # Prettier 配置 ├── tsconfig.json # TypeScript 配置 ├── vite.config.js # Vite 配置 └── package.json # 项目配置 ``` ## 使用指南 ### 1. 选择编辑器类型 在顶部工具栏中，可以选择 Mermaid、Markmap 或 Excalidraw 模式： - **Mermaid**：用于创建流程图、序列图、类图等多种图表 - **Markmap**：用于创建思维导图 - **Excalidraw**：用于创建手绘风格的图表和示意图 ### 2. 编辑内容 根据选择的编辑器类型，使用不同的编辑方式： - **Mermaid**：在左侧代码编辑区输入 Mermaid 语法，如 `flowchart TD` 定义流程图 - **Markmap**：在左侧代码编辑区输入 Markdown 语法，通过标题层级定义思维导图结构 - **Excalidraw**：在右侧预览区直接使用可视化编辑器，通过拖拽、点击等方式创建和编辑图表 ### 3. 预览图表 右侧预览区会实时显示渲染结果。 ### 4. 调整布局 使用顶部工具栏的布局按钮可以调整编辑区和预览区的比例。 ### 5. 选择主题 在预览区顶部可以选择图表主题： - **Mermaid**：默认、深色、森林、中性等主题 - **Markmap**：浅色、深色、蓝色、绿色、紫色、橙色等主题 ### 6. 导出图表 在预览区顶部可以选择导出格式： - **SVG**：矢量图形格式，支持缩放不失真 - **PNG**：位图格式，适用于大多数场景 - **PDF**：文档格式，适用于打印和分享 **注意**：Excalidraw 模式下的导出功能可能有所不同，具体以实际界面为准。 ### 7. 使用图表指南 点击编辑区顶部的「图表指南」按钮，可以查看 Mermaid 和 Markmap 的语法指南。 ### 8. 使用 AI 辅助 点击顶部工具栏的 AI 图标，可以打开 AI 聊天面板，通过提示词生成图表代码。 #### 8.1 提示词生成器 在 AI 聊天面板中，可以使用提示词生成器快速生成图表代码： 1. 点击「提示词生成器」按钮 2. 选择图表类型（流程图、序列图、类图等） 3. 填写相关参数 4. 系统会自动生成提示词并发送给 AI 5. AI 会返回生成的图表代码 #### 8.2 常见图表快捷按钮 AI 聊天面板底部提供了常见图表的快捷按钮，包括： - 用户登录流程图 - 微信支付序列图 - 项目开发甘特图 - 电商订单状态图 - 电商系统 ER 图 点击这些按钮可以快速生成相应的图表代码。 ### 9. 代码编辑功能 #### 9.1 代码高亮 Monaco Editor 提供了 Mermaid 语法的高亮显示，包括： - 图表类型（如 `flowchart`、`sequenceDiagram`） - 关键词（如 `subgraph`、`end`、`class`） - 箭头符号（如 `-->`、`==>`） - 节点名称 - 样式指令 #### 9.2 智能代码补全 Monaco Editor 提供了 Mermaid 语法的智能补全，包括： - 图表类型 - 关键词 - 箭头符号 - 样式属性 - 颜色值 - 代码片段 #### 9.3 代码格式化 点击编辑区顶部的「格式化」按钮，可以自动格式化 Mermaid 代码，包括： - 调整缩进 - 对齐连接线 - 处理空行 - 美化代码结构 ## 开发指南 ### 代码规范 - **ESLint**：使用 Vue 推荐的 ESLint 规则 - **Prettier**：统一代码格式化 - **TypeScript**：使用 TypeScript 进行类型检查 ### 样式规范 - **CSS Variables**：使用 CSS 变量管理颜色、间距等样式属性 - **模块化 CSS**：按组件拆分样式文件 - **响应式设计**：支持不同屏幕尺寸 ### 组件开发 1. **创建组件**：在 `src/components/` 目录下创建相应的组件文件 2. **定义样式**：在 `src/styles/components/` 目录下创建对应的样式文件 3. **服务集成**：在 `src/services/` 目录下添加必要的服务 4. **工具函数**：将可复用逻辑提取到 `src/utils/` 目录下 ### 测试和构建 - **运行开发服务器**：`npm run dev` - **运行 lint 检查**：`npm run lint` - **运行代码格式化**：`npm run format` - **构建生产版本**：`npm run build` ## 示例 ### Mermaid 流程图示例 ```mermaid flowchart TD A[开始] --> B{判断条件} B -->|条件1| C[处理1] B -->|条件2| D[处理2] C --> E[结束] D --> E style A fill:#f9f,stroke:#333,stroke-width:2px style E fill:#bbf,stroke:#333,stroke-width:2px ``` ### Mermaid 序列图示例 ```mermaid sequenceDiagram participant Client as 客户端 participant Server as 服务器 participant Database as 数据库 Client->>Server: 请求数据 Server->>Database: 查询数据 Database-->>Server: 返回数据 Server-->>Client: 响应数据 ``` ### Mermaid 类图示例 ```mermaid classDiagram class Person { +String name +int age +void sayHello() } class Student { +String studentId +void study() } class Teacher { +String teacherId +void teach() } Person <|-- Student Person <|-- Teacher ``` ### Markmap 思维导图示例 ```markdown # 项目计划 ## 产品设计 ### 用户调研 ### 原型设计 ### UI设计 ## 开发 ### 前端开发 ### 后端开发 ### 测试 ## 部署 ### 服务器配置 ### 数据库配置 ### 上线 ``` ### Excalidraw 手绘风格图表 Excalidraw 模式下，您可以： 1. 直接在画布上绘制各种形状（矩形、圆形、三角形等） 2. 添加文本和箭头 3. 使用手绘风格的笔刷工具 4. 调整元素的颜色和样式 5. 导入和导出绘图 **提示**：Excalidraw 模式是完全可视化的，不需要编写代码，适合创建手绘风格的示意图和草图。 ## 贡献 欢迎贡献代码、报告问题或提出建议！ ## 许可证 MIT License