Wanaka Studio Code Vis Editor

JavaScript code visualization editor with Mermaid flowchart and React Flow canvas editing.

🚀 快速开始

前置要求

• Node.js >= 18.0.0
• npm >= 9.0.0
• DeepSeek API Key（用于AI功能）

1. 安装依赖

前端依赖

npm install

后端依赖

cd backend
npm install
cd ..

2. 配置环境变量

后端环境变量

在 backend 目录下创建 .env 文件：

cd backend
cat > .env << EOF
# DeepSeek API 配置（必需）
DEEPSEEK_API_KEY=your_deepseek_api_key_here

# DeepSeek API URL（可选，默认使用官方API）
# DEEPSEEK_API_URL=https://api.deepseek.com/v1/chat/completions

# 后端服务端口（可选，默认3001）
# PORT=3001

# 环境模式（可选）
# NODE_ENV=development
EOF

重要: 请将 your_deepseek_api_key_here 替换为你的实际 DeepSeek API Key。

前端环境变量

在项目根目录的 env 文件中配置（已存在，如需修改）：

# Backend API Configuration
VITE_API_BASE_URL=http://localhost:3001

# Development Configuration
VITE_NODE_ENV=development

3. 启动服务

方式一：分别启动（推荐用于开发）

终端1 - 启动后端服务：

cd backend
npm run dev
# 或使用生产模式
# npm start

后端服务将在 http://localhost:3001 启动。

终端2 - 启动前端服务：

npm run dev

前端服务将在 http://localhost:5173 启动。

方式二：使用脚本同时启动（需要安装 concurrently）

# 安装 concurrently（如果还没有）
npm install -g concurrently

# 同时启动前后端
concurrently "npm run dev" "cd backend && npm run dev"

4. 访问应用

打开浏览器访问：http://localhost:5173

📋 开发说明

前端开发

• 开发服务器: npm run dev - 启动 Vite 开发服务器（端口 5173）
• 构建生产版本: npm run build - 构建前端应用
• 构建库版本: npm run build:lib - 构建 NPM 包
• 预览构建: npm run preview - 预览生产构建
• 运行测试: npm test - 运行 Vitest 测试

后端开发

• 开发模式: cd backend && npm run dev - 使用 nodemon 自动重启（端口 3001）
• 生产模式: cd backend && npm start - 使用 node 启动（端口 3001）

端口配置

• 前端: 5173（在 vite.config.ts 中配置）
• 后端: 3001（可通过 backend/.env 中的 PORT 变量修改）

API 端点

后端提供以下 API 端点：

• GET /health - 健康检查
• POST /api/convert/mermaid-to-javascript - Mermaid 转 JavaScript
• POST /api/convert/javascript-to-mermaid - JavaScript 转 Mermaid
• POST /api/convert/canvas-to-javascript - Canvas 转 JavaScript
• POST /api/stream/mermaid-to-javascript - 流式 Mermaid 转 JavaScript
• POST /api/stream/javascript-to-mermaid - 流式 JavaScript 转 Mermaid
• POST /api/stream/generate-javascript - 流式生成 JavaScript
• POST /api/stream/modify-javascript-from-canvas - 流式修改 JavaScript

🔧 故障排查

后端无法启动

1. 检查 API Key 配置

   cd backend
   cat .env  # 确认 DEEPSEEK_API_KEY 已设置

2. 检查端口占用

   lsof -i :3001  # macOS/Linux
   # 或
   netstat -ano | findstr :3001  # Windows

3. 检查依赖安装

   cd backend
   npm install

前端无法连接后端

1. 检查后端是否运行

   curl http://localhost:3001/health

2. 检查环境变量

   cat env  # 确认 VITE_API_BASE_URL=http://localhost:3001

3. 检查 CORS 配置 - 后端已配置允许所有来源，通常不会有问题

AI 功能不工作

1. 确认 API Key 有效 - 检查 DeepSeek API Key 是否正确
2. 查看后端日志 - 后端会输出详细的错误信息
3. 检查网络连接 - 确保可以访问 DeepSeek API

📦 项目结构

jsGraphicEditor/
├── backend/              # 后端服务
│   ├── services/        # AI 服务
│   ├── server.js        # Express 服务器
│   └── package.json
├── src/                 # 前端源码
│   ├── components/      # React 组件
│   ├── features/        # 功能模块
│   ├── hooks/           # React Hooks
│   ├── services/        # API 服务
│   └── ...
├── dist/                # 构建输出
├── package.json         # 前端依赖
└── README.md

NPM Package Publishing

Publish Steps

npm login
npm publish  # Auto build and publish

npm publish will automatically execute the prepublishOnly hook to build.

Usage

npm install wanaka-studio-code-vis-editor

import { JSGraphicEditor } from 'wanaka-studio-code-vis-editor';

function App() {
  return <JSGraphicEditor />;
}

Version Update

npm version patch  # 1.0.0 -> 1.0.1
npm publish

License

MIT