Style

Display Options

Theme

Colors

Entities

Relationships

→
→
→

Preview

hashaswrites
users
PKidINT
usernameVARCHAR(50)
emailVARCHAR(100)
created_atTIMESTAMP
posts
PKidINT
FKuser_idINT
titleVARCHAR(200)
contentTEXT
created_atTIMESTAMP
comments
PKidINT
FKpost_idINT
FKuser_idINT
contentTEXT
created_atTIMESTAMP

Export

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ER Diagram</title>
  <style>
.er-diagram {
  position: relative;
  width: 800px;
  height: 600px;
  background-color: #1e3a5f;
  border-radius: 8px;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}
.er-entity {
  position: absolute;
  background-color: #ffffff;
  border: 2px solid #2563eb;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.entity-header {
  padding: 8px 12px;
  background-color: #3b82f6;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.entity-attributes {
  padding: 4px 0;
}
.attribute-row {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  color: #1e293b;
  gap: 8px;
}
.attribute-row:hover {
  background-color: rgba(0,0,0,0.05);
}
.attr-keys {
  min-width: 40px;
  display: flex;
  gap: 4px;
}
.key-badge {
  font-size: 9px;
  font-weight: 700;
}
.key-badge.pk {
  color: #eab308;
}
.key-badge.fk {
  color: #22c55e;
}
.attr-name {
  flex: 1;
  font-weight: 500;
}
.attr-type {
  color: #64748b;
  font-size: 11px;
}
.relationship-line {
  stroke: #60a5fa;
  stroke-width: 2;
  fill: none;
}
  </style>
</head>
<body>
  <div class="er-diagram">
    <svg width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
      <!-- Relationships would be rendered here -->
    </svg>
    <div class="er-entity" style="left: 100px; top: 100px; width: 180px;">
      <div class="entity-header">users</div>
      <div class="entity-attributes">
        <div class="attribute-row">
          <span class="attr-keys"><span class="key-badge pk">PK</span></span>
          <span class="attr-name">id</span>
          <span class="attr-type">INT</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"></span>
          <span class="attr-name">username</span>
          <span class="attr-type">VARCHAR(50)</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"></span>
          <span class="attr-name">email</span>
          <span class="attr-type">VARCHAR(100)</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"></span>
          <span class="attr-name">created_at</span>
          <span class="attr-type">TIMESTAMP</span>
        </div>
      </div>
    </div>
    <div class="er-entity" style="left: 400px; top: 100px; width: 180px;">
      <div class="entity-header">posts</div>
      <div class="entity-attributes">
        <div class="attribute-row">
          <span class="attr-keys"><span class="key-badge pk">PK</span></span>
          <span class="attr-name">id</span>
          <span class="attr-type">INT</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"><span class="key-badge fk">FK</span></span>
          <span class="attr-name">user_id</span>
          <span class="attr-type">INT</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"></span>
          <span class="attr-name">title</span>
          <span class="attr-type">VARCHAR(200)</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"></span>
          <span class="attr-name">content</span>
          <span class="attr-type">TEXT</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"></span>
          <span class="attr-name">created_at</span>
          <span class="attr-type">TIMESTAMP</span>
        </div>
      </div>
    </div>
    <div class="er-entity" style="left: 400px; top: 350px; width: 180px;">
      <div class="entity-header">comments</div>
      <div class="entity-attributes">
        <div class="attribute-row">
          <span class="attr-keys"><span class="key-badge pk">PK</span></span>
          <span class="attr-name">id</span>
          <span class="attr-type">INT</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"><span class="key-badge fk">FK</span></span>
          <span class="attr-name">post_id</span>
          <span class="attr-type">INT</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"><span class="key-badge fk">FK</span></span>
          <span class="attr-name">user_id</span>
          <span class="attr-type">INT</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"></span>
          <span class="attr-name">content</span>
          <span class="attr-type">TEXT</span>
        </div>
        <div class="attribute-row">
          <span class="attr-keys"></span>
          <span class="attr-name">created_at</span>
          <span class="attr-type">TIMESTAMP</span>
        </div>
      </div>
    </div>

  </div>
</body>
</html>