# EasyCode ER Diagram Center Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Build the SQL2Doc-style ER diagram center inside the `easycode-web` front project workspace only.

**Architecture:** Keep the existing project diagram page and persistence model, but replace the ER panel with focused Vue components and tested graph utilities. Add a backend Druid-based SQL parser endpoint for MySQL `CREATE TABLE` input, then wire the parsed tables and relations into the same ER draft JSON saved by `front_project_diagram`.

**Tech Stack:** Vue 3, Element Plus, SVG, Vite, Java 8, Spring Boot, Druid SQL parser, JUnit 4, Node `node:test`.

---

### Task 1: ER Graph Utilities

**Files:**
- Create: `easycode-web/src/utils/erChenGraph.js`
- Create: `easycode-web/src/utils/erChenGraph.test.mjs`
- Create: `easycode-web/src/utils/erDraft.js`
- Create: `easycode-web/src/utils/erDraft.test.mjs`
- Modify: `easycode-web/src/utils/erExport.js`

- [x] Write failing tests for normalizing database tables into Chen-style entities, attributes, and inferred relations.
- [x] Implement `buildChenErGraph(tables, draft)` with stable IDs, selected-table filtering, attribute labels, primary-key underline metadata, and inferred `xxx_id` relations.
- [x] Write failing tests for draft normalization and legacy draft compatibility.
- [x] Implement `normalizeErDraft`, `mergeErDraft`, and default style handling.
- [x] Extend export utilities so Chen graph SVG can be generated without depending on live DOM.
- [x] Run `node easycode-web/src/utils/erChenGraph.test.mjs` and `node easycode-web/src/utils/erDraft.test.mjs`.

### Task 2: SQL DDL Parser Endpoint

**Files:**
- Create: `ruoyi-generator/src/main/java/com/ruoyi/generator/domain/front/dto/ParseErSqlRequest.java`
- Create: `ruoyi-generator/src/main/java/com/ruoyi/generator/domain/front/dto/ParseErSqlResponse.java`
- Create: `ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/SqlDdlParseService.java`
- Create: `ruoyi-generator/src/test/java/com/ruoyi/generator/service/front/SqlDdlParseServiceTest.java`
- Modify: `ruoyi-admin/src/main/java/com/ruoyi/web/controller/front/FrontProjectController.java`
- Modify: `easycode-web/src/api/project.js`

- [x] Write failing JUnit tests for parsing MySQL `CREATE TABLE` SQL into tables, columns, primary keys, comments, and inferred relations.
- [x] Implement DTOs and `SqlDdlParseService.parse(String sql)`.
- [x] Add `/front/project/{projectId}/er/parse-sql` to `FrontProjectController`, guarded by the existing project ownership check.
- [x] Add `parseErSql(projectId, data)` to the frontend API module.
- [x] Run `mvn -pl ruoyi-generator -Dtest=SqlDdlParseServiceTest test`.

### Task 3: ER Center Vue Components

**Files:**
- Create: `easycode-web/src/components/er/ErSqlPanel.vue`
- Create: `easycode-web/src/components/er/ErEntityList.vue`
- Create: `easycode-web/src/components/er/ErToolbar.vue`
- Create: `easycode-web/src/components/er/ErChenCanvas.vue`
- Modify: `easycode-web/src/components/ErDiagramView.vue`

- [x] Replace the old table-card ER body with a composed SQL panel, entity list, toolbar, and Chen SVG canvas.
- [x] Support SQL clear/example/upload/regenerate actions through component events.
- [x] Support entity filtering, all-select, graph stats, default layout, beautify layout, font preset, primary-key underline, and line width.
- [x] Support canvas pan, zoom, entity dragging, entity/attribute rename, PNG/SVG/JSON export, and draft updates.
- [x] Preserve the existing `v-model:draft` and `tables` public API so `DiagramCenterView.vue` can remain the owner of persistence.

### Task 4: Diagram Center Integration

**Files:**
- Modify: `easycode-web/src/views/DiagramCenterView.vue`

- [x] Pass project ID and saved SQL draft into `ErDiagramView`.
- [x] Wire `parseErSql` so SQL regeneration updates the local database tables for the ER view without affecting other diagram tabs.
- [x] Save ER draft as `diagram_type = er` with SQL, selected tables, relations, layout, and style.
- [x] Restore saved ER draft on page load.
- [x] Keep all ER center entry points inside `easycode-web`; do not add `ruoyi-ui` routes or menus.

### Task 5: Verification

**Files:**
- Existing touched files only.

- [x] Run frontend utility tests.
- [x] Run the backend SQL parser test.
- [x] Run `npm run build` in `easycode-web` if dependencies are available.
- [x] Report any verification that cannot run, with the command and failure reason.