wangpeng/yidaima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
yidaima/RuoYi-Vue/docs/superpowers/plans/2026-07-07-easycode-er-diagram-center.md

4.5 KiB
Raw Permalink Blame History

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

  • Write failing tests for normalizing database tables into Chen-style entities, attributes, and inferred relations.

  • Implement buildChenErGraph(tables, draft) with stable IDs, selected-table filtering, attribute labels, primary-key underline metadata, and inferred xxx_id relations.

  • Write failing tests for draft normalization and legacy draft compatibility.

  • Implement normalizeErDraft, mergeErDraft, and default style handling.

  • Extend export utilities so Chen graph SVG can be generated without depending on live DOM.

  • 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

  • Write failing JUnit tests for parsing MySQL CREATE TABLE SQL into tables, columns, primary keys, comments, and inferred relations.

  • Implement DTOs and SqlDdlParseService.parse(String sql).

  • Add /front/project/{projectId}/er/parse-sql to FrontProjectController, guarded by the existing project ownership check.

  • Add parseErSql(projectId, data) to the frontend API module.

  • 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

  • Replace the old table-card ER body with a composed SQL panel, entity list, toolbar, and Chen SVG canvas.

  • Support SQL clear/example/upload/regenerate actions through component events.

  • Support entity filtering, all-select, graph stats, default layout, beautify layout, font preset, primary-key underline, and line width.

  • Support canvas pan, zoom, entity dragging, entity/attribute rename, PNG/SVG/JSON export, and draft updates.

  • 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

  • Pass project ID and saved SQL draft into ErDiagramView.

  • Wire parseErSql so SQL regeneration updates the local database tables for the ER view without affecting other diagram tabs.

  • Save ER draft as diagram_type = er with SQL, selected tables, relations, layout, and style.

  • Restore saved ER draft on page load.

  • 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.

  • Run frontend utility tests.

  • Run the backend SQL parser test.

  • Run npm run build in easycode-web if dependencies are available.

  • Report any verification that cannot run, with the command and failure reason.