Spaces:

mistpe
/

ER

Running

App Files Files Community

mistpe commited on Apr 1, 2025

Commit

80bab2e

verified ·

1 Parent(s): 2e9eb5e

Update index.html

Browse files

Files changed (1) hide show

index.html +932 -19

index.html CHANGED Viewed

@@ -1,19 +1,932 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ER图生成器</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f5f5f5;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+        .container {
+            display: flex;
+            height: 100vh;
+        }
+        .editor-panel {
+            flex: 0 0 40%;
+            padding: 20px;
+            background-color: white;
+            border-right: 1px solid #ddd;
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+        }
+        .preview-panel {
+            flex: 0 0 60%;
+            background-color: white;
+            overflow: auto;
+        }
+        h1, h2, h3 {
+            color: #333;
+            margin-top: 0;
+        }
+        .title-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #eee;
+        }
+        textarea {
+            flex: 1;
+            padding: 10px;
+            font-family: monospace;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            resize: none;
+            min-height: 300px;
+        }
+        button {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 15px;
+            font-size: 16px;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        .syntax-guide {
+            margin-top: 20px;
+            background-color: #f9f9f9;
+            padding: 15px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        pre {
+            white-space: pre-wrap;
+            margin: 0;
+            font-family: monospace;
+            font-size: 14px;
+        }
+        input[type="text"] {
+            padding: 8px 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 16px;
+            width: 300px;
+        }
+        .preview-controls {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+        }
+        #svgContainer {
+            padding: 20px;
+        }
+        svg {
+            display: block;
+            margin: 0 auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="editor-panel">
+            <div class="title-bar">
+                <h2>ER图代码编辑器</h2>
+            </div>
+            <textarea id="erCode" rows="20">// 实体定义
+entity: 员工
+  pk: 员工编号
+  attr: 姓名
+  attr: 性别
+  attr: 出生日期
+  attr: 电话
+entity: 部门
+  pk: 部门编号
+  attr: 部门名称
+  attr: 位置
+entity: 项目
+  pk: 项目编号
+  attr: 项目名称
+  attr: 开始日期
+  attr: 结束日期
+  attr: 预算
+entity: 客户
+  pk: 客户编号
+  attr: 客户名称
+  attr: 联系人
+  attr: 电话
+relation: 隶属
+  from: 员工 (N)
+  to: 部门 (1)
+relation: 管理
+  from: 员工 (1)
+  to: 项目 (N)
+relation: 参与
+  from: 员工 (N)
+  to: 项目 (N)
+relation: 合作
+  from: 项目 (N)
+  to: 客户 (1)</textarea>
+            <button id="generateBtn">生成ER图</button>
+            <div class="syntax-guide">
+                <h3>语法说明:</h3>
+                <pre>// 实体定义
+entity: 实体名
+  pk: 主键字段
+  attr: 属性1
+  attr: 属性2
+// 关系定义
+relation: 关系名
+  from: 实体1 (基数)
+  to: 实体2 (基数)
+// 基数表示: 1, N, M等</pre>
+            </div>
+        </div>
+        <div class="preview-panel">
+            <div class="preview-controls">
+                <div class="title-bar">
+                    <h2>ER图预览</h2>
+                    <div>
+                        <span>标题: </span>
+                        <input type="text" id="diagramTitle" value="企业人事管理系统">
+                    </div>
+                </div>
+            </div>
+            <div id="svgContainer"></div>
+        </div>
+    </div>
+    <script>
+        // 解析ER图代码
+        function parseERCode(code) {
+            const entities = [];
+            const relations = [];
+            let currentEntity = null;
+            let currentRelation = null;
+            const lines = code.split('\n');
+            for (const line of lines) {
+                const trimmedLine = line.trim();
+                if (trimmedLine === '' || trimmedLine.startsWith('//')) continue;
+                // 实体定义
+                if (trimmedLine.startsWith('entity:')) {
+                    if (currentEntity) entities.push(currentEntity);
+                    if (currentRelation) relations.push(currentRelation);
+                    currentEntity = {
+                        name: trimmedLine.substring(7).trim(),
+                        pk: null,
+                        attributes: []
+                    };
+                    currentRelation = null;
+                }
+                // 主键定义
+                else if (trimmedLine.startsWith('pk:') && currentEntity) {
+                    currentEntity.pk = trimmedLine.substring(3).trim();
+                }
+                // 属性定义
+                else if (trimmedLine.startsWith('attr:') && currentEntity) {
+                    currentEntity.attributes.push(trimmedLine.substring(5).trim());
+                }
+                // 关系定义
+                else if (trimmedLine.startsWith('relation:')) {
+                    if (currentEntity) entities.push(currentEntity);
+                    if (currentRelation) relations.push(currentRelation);
+                    currentEntity = null;
+                    currentRelation = {
+                        name: trimmedLine.substring(9).trim(),
+                        from: null,
+                        to: null
+                    };
+                }
+                // 关系源
+                else if (trimmedLine.startsWith('from:') && currentRelation) {
+                    const match = trimmedLine.match(/from:\s+([^\(]+)\s+\(([^\)]+)\)/);
+                    if (match) {
+                        currentRelation.from = {
+                            entity: match[1].trim(),
+                            cardinality: match[2].trim()
+                        };
+                    }
+                }
+                // 关系目标
+                else if (trimmedLine.startsWith('to:') && currentRelation) {
+                    const match = trimmedLine.match(/to:\s+([^\(]+)\s+\(([^\)]+)\)/);
+                    if (match) {
+                        currentRelation.to = {
+                            entity: match[1].trim(),
+                            cardinality: match[2].trim()
+                        };
+                    }
+                }
+            }
+            // 添加最后一个实体或关系
+            if (currentEntity) entities.push(currentEntity);
+            if (currentRelation) relations.push(currentRelation);
+            return { entities, relations };
+        }
+        // 创建ER图布局
+        function createLayout(entities, relations) {
+            // 基础画布尺寸设置
+            const minWidth = 1200;
+            const minHeight = 900;
+            const width = Math.max(minWidth, entities.length * 300);
+            const height = Math.max(minHeight, entities.length * 250);
+            const layout = {
+                width: width,
+                height: height,
+                entities: {},
+                relations: {}
+            };
+            // 实体位置分配 - 改进的分区策略
+            if (entities.length <= 4) {
+                // 使用更合理的四角布局
+                const positions = [
+                    { x: width / 2, y: height * 0.25 },  // 上
+                    { x: width * 0.25, y: height / 2 },  // 左
+                    { x: width * 0.75, y: height / 2 },  // 右
+                    { x: width / 2, y: height * 0.75 }   // 下
+                ];
+                entities.forEach((entity, index) => {
+                    layout.entities[entity.name] = {
+                        x: positions[index].x,
+                        y: positions[index].y,
+                        width: 120,
+                        height: 60,
+                        attributes: [],
+                        section: index // 记录实体所在区域（上/左/右/下）
+                    };
+                });
+            } else {
+                // 多实体情况下的均匀分布
+                const centerX = width / 2;
+                const centerY = height / 2;
+                const radius = Math.min(width, height) * 0.3;
+                entities.forEach((entity, index) => {
+                    const angle = (index * 2 * Math.PI) / entities.length;
+                    const x = centerX + radius * Math.cos(angle);
+                    const y = centerY + radius * Math.sin(angle);
+                    // 确定���域象限
+                    let section;
+                    if (y < centerY && Math.abs(x - centerX) < radius * 0.5) section = 0; // 上
+                    else if (x < centerX && Math.abs(y - centerY) < radius * 0.5) section = 1; // 左
+                    else if (x > centerX && Math.abs(y - centerY) < radius * 0.5) section = 2; // 右
+                    else section = 3; // 下
+                    layout.entities[entity.name] = {
+                        x: x,
+                        y: y,
+                        width: 120,
+                        height: 60,
+                        attributes: [],
+                        section: section
+                    };
+                });
+            }
+            // 属性布局优化 - 根据实体区域确定属性位置
+            const occupiedSpaces = []; // 记录所有已占用的空间
+            // 先添加所有实体占用的空间
+            for (const [entityName, entityLayout] of Object.entries(layout.entities)) {
+                occupiedSpaces.push({
+                    x: entityLayout.x,
+                    y: entityLayout.y,
+                    width: entityLayout.width + 20, // 额外边距
+                    height: entityLayout.height + 20,
+                    type: 'entity'
+                });
+            }
+            // 为每个实体分配属性空间
+            for (const [entityName, entityLayout] of Object.entries(layout.entities)) {
+                const entity = entities.find(e => e.name === entityName);
+                if (!entity) continue;
+                // 收集属性
+                const allAttributes = [];
+                if (entity.pk) {
+                    allAttributes.push({ name: entity.pk, isPk: true });
+                }
+                entity.attributes.forEach(attr => {
+                    allAttributes.push({ name: attr, isPk: false });
+                });
+                // 根据实体区域确定属性首选方向
+                let preferredDirections = [];
+                switch(entityLayout.section) {
+                    case 0: // 上方实体
+                        preferredDirections = ['top', 'left', 'right', 'bottom'];
+                        break;
+                    case 1: // 左侧实体
+                        preferredDirections = ['left', 'top', 'bottom', 'right'];
+                        break;
+                    case 2: // 右侧实体
+                        preferredDirections = ['right', 'top', 'bottom', 'left'];
+                        break;
+                    case 3: // 下方实体
+                        preferredDirections = ['bottom', 'left', 'right', 'top'];
+                        break;
+                }
+                // 为主键找最优位置（首选方向）
+                let pkIndex = allAttributes.findIndex(attr => attr.isPk);
+                if (pkIndex >= 0) {
+                    const pk = allAttributes[pkIndex];
+                    const bestDirection = findBestDirection(entityLayout, pk, preferredDirections[0], occupiedSpaces);
+                    // 放置主键
+                    const pkPosition = positionInDirection(entityLayout, bestDirection, 120);
+                    entityLayout.pk = {
+                        x: pkPosition.x,
+                        y: pkPosition.y,
+                        width: 60,
+                        height: 35,
+                        name: pk.name
+                    };
+                    // 添加到已占用空间
+                    occupiedSpaces.push({
+                        x: pkPosition.x,
+                        y: pkPosition.y,
+                        width: 130, // 为了避免重叠增加了空间
+                        height: 80,
+                        type: 'pk'
+                    });
+                    // 从属性列表移除
+                    allAttributes.splice(pkIndex, 1);
+                }
+                // 为普通属性找位置（尽量按首选方向，但可调整避免重叠）
+                allAttributes.forEach((attr, i) => {
+                    // 尝试每个方向直到找到合适位置
+                    let bestDirection = null;
+                    let bestPosition = null;
+                    // 尝试所有方向
+                    for (const direction of preferredDirections) {
+                        // 生成候选位置（带偏移）
+                        for (let offset = 0; offset <= 4; offset++) {
+                            const distance = 120 + offset * 20; // 逐渐增加距离
+                            const angleOffset = (offset * 0.1) * (i % 2 === 0 ? 1 : -1); // 左右交替偏移
+                            const position = positionInDirection(entityLayout, direction, distance, angleOffset);
+                            // 检查是否与已占用空间重叠
+                            if (!hasOverlap(position, occupiedSpaces)) {
+                                bestDirection = direction;
+                                bestPosition = position;
+                                break;
+                            }
+                        }
+                        if (bestPosition) break; // 找到了就停止寻找
+                    }
+                    // 如果没找到无重叠位置，取最后一个方向的位置并强制增加距离
+                    if (!bestPosition) {
+                        const lastDirection = preferredDirections[preferredDirections.length - 1];
+                        bestPosition = positionInDirection(entityLayout, lastDirection, 200 + i * 30);
+                    }
+                    // 放置属性
+                    const attrObj = {
+                        x: bestPosition.x,
+                        y: bestPosition.y,
+                        width: 55,
+                        height: 30,
+                        name: attr.name
+                    };
+                    entityLayout.attributes.push(attrObj);
+                    // 添加到已占用空间
+                    occupiedSpaces.push({
+                        x: bestPosition.x,
+                        y: bestPosition.y,
+                        width: 120,
+                        height: 70,
+                        type: 'attr'
+                    });
+                });
+            }
+            // 关系位置优化 - 动态调整关系菱形位置
+            relations.forEach(relation => {
+                const fromEntity = layout.entities[relation.from.entity];
+                const toEntity = layout.entities[relation.to.entity];
+                if (fromEntity && toEntity) {
+                    // 计算两实体中点
+                    const dx = toEntity.x - fromEntity.x;
+                    const dy = toEntity.y - fromEntity.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    // 动态调整居中比例 - 距离越远比例越接近0.5
+                    const ratio = 0.4 + (distance / 1500); // 调整系数使布局更紧凑
+                    const midX = fromEntity.x + dx * ratio;
+                    const midY = fromEntity.y + dy * ratio;
+                    // 寻找无重叠位置
+                    let bestX = midX;
+                    let bestY = midY;
+                    let minOverlaps = Number.MAX_VALUE;
+                    // 在中点附近探索多个位置
+                    for (let offsetX = -60; offsetX <= 60; offsetX += 20) {
+                        for (let offsetY = -60; offsetY <= 60; offsetY += 20) {
+                            const testX = midX + offsetX;
+                            const testY = midY + offsetY;
+                            // 计算此位置与已有组件的重叠数
+                            let overlaps = 0;
+                            for (const space of occupiedSpaces) {
+                                if (isPointInRect(testX, testY, space)) {
+                                    overlaps++;
+                                }
+                            }
+                            // 如果有更少重叠，更新最佳位置
+                            if (overlaps < minOverlaps) {
+                                minOverlaps = overlaps;
+                                bestX = testX;
+                                bestY = testY;
+                                // 如果没有重叠，立即使用
+                                if (overlaps === 0) break;
+                            }
+                        }
+                        if (minOverlaps === 0) break;
+                    }
+                    // 如果还是有重叠，再增加搜索范围
+                    if (minOverlaps > 0) {
+                        const perpX = -dy / distance * 100; // 垂直于连线方向
+                        const perpY = dx / distance * 100;
+                        // 尝试垂直偏移
+                        bestX = midX + perpX;
+                        bestY = midY + perpY;
+                        // 检查是否仍有重叠
+                        let stillOverlap = false;
+                        for (const space of occupiedSpaces) {
+                            if (isPointInRect(bestX, bestY, space)) {
+                                stillOverlap = true;
+                                break;
+                            }
+                        }
+                        // ��有必要，尝试反方向
+                        if (stillOverlap) {
+                            bestX = midX - perpX;
+                            bestY = midY - perpY;
+                        }
+                    }
+                    // 保存最终关系位置
+                    layout.relations[relation.name] = {
+                        x: bestX,
+                        y: bestY,
+                        width: 45,
+                        height: 25,
+                        from: relation.from,
+                        to: relation.to
+                    };
+                    // 添加到已占用空间
+                    occupiedSpaces.push({
+                        x: bestX,
+                        y: bestY,
+                        width: 100,
+                        height: 60,
+                        type: 'relation'
+                    });
+                }
+            });
+            return layout;
+        }
+        // 辅助函数: 检查位置是否与已占用空间重叠
+        function hasOverlap(position, occupiedSpaces) {
+            const testRect = {
+                x: position.x,
+                y: position.y,
+                width: 120, // 属性空间
+                height: 70
+            };
+            for (const space of occupiedSpaces) {
+                if (doRectsOverlap(testRect, space)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        // 矩形重叠检测
+        function doRectsOverlap(rect1, rect2) {
+            const minDistance = (rect1.width + rect2.width) / 2 * 0.8; // 80%宽度作为水平安全距离
+            const minVertical = (rect1.height + rect2.height) / 2 * 0.8; // 80%高度作为垂直安全距离
+            const dx = Math.abs(rect1.x - rect2.x);
+            const dy = Math.abs(rect1.y - rect2.y);
+            return dx < minDistance && dy < minVertical;
+        }
+        // 检查点是否在矩形内（或距离过近）
+        function isPointInRect(x, y, rect) {
+            const halfWidth = rect.width / 2;
+            const halfHeight = rect.height / 2;
+            return Math.abs(x - rect.x) < halfWidth &&
+                   Math.abs(y - rect.y) < halfHeight;
+        }
+        // 在指定方向上找位置（带角度偏移）
+        function positionInDirection(entityLayout, direction, distance, angleOffset = 0) {
+            let angle;
+            switch(direction) {
+                case 'top':
+                    angle = -Math.PI/2 + (angleOffset || 0);
+                    break;
+                case 'right':
+                    angle = 0 + (angleOffset || 0);
+                    break;
+                case 'bottom':
+                    angle = Math.PI/2 + (angleOffset || 0);
+                    break;
+                case 'left':
+                    angle = Math.PI + (angleOffset || 0);
+                    break;
+            }
+            return {
+                x: entityLayout.x + Math.cos(angle) * distance,
+                y: entityLayout.y + Math.sin(angle) * distance
+            };
+        }
+        // 找到最佳方向（最少重叠）
+        function findBestDirection(entityLayout, attr, preferredDirection, occupiedSpaces) {
+            const directions = ['top', 'right', 'bottom', 'left'];
+            let bestDirection = preferredDirection;
+            let minOverlaps = Number.MAX_VALUE;
+            // 尝试所有方向
+            for (const direction of directions) {
+                const position = positionInDirection(entityLayout, direction, 120);
+                // 计算此方向的重叠
+                let overlaps = 0;
+                for (const space of occupiedSpaces) {
+                    if (isPointInRect(position.x, position.y, space)) {
+                        overlaps++;
+                    }
+                }
+                // 优先考虑首选方向，但也要权衡重叠情况
+                const directionPenalty = (direction === preferredDirection) ? 0 : 1;
+                const score = overlaps + directionPenalty;
+                if (score < minOverlaps) {
+                    minOverlaps = score;
+                    bestDirection = direction;
+                }
+            }
+            return bestDirection;
+        }
+        // 计算实体与关系之间的连接点
+        function calculateConnectionPoint(entity, relation) {
+            const dx = relation.x - entity.x;
+            const dy = relation.y - entity.y;
+            const angle = Math.atan2(dy, dx);
+            // 计算矩形边界上的交点
+            let intersectX, intersectY;
+            // 计算水平和垂直方向的交点距离
+            const width = entity.width / 2;
+            const height = entity.height / 2;
+            // 处理特殊情况 - 垂直或水平线
+            if (Math.abs(dx) < 0.001) { // 垂直线
+                intersectX = entity.x;
+                intersectY = entity.y + Math.sign(dy) * height;
+            } else if (Math.abs(dy) < 0.001) { // 水平线
+                intersectX = entity.x + Math.sign(dx) * width;
+                intersectY = entity.y;
+            } else {
+                // 一般情况 - 计算与矩形边界的交点
+                const slope = dy / dx;
+                const invSlope = dx / dy;
+                // 检查与垂直边界的交点
+                const vertX = entity.x + Math.sign(dx) * width;
+                const vertY = entity.y + slope * (vertX - entity.x);
+                // 检查与水平边界的交点
+                const horizY = entity.y + Math.sign(dy) * height;
+                const horizX = entity.x + invSlope * (horizY - entity.y);
+                // 选择最接近实体中心的交点
+                const dxVert = Math.abs(vertX - entity.x);
+                const dyVert = Math.abs(vertY - entity.y);
+                const dVert = Math.sqrt(dxVert * dxVert + dyVert * dyVert);
+                const dxHoriz = Math.abs(horizX - entity.x);
+                const dyHoriz = Math.abs(horizY - entity.y);
+                const dHoriz = Math.sqrt(dxHoriz * dxHoriz + dyHoriz * dyHoriz);
+                if (dVert <= dHoriz && Math.abs(vertY - entity.y) <= height) {
+                    intersectX = vertX;
+                    intersectY = vertY;
+                } else if (Math.abs(horizX - entity.x) <= width) {
+                    intersectX = horizX;
+                    intersectY = horizY;
+                } else {
+                    // 边缘情况 - 使用角点
+                    intersectX = entity.x + Math.sign(dx) * width;
+                    intersectY = entity.y + Math.sign(dy) * height;
+                }
+            }
+            return { x: intersectX, y: intersectY };
+        }
+        // 计算实体到属性的连接点
+        function calculateEntityToAttributeConnection(entity, attribute) {
+            const dx = attribute.x - entity.x;
+            const dy = attribute.y - entity.y;
+            const angle = Math.atan2(dy, dx);
+            // 同样的方法，但简化版本
+            const width = entity.width / 2;
+            const height = entity.height / 2;
+            // 考虑特殊情况
+            if (Math.abs(dx) < 0.001) { // 垂直线
+                return {
+                    x: entity.x,
+                    y: entity.y + Math.sign(dy) * height
+                };
+            } else if (Math.abs(dy) < 0.001) { // 水平线
+                return {
+                    x: entity.x + Math.sign(dx) * width,
+                    y: entity.y
+                };
+            } else {
+                // 一般情况
+                const slope = dy / dx;
+                // 比较水平和垂直交点
+                const tx = width / Math.abs(Math.cos(angle));
+                const ty = height / Math.abs(Math.sin(angle));
+                if (tx < ty) {
+                    return {
+                        x: entity.x + Math.sign(dx) * width,
+                        y: entity.y + slope * Math.sign(dx) * width
+                    };
+                } else {
+                    return {
+                        x: entity.x + Math.sign(dy) * height / slope,
+                        y: entity.y + Math.sign(dy) * height
+                    };
+                }
+            }
+        }
+        // 计算属性到实体的连接点 (用于椭圆)
+        function calculateAttributeToEntityConnection(attribute, entity) {
+            const dx = entity.x - attribute.x;
+            const dy = entity.y - attribute.y;
+            const angle = Math.atan2(dy, dx);
+            // 椭圆上的点
+            return {
+                x: attribute.x + Math.cos(angle) * attribute.width,
+                y: attribute.y + Math.sin(angle) * attribute.height
+            };
+        }
+        // 生成SVG
+        function generateSVG(entities, relations, layout, title) {
+            // 首先准备SVG容器
+            let svgContent = `
+            <svg width="${layout.width}" height="${layout.height}" xmlns="http://www.w3.org/2000/svg">
+            `;
+            // 添加标题
+            svgContent += `
+                <text x="${layout.width/2}" y="40" text-anchor="middle" font-size="24" font-weight="bold" fill="#333">${title}</text>
+            `;
+            // 创建分层SVG - 确保正确的Z顺序
+            // 1. 底层：所有连接线
+            let linesLayer = '<g id="lines-layer">\n';
+            // 2. 实体-关系连接线
+            for (const [relationName, relationLayout] of Object.entries(layout.relations)) {
+                const fromEntity = layout.entities[relationLayout.from.entity];
+                const toEntity = layout.entities[relationLayout.to.entity];
+                if (fromEntity && toEntity) {
+                    // 计算精确的连接点
+                    const fromConnection = calculateConnectionPoint(fromEntity, relationLayout);
+                    const toConnection = calculateConnectionPoint(toEntity, relationLayout);
+                    // 实体-关系连接线
+                    linesLayer += `
+                        <line x1="${fromConnection.x}" y1="${fromConnection.y}" x2="${relationLayout.x}" y2="${relationLayout.y}"
+                              stroke="#6c757d" stroke-width="2" />
+                        <line x1="${relationLayout.x}" y1="${relationLayout.y}" x2="${toConnection.x}" y2="${toConnection.y}"
+                              stroke="#6c757d" stroke-width="2" />
+                    `;
+                    // 基数标记位置 - 距离实体连接点1/4处
+                    const fromCardX = fromConnection.x + (relationLayout.x - fromConnection.x) * 0.25;
+                    const fromCardY = fromConnection.y + (relationLayout.y - fromConnection.y) * 0.25;
+                    const toCardX = toConnection.x + (relationLayout.x - toConnection.x) * 0.25;
+                    const toCardY = toConnection.y + (relationLayout.y - toConnection.y) * 0.25;
+                    // 基数文本
+                    linesLayer += `
+                        <text x="${fromCardX}" y="${fromCardY}" text-anchor="middle" dominant-baseline="middle"
+                              font-weight="bold" font-size="16" fill="#dc3545">${relationLayout.from.cardinality}</text>
+                        <text x="${toCardX}" y="${toCardY}" text-anchor="middle" dominant-baseline="middle"
+                              font-weight="bold" font-size="16" fill="#dc3545">${relationLayout.to.cardinality}</text>
+                    `;
+                }
+            }
+            // 实体-属性连接线
+            for (const [entityName, entityLayout] of Object.entries(layout.entities)) {
+                // 主键连接线
+                if (entityLayout.pk) {
+                    const pk = entityLayout.pk;
+                    // 计算精确的连接点
+                    const entityConnection = calculateEntityToAttributeConnection(entityLayout, pk);
+                    const pkConnection = calculateAttributeToEntityConnection(pk, entityLayout);
+                    linesLayer += `
+                        <line x1="${entityConnection.x}" y1="${entityConnection.y}" x2="${pkConnection.x}" y2="${pkConnection.y}"
+                              stroke="#dc3545" stroke-width="1.5" />
+                    `;
+                }
+                // 普通属性连接线
+                entityLayout.attributes.forEach(attr => {
+                    // 计算精确的连接点
+                    const entityConnection = calculateEntityToAttributeConnection(entityLayout, attr);
+                    const attrConnection = calculateAttributeToEntityConnection(attr, entityLayout);
+                    linesLayer += `
+                        <line x1="${entityConnection.x}" y1="${entityConnection.y}" x2="${attrConnection.x}" y2="${attrConnection.y}"
+                              stroke="#28a745" stroke-width="1.5" />
+                    `;
+                });
+            }
+            linesLayer += '</g>\n';
+            // 3. 中层：关系菱形
+            let relationshipsLayer = '<g id="relationships-layer">\n';
+            for (const [relationName, relationLayout] of Object.entries(layout.relations)) {
+                const x = relationLayout.x;
+                const y = relationLayout.y;
+                const w = relationLayout.width;
+                const h = relationLayout.height;
+                relationshipsLayer += `
+                    <polygon points="${x},${y-h} ${x+w},${y} ${x},${y+h} ${x-w},${y}"
+                             fill="#fff3cd" stroke="#ffc107" stroke-width="1.5" />
+                    <text x="${x}" y="${y}" text-anchor="middle" dominant-baseline="middle"
+                          font-size="14" fill="#212529">${relationName}</text>
+                `;
+            }
+            relationshipsLayer += '</g>\n';
+            // 4. 上层：实体矩形和属性椭圆
+            let entitiesLayer = '<g id="entities-layer">\n';
+            for (const [entityName, entityLayout] of Object.entries(layout.entities)) {
+                // 绘制属性椭圆
+                // 先画主键
+                if (entityLayout.pk) {
+                    const pk = entityLayout.pk;
+                    entitiesLayer += `
+                        <ellipse cx="${pk.x}" cy="${pk.y}" rx="${pk.width}" ry="${pk.height}"
+                                fill="#ffebee" stroke="#dc3545" stroke-width="2" />
+                        <text x="${pk.x}" y="${pk.y}" text-anchor="middle" dominant-baseline="middle"
+                              font-size="14" font-weight="bold">${pk.name}</text>
+                    `;
+                }
+                // 普通属性
+                entityLayout.attributes.forEach(attr => {
+                    entitiesLayer += `
+                        <ellipse cx="${attr.x}" cy="${attr.y}" rx="${attr.width}" ry="${attr.height}"
+                                fill="#f8f9fa" stroke="#28a745" stroke-width="1.5" />
+                        <text x="${attr.x}" y="${attr.y}" text-anchor="middle" dominant-baseline="middle"
+                              font-size="14">${attr.name}</text>
+                    `;
+                });
+                // 绘制实体矩形
+                entitiesLayer += `
+                    <rect x="${entityLayout.x - entityLayout.width/2}" y="${entityLayout.y - entityLayout.height/2}"
+                          width="${entityLayout.width}" height="${entityLayout.height}" rx="5" ry="5"
+                          fill="#e3f2fd" stroke="#0d6efd" stroke-width="2" />
+                    <text x="${entityLayout.x}" y="${entityLayout.y}" text-anchor="middle" dominant-baseline="middle"
+                          font-size="16" font-weight="bold" fill="#0d6efd">${entityName}</text>
+                `;
+            }
+            entitiesLayer += '</g>\n';
+            // 组合所有层级，确保正确的Z轴顺序
+            svgContent += linesLayer;    // 最底层：连接线
+            svgContent += relationshipsLayer; // 中间层：关系菱形
+            svgContent += entitiesLayer;  // 最上层：实体和属性
+            svgContent += '</svg>';
+            return svgContent;
+        }
+        // 生成ER图
+        function generateERDiagram() {
+            const erCode = document.getElementById('erCode').value;
+            const title = document.getElementById('diagramTitle').value || 'ER图';
+            try {
+                const { entities, relations } = parseERCode(erCode);
+                const layout = createLayout(entities, relations);
+                const svgContent = generateSVG(entities, relations, layout, title);
+                document.getElementById('svgContainer').innerHTML = svgContent;
+            } catch (error) {
+                console.error('生成ER图时出错:', error);
+                alert('生成ER图时出错: ' + error.message);
+            }
+        }
+        // 初始加载和事件监听
+        document.addEventListener('DOMContentLoaded', function() {
+            // 初始生成
+            generateERDiagram();
+            // 绑定生成按钮事件
+            document.getElementById('generateBtn').addEventListener('click', generateERDiagram);
+            // 绑定标题更改事件
+            document.getElementById('diagramTitle').addEventListener('change', generateERDiagram);
+        });
+    </script>
+</body>
+</html>