# makegraph **Repository Path**: meetqy/makegraph ## Basic Information - **Project Name**: makegraph - **Description**: MakeGraph - Free Online Chart Maker - **Primary Language**: TypeScript - **License**: AGPL-3.0 - **Default Branch**: main - **Homepage**: https://makegraph.org - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-13 - **Last Updated**: 2026-07-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: React, nextjs ## README # MakeGraph [English](README.md) | [中文](README_ZH.md) MakeGraph 是 [makegraph.org](https://makegraph.org) 的代码仓库。它是一个适用于 Excel 和 CSV 数据的免费在线图表制作工具，基于 Next.js、TypeScript 和 React 构建。 ![MakeGraph 预览图](public/og.png) ## 项目概览 MakeGraph 关注一条非常明确的链路：上传或粘贴电子表格数据，在大约 1 分钟内生成清晰图表，并尽量降低使用门槛。 当前仓库包含： - 面向电子表格数据输入和实时预览的交互式图表编辑器 - 围绕柱状图、折线图、饼图等核心需求展开的图表页面与说明文案 - 面向 PNG、SVG 导出表达的产品和内容文案 - 与图表互相关联的博客、模板页 - 通用 UI 组件、图表工具函数和表格编辑能力 - 后续产品能力可复用的鉴权与数据库基础设施 ## 功能概览 - 面向 Excel 和 CSV 工作流的数据上传或粘贴 - 全屏图表编辑器与实时预览 - 面向柱状图、折线图等核心类型的快速出图流程 - 图表内容导出为 PNG，并在产品定位文案中统一强调 SVG 导出 - 基于 `next-intl` 的多语言图表页面 - 可复用的数据表格编辑能力 - 图表页、博客页、模板页之间的关联能力 - 面向落地页和编辑面板的共享 UI 体系 ## 预览 当前已存在的统计图预览如下。 | | | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [![柱状图](public/charts/bar-graph-og-image.png)](https://makegraph.org/charts/bar-chart)
[柱状图](https://makegraph.org/charts/bar-chart) | [![柱状图竞赛](public/charts/bar-chart-race-og-image.png)](https://makegraph.org/charts/bar-chart-race)
[柱状图竞赛](https://makegraph.org/charts/bar-chart-race) | [![双向柱状图](public/charts/double-bar-chart-og-image.png)](https://makegraph.org/charts/double-bar-chart)
[双向柱状图](https://makegraph.org/charts/double-bar-chart) | | [![折线图](public/charts/line-chart-og-image.png)](https://makegraph.org/charts/line-chart)
[折线图](https://makegraph.org/charts/line-chart) | [![雷达图](public/charts/radar-chart-og-image.png)](https://makegraph.org/charts/radar-chart)
[雷达图](https://makegraph.org/charts/radar-chart) | [![散点图](public/charts/scatter-chart-og-image.png)](https://makegraph.org/charts/scatter-chart)
[散点图](https://makegraph.org/charts/scatter-chart) | | [![堆叠柱状图](public/charts/stacked-bar-chart-og-image.png)](https://makegraph.org/charts/stacked-bar-chart)
[堆叠柱状图](https://makegraph.org/charts/stacked-bar-chart) | [![矩形树图](public/charts/tree-map-chart-og-image.png)](https://makegraph.org/charts/tree-map-chart)
[矩形树图](https://makegraph.org/charts/tree-map-chart) | [![瀑布柱状图](public/charts/waterfall-bar-chart-og-image.png)](https://makegraph.org/charts/waterfall-bar-chart)
[瀑布柱状图](https://makegraph.org/charts/waterfall-bar-chart) | `置信区间面积图`、`相关矩阵`、`马里梅科图`、`旭日图`、`乐队座位图`、`帕累托图` 和 `人口金字塔图` 页面也已接入：`https://makegraph.org/charts/confidence-interval-area-chart`、`https://makegraph.org/charts/correlation-matrix-chart`、`https://makegraph.org/charts/marimekko-chart`、`https://makegraph.org/charts/sunburst-chart`、`https://makegraph.org/charts/band-seating-chart`、`https://makegraph.org/charts/pareto-chart` 与 `https://makegraph.org/charts/population-pyramid`。对应的 OG 预览图路径已在代码中预留，后续可再补充到 `public/charts/`。 ## 技术栈 - Next.js 16 App Router - React 19 - TypeScript - Tailwind CSS 4 - ECharts 与 Recharts - next-intl - tRPC - Drizzle ORM - Better Auth - PostgreSQL - Biome ## 当前包含的图表页面 目前仓库中已经实现或接入的图表页面包括： - 乐队座位图 - 柱状图 - 柱状图竞赛 - 置信区间面积图 - 相关矩阵 - 双向柱状图 - 折线图 - 马里梅科图 - 人口金字塔图 - 雷达图 - 散点图 - 堆叠柱状图 - 旭日图 - 矩形树图 - 瀑布柱状图 - 交错正负轴标签柱状图 - 帕累托图 ## 环境变量 复制 `.env.example` 为 `.env` 后，至少需要配置以下变量： - `DATABASE_URL`：PostgreSQL 连接字符串 - `BETTER_AUTH_SECRET`：Better Auth 使用的密钥 - `NEXT_PUBLIC_SITE_URL`：站点公开访问地址，例如 `http://localhost:3001` - `NEXT_PUBLIC_GOOGLE_ANALYTICS_ID`：可选的分析统计 ID ## 本地开发 ### 1. 安装依赖 ```bash pnpm install ``` ### 2. 创建本地环境变量 ```bash cp .env.example .env ``` 至少需要根据本地环境配置以下变量： - `DATABASE_URL` - `BETTER_AUTH_SECRET` - `NEXT_PUBLIC_SITE_URL` ### 3. 准备数据库 如果你本地使用 PostgreSQL，可先推送当前 schema： ```bash pnpm db:push ``` ### 4. 启动开发服务器 ```bash pnpm dev ``` 默认访问地址为 `http://localhost:3001`。 ## 部署说明 这个项目本质上是一个依赖 PostgreSQL 的标准 Next.js 应用。 - 在部署平台中配置必需的环境变量 - 确保目标数据库可访问 - 生产环境构建使用 `pnpm build` - 将 `NEXT_PUBLIC_SITE_URL` 设置为实际部署域名 ## 常用脚本 - `pnpm dev`：启动开发服务器，端口为 `3001` - `pnpm build`：生成 Drizzle 产物并构建生产包 - `pnpm start`：启动生产环境服务 - `pnpm preview`：构建并启动预览环境 - `pnpm check`：执行 Biome 检查 - `pnpm check:write`：执行 Biome 检查并自动写入安全修复 - `pnpm typecheck`：执行 TypeScript 类型检查 - `pnpm db:generate`：生成 Drizzle 文件 - `pnpm db:push`：将 schema 推送到当前数据库 - `pnpm db:migrate`：执行数据库迁移 - `pnpm db:studio`：打开 Drizzle Studio ## 目录结构 ```text . ├── docs/ # 产品、SEO、营销等说明文档 ├── drizzle/ # 数据库迁移文件 ├── messages/ # 全局多语言消息 ├── public/ # 静态资源 ├── src/ │ ├── app/ # Next.js 路由与页面内容 │ ├── components/ # 通用 UI 和图表组件 │ ├── config/ # 图表和博客配置 │ ├── i18n/ # 语言路由与请求工具 │ ├── lib/ # 共享工具与站点配置 │ ├── server/ # 鉴权、数据库与 tRPC 服务端代码 │ └── styles/ # 全局样式 ├── .env.example └── package.json ``` ## 文档说明 - 图表专属 markdown 文档放在对应 chart 目录中，例如 `src/app/[locale]/charts/*` - 非页面类的产品规划、SEO、营销资料统一放在 `docs/` - 原先偏营销风格的 README 已移动到： - `docs/marketing/README.md` - `docs/marketing/README_ZH.md` ## 后续方向 - 在保持编辑器轻量的前提下继续补充更多图表类型 - 增加更多可复用的模板页面和示例 - 继续完善图表页文案、SEO 和站内关联 - 逐步接入现有的鉴权和数据库基础设施，承载后续产品流程 ## 参与开发 1. 执行 `pnpm install` 2. 复制 `.env.example` 为 `.env` 3. 完成代码或文档修改 4. 执行 `pnpm check:write` 5. 提交变更并发起 PR ## License 本项目采用 GNU Affero General Public License v3.0 许可证 - 详见 [LICENSE](LICENSE) 文件。