feat(comments): apply COMMENT to entities and relationships, toggle in place

- Parse table-level COMMENT (MySQL CREATE TABLE ... COMMENT='...') and
  DBML Table Note: '...' / Note { '...' }; relationships pick up
  Ref [note: '...'] or fall back to the FK column's COMMENT.
- generateChenModelData uses pickLabel for entities and relationships,
  embedding nameLabel/commentLabel on every node so the toggle can switch
  without regenerating the graph.
- setShowComment now mutates labels in place and refreshes connected edges
  instead of calling handleGenerate, preserving layout.
- Rewrite custom-node update for entity/attribute/relationship to mutate
  shapes in place: keeps G6's keyShape reference valid, recomputes size on
  label change, and toggles the PK underline. Fixes rectangle edits not
  showing the new label and edges not reconnecting until the node is
  dragged.
- Editor finishEditing refreshes edges connected to the edited node so
  endpoints follow the new bbox immediately.
- Rename Chinese label "属性显示注释" -> "展示 COMMENT".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ystemsrx

src/builder.ts

@@ -266,6 +266,18 @@ export function setupNodeDoubleClickEdit(
                     }
                 }
                 graph.updateItem(editingNode, { label: newLabel });
+
+                // 节点 label 变化会改变其包围盒尺寸，但 G6 不会主动让连线重新跑
+                // getLinkPoint —— 必须显式刷新与该节点相连的边，否则要等用户拖
+                // 一下节点连线才会贴上来。
+                const nodeId = model.id;
+                graph.getEdges().forEach((edge) => {
+                    const em = edge.getModel();
+                    if (em.source === nodeId || em.target === nodeId) {
+                        graph.updateItem(edge, {});
+                    }
+                });
+                if (graph.refresh) graph.refresh();
             }
         }
 

src/editor.tsx

