Hugging Face's logo

Spaces:
mistpe
/
ER
Running

App Files Community
ER / index.html
mistpe's picture
mistpe
Update index.html
80bab2e verified
raw
history blame contribute delete
37.7 kB
<!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>