Spaces:

mistpe
/

ER

Running

File size: 37,739 Bytes

80bab2e

<!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>