@@ -326,10 +326,32 @@ export function useGraph({ t, initialLang }: UseGraphOptions): UseGraphResult {
 
   const setShowComment = (next: boolean) => {
     setShowCommentState(next);
-    if (hasGraph && lastInputRef.current) {
-      // 标签内容变化需要重新生成（节点 label 不可热更新）
-      handleGenerate({ showComment: next });
-    }
+    const graph = graphRef.current;
+    if (!hasGraph || !graph || graph.destroyed) return;
+    // 不再走 handleGenerate 重建图；直接用每个节点上预先存的 nameLabel /
+    // commentLabel 切换 label 字段。布局保持原样，连线在 builder 的 update
+    // 里会随节点尺寸变化自动重画（连带的边刷新仍然显式做一次以兜底）。
+    graph.setAutoPaint(false);
+    graph.getNodes().forEach((node) => {
+      const m = node.getModel() as ERNodeModel & {
+        nameLabel?: string;
+        commentLabel?: string;
+      };
+      const nameLabel = m.nameLabel;
+      const commentLabel = m.commentLabel;
+      if (nameLabel === undefined && commentLabel === undefined) return;
+      const target = next
+        ? commentLabel || nameLabel || m.label
+        : nameLabel || m.label;
+      if (target !== undefined && target !== m.label) {
+        graph.updateItem(node, { label: target });
+      }
+    });
+    // 节点尺寸可能因 label 变化而改变，强制让所有边按新 bbox 重算端点。
+    graph.getEdges().forEach((edge) => graph.updateItem(edge, {}));
+    if (graph.refresh) graph.refresh();
+    graph.paint();
+    graph.setAutoPaint(true);
   };
 
   const setHideFields = (next: boolean) => {

src/hooks/useGraph.ts

@@ -7,7 +7,7 @@ export const I18N = {
           pageTitle: "SQL/DBML2ER",
           cardInputTitle: "SQL / DBML",
           cardPreviewTitle: "ER 图预览",
-          showComment: "属性显示注释",
+          showComment: "展示 COMMENT",
           hideFields: "隐藏属性",
           editorPlaceholder: "在此处粘贴您的 CREATE TABLE 或 DBML 语句...",
           btnGenerate: "⚡ 生成 ER 图",

src/i18n.ts

@@ -370,9 +370,38 @@ interface ParsedRefStatement {
   from: RefTarget;
   to: RefTarget;
   op: string;
+  comment?: string;
 }
 
-const parseRefBody = (body: string): ParsedRefStatement | null => {
+// Ref 顶层 settings 块 `[delete: cascade, note: 'xxx']` 中的 note 是关系注释。
+// 拆出来：返回 (剥掉外层 [...] 后的 body, 提取到的 note 字符串)。
+const stripRefSettings = (
+  body: string,
+): { body: string; comment?: string } => {
+  let cleaned = body;
+  let comment: string | undefined;
+  const lb = indexOfUnquoted(cleaned, "[");
+  if (lb !== -1) {
+    const rb = findMatchingBracket(cleaned, lb);
+    if (rb !== -1) {
+      const inner = cleaned.slice(lb + 1, rb);
+      // 注意 parseRefTarget 也会剥掉粘在右目标后面的 [...]；这里 stripRefSettings
+      // 只是把"留在 body 里的 settings 文字"再抽一层 note 出来供关系节点显示。
+      for (const attr of splitTopLevelCommas(inner)) {
+        const colon = indexOfUnquoted(attr, ":");
+        if (colon === -1) continue;
+        const key = attr.slice(0, colon).trim().toLowerCase();
+        const value = attr.slice(colon + 1).trim();
+        if (key === "note") comment = stripQuotes(value);
+      }
+      cleaned = (cleaned.slice(0, lb) + " " + cleaned.slice(rb + 1)).trim();
+    }
+  }
+  return { body: cleaned, comment };
+};
+
+const parseRefBody = (rawBody: string): ParsedRefStatement | null => {
+  const { body, comment } = stripRefSettings(rawBody);
   let i = 0;
   while (i < body.length) {
     const ch = body[i];
@@ -385,14 +414,17 @@ const parseRefBody = (body: string): ParsedRefStatement | null => {
       const right = body.slice(i + 2).trim();
       const from = parseRefTarget(left);
       const to = parseRefTarget(right);
-      return from && to ? { from, to, op: "<>" } : null;
+      return from && to
+        ? { from, to, op: "<>", ...(comment ? { comment } : {}) }
+        : null;
     }
     if (ch === "<" || ch === ">" || ch === "-") {
       const left = body.slice(0, i).trim();
       const right = body.slice(i + 1).trim();
       const from = parseRefTarget(left);
       const to = parseRefTarget(right);
-      if (from && to) return { from, to, op: ch };
+      if (from && to)
+        return { from, to, op: ch, ...(comment ? { comment } : {}) };
     }
     i++;
   }
@@ -592,6 +624,7 @@ const addRelationship = (
     label: ref.from.column,
     fromCardinality: card.from,
     toCardinality: card.to,
+    ...(ref.comment ? { comment: ref.comment } : {}),
   });
   const t = tableByName.get(ref.from.table);
   if (t) {
@@ -604,6 +637,29 @@ const addRelationship = (
   }
 };
 
+// 从表 body 中提取 `Note: '...'` 或 `Note { '...' }` 作为表级注释。
+// 不修改原 body —— 调用方会照常用 splitLogicalLines 跳过 Note 行。
+const extractTableNote = (body: string): string | undefined => {
+  const lines = splitLogicalLines(body);
+  for (const raw of lines) {
+    const line = raw.trim();
+    if (!/^Note\s*[:{]/i.test(line)) continue;
+    const afterNote = line.slice(4).trim();
+    if (afterNote.startsWith(":")) {
+      const v = afterNote.slice(1).trim();
+      if (v) return stripQuotes(v);
+      continue;
+    }
+    if (afterNote.startsWith("{")) {
+      const close = findMatchingBrace(afterNote, 0);
+      if (close === -1) continue;
+      const inner = afterNote.slice(1, close).trim();
+      if (inner) return stripQuotes(inner);
+    }
+  }
+  return undefined;
+};
+
 export const parseDBML = (dbml: string): ParseResult => {
   const tables: ParsedTable[] = [];
   const relationships: ParsedRelationship[] = [];
@@ -656,12 +712,14 @@ export const parseDBML = (dbml: string): ParseResult => {
         columns.push(column);
       }
 
+      const tableNote = extractTableNote(stmt.body);
       const table: ParsedTable = {
         name: head.name,
         alias: head.alias,
         columns,
         primaryKeys,
         foreignKeys,
+        ...(tableNote ? { comment: tableNote } : {}),
       };
       tables.push(table);
       tableByName.set(head.name, table);

src/parser/dbml.ts

@@ -158,7 +158,9 @@ const splitTopLevelComma = (body: string) => {
   return parts;
 };
 
-const extractMainBody = (statement: string) => {
+const extractMainBody = (
+  statement: string,
+): { body: string; suffix: string } | null => {
   const openParenIndex = statement.indexOf("(");
   if (openParenIndex === -1) return null;
   let closeParenIndex = -1;
@@ -181,9 +183,18 @@ const extractMainBody = (statement: string) => {
       depth--;
     }
   }
-  return closeParenIndex === -1
-    ? null
-    : statement.substring(openParenIndex + 1, closeParenIndex);
+  if (closeParenIndex === -1) return null;
+  return {
+    body: statement.substring(openParenIndex + 1, closeParenIndex),
+    suffix: statement.substring(closeParenIndex + 1),
+  };
+};
+
+// 解析 CREATE TABLE 末尾的表级 COMMENT。MySQL 写法 `... ) ENGINE=InnoDB COMMENT='xxx'`
+// 或 `COMMENT 'xxx'`；PostgreSQL 用 COMMENT ON TABLE 单独语句，这里不处理。
+const extractTableComment = (suffix: string): string | undefined => {
+  const m = suffix.match(/\bCOMMENT\s*=?\s*'((?:[^'\\]|''|\\.)*)'/i);
+  return m ? m[1].replace(/''/g, "'") : undefined;
 };
 
 const parseIdentifierList = (text: string) =>
@@ -217,8 +228,10 @@ export const parseSQLTables = (sql: string): ParseResult => {
     // FK 都继承自父表。强行解析会得到一个空节点漂在图上，干扰阅读。
     if (/\bPARTITION\s+OF\b/i.test(statement)) return;
 
-    const tableBody = extractMainBody(statement);
-    if (!tableBody) return;
+    const extracted = extractMainBody(statement);
+    if (!extracted) return;
+    const tableBody = extracted.body;
+    const tableComment = extractTableComment(extracted.suffix);
 
     const columns: ParsedColumn[] = [];
     const primaryKeys: string[] = [];
@@ -296,6 +309,7 @@ export const parseSQLTables = (sql: string): ParseResult => {
       columns,
       primaryKeys,
       foreignKeys,
+      ...(tableComment ? { comment: tableComment } : {}),
     });
 
     foreignKeys.forEach((fk) => {
@@ -312,6 +326,9 @@ export const parseSQLTables = (sql: string): ParseResult => {
         label: fk.column,
         fromCardinality,
         toCardinality: "1",
+        // SQL 没有原生关系级注释，但用户的认知里"FK 注释 == 关系注释"是
+        // 自然的：用 FK 列上的 COMMENT 'xxx' 作为关系的注释来源。
+        ...(fkCol?.comment ? { comment: fkCol.comment } : {}),
       });
     });
   });

src/parser/sql.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+import { parseSQLTables } from "../parser/sql";
+import { parseDBML } from "../parser/dbml";
+import { generateChenModelData } from "../builder";
+
+describe("user-input repro", () => {
+  const inputs = [
+    `CREATE TABLE users (id INT PRIMARY KEY) COMMENT='users table';`,
+    `CREATE TABLE u (id INT PRIMARY KEY COMMENT 'pk', name VARCHAR(50) COMMENT 'user name');`,
+    `CREATE TABLE p (id INT PRIMARY KEY); CREATE TABLE c (id INT PRIMARY KEY, p_id INT COMMENT 'parent', FOREIGN KEY (p_id) REFERENCES p(id));`,
+    `Table u { id int [pk] Note: 'a note' }`,
+    `Table u { id int [pk] }\nTable p { uid int [ref: > u.id, note: 'belongs'] }`,
+    `Table u { id int [pk] }\nTable p { uid int }\nRef: p.uid > u.id [note: 'fk note']`,
+  ];
+  for (const sql of inputs) {
+    it(`parses+builds: ${sql.slice(0,40)}`, () => {
+      let parsed = parseSQLTables(sql);
+      if (parsed.tables.length === 0) parsed = parseDBML(sql);
+      expect(() => generateChenModelData(parsed.tables, parsed.relationships, true, "comment", false)).not.toThrow();
+    });
+  }
+});

src/test/repro.test.ts

@@ -26,6 +26,7 @@ export interface ParsedTable {
   columns: ParsedColumn[];
   primaryKeys: string[];
   foreignKeys: ParsedForeignKey[];
+  comment?: string;
 }
 
 export interface ParsedRelationship {
@@ -36,6 +37,7 @@ export interface ParsedRelationship {
   // 这是 SQL FK 与 DBML `>` 的隐含语义。
   fromCardinality?: Cardinality;
   toCardinality?: Cardinality;
+  comment?: string;
 }
 
 export interface ParseResult {