MarkMap-OpenAi-ChatGpt

MarkMap-OpenAi-ChatGpt

本项目是一个结合了Vue、Markmap和OpenAI ChatGPT的思维导图生成工具。用户可以输入标题和内容,通过调用ChatGPT生成思维导图,并支持放大、缩小、适应屏幕和下载功能。

Stars: 77

Visit
 screenshot

MarkMap-OpenAi-ChatGpt is a Vue.js-based mind map generation tool that allows users to generate mind maps by entering titles or content. The application integrates the markmap-lib and markmap-view libraries, supports visualizing mind maps, and provides functions for zooming and adapting the map to the screen. Users can also export the generated mind map in PNG, SVG, JPEG, and other formats. This project is suitable for quickly organizing ideas, study notes, project planning, etc. By simply entering content, users can get an intuitive mind map that can be continuously expanded, downloaded, and shared.

README:

GPT 思维导图生成器

本项目完全开源 如果觉得不错麻烦帮忙点一次Star⭐️

项目简介

MarkMap-OpenAi-ChatGpt 是一个基于Vue.js的思维导图生成工具,用户可以通过输入标题或内容来生成思维导图。应用集成了markmap-libmarkmap-view库,支持将思维导图可视化,并且提供了对导图的缩放、适应屏幕等功能。用户还可以将生成的思维导图导出为PNG、SVG、JPEG等格式。

该项目适合用于快速整理想法、学习笔记、项目规划等场景。通过简单的输入内容,即可得到一个直观的思维导图,并可持续扩展、下载和分享。

功能特性

  • 输入标题或内容,生成思维导图
  • 支持连续问答模式,基于已有内容深入生成
  • 思维导图的缩放、适应屏幕等视图控制功能
  • 导出为多种图片格式:PNG、JPEG、SVG
  • 使用现代Web技术:Vue.js、Element UI、markmap-lib

项目结构

├── public
│ └── index.html
├── src
│ ├── assets
│ ├── components
│ │ └── MarkdownRenderer.vue
│ ├── views
│ │ └── Home.vue
│ │ └── About.vue
│ ├── App.vue
│ └── main.js
├── .env
├── .gitignore
├── package.json
├── README.md
└── vue.config.js

项目预览

在线演示

你可以通过以下链接查看在线演示:


联系作者


部署与运行

环境要求

在运行和部署此项目之前,确保你的环境已经安装了以下工具:

  • Node.js (推荐版本:v14+)
  • npm (Node 包管理工具)
  • Git (版本控制工具)

克隆项目

首先,使用以下命令将项目代码克隆到本地:

git clone https://github.com/PastKing/MarkMap-OpenAi-ChatGpt.git
cd MarkMap-OpenAi-ChatGpt

安装依赖

进入 MarkMap-OpenAi-ChatGpt 目录后,运行以下命令安装项目所需的依赖:

npm install

本地运行

安装完依赖后,使用以下命令启动本地开发服务器:

npm run serve

在浏览器中访问http://localhost:7000,即可查看项目。

项目构建

如果需要将项目部署到生产环境,可以通过以下命令构建项目:

npm run build

构建后的静态文件会生成在dist/目录下,可以将该目录内容上传到任何静态服务器或托管平台。


部署到GitHub Pages

GitHub Pages 是一个方便的托管静态网站的平台,适合用来发布Vue项目。

第一步:构建项目

确保项目已经成功构建,并生成了dist/文件夹:

npm run build

第二步:将项目推送到gh-pages分支

可以使用gh-pages插件来简化这个过程。首先安装gh-pages插件:

npm install --save-dev gh-pages

然后在package.json中添加以下脚本:

{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}

接下来运行以下命令,将dist/目录推送到GitHub的gh-pages分支:

npm run deploy

第三步:启用GitHub Pages

  1. 打开你的GitHub仓库页面,点击 Settings
  2. 在左侧栏中选择 Pages
  3. 选择源为gh-pages分支,保存设置。

几分钟后,你的项目将会在https://your-username.github.io/MarkMap-OpenAi-ChatGpt/上访问。


部署到Netlify

Netlify 是一个强大且易用的托管平台,特别适合前端项目的部署。

第一步:连接GitHub仓库

  1. 登录 Netlify 并点击 New site from Git
  2. 选择 GitHub,授权Netlify访问你的GitHub账户。
  3. 选择你的 MarkMap-OpenAi-ChatGpt 仓库。

第二步:配置构建设置

在Netlify的项目配置页面中,设置以下内容:

  • Build Command: npm run build
  • Publish Directory: dist/

然后点击 Deploy,Netlify 会自动构建并托管你的项目。

第三步:获取部署链接

项目部署完成后,Netlify 会提供一个访问链接。你可以自定义该链接或使用Netlify提供的默认域名。


部署到Vercel

Vercel 是另一个受欢迎的前端部署平台,具有快速部署和全局CDN支持的特点。

第一步:连接GitHub仓库

  1. 登录 Vercel 并点击 New Project
  2. 选择 Import Git Repository,并选择你的 MarkMap-OpenAi-ChatGpt 仓库。

第二步:配置部署设置

Vercel会自动识别Vue项目,默认的设置无需更改:

  • Build Command: npm run build
  • Output Directory: dist/

点击 Deploy 按钮,Vercel 会开始构建并部署项目。

第三步:获取Vercel URL

部署完成后,Vercel 会为你的项目提供一个唯一的URL,你可以使用该链接分享或自定义为你自己的域名。

常见问题

1. 如何修改API请求的URL和密钥?

你可以在项目的环境配置文件.env中配置API的请求地址和密钥。使用以下命令创建并编辑环境文件:

cp .env.example .env

然后在.env文件中修改如下内容:

VUE_APP_API_BASE_URL=https://your-api-endpoint
VUE_APP_API_KEY=your-api-key

2. 部署时出现构建错误如何处理?

  • 确保Node.js版本符合要求(推荐v14+)。
  • 检查项目的依赖是否正确安装,可以尝试删除node_modules文件夹并重新运行npm install
  • 确保在项目根目录下执行了npm run build

贡献指南

欢迎任何形式的贡献,以下是贡献步骤:

  1. Fork 本仓库
  2. 创建你的 feature 分支 (git checkout -b feature/your-feature)
  3. 提交你的修改 (git commit -m 'Add some feature')
  4. 推送到分支 (git push origin feature/your-feature)
  5. 创建一个新的 Pull Request

许可证

该项目基于 MIT License 许可证开源。你可以自由地使用、修改和分发此项目。


致谢

  • 感谢 markmap-lib 提供的思维导图生成库。
  • 感谢 Vue.js 和 Element UI 提供的强大框架。

此文档现已更新为包含进入 vue 子目录的操作步骤。如果项目目录结构或构建工具有变化,可以根据实际情况继续调整。

赞助/支持

收款码

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for MarkMap-OpenAi-ChatGpt

Similar Open Source Tools

For similar tasks

For similar jobs