odt_database_schema.html

<div id="erd"></div>
<script type="module">
import mermaid from 'https://esm.sh/mermaid@11/dist/mermaid.esm.min.mjs';
const dark = matchMedia('(prefers-color-scheme: dark)').matches;
await document.fonts.ready;
mermaid.initialize({
  startOnLoad: false,
  theme: 'base',
  fontFamily: '"Anthropic Sans", sans-serif',
  themeVariables: {
    darkMode: dark,
    fontSize: '13px',
    fontFamily: '"Anthropic Sans", sans-serif',
    lineColor: dark ? '#9c9a92' : '#73726c',
    textColor: dark ? '#c2c0b6' : '#3d3d3a',
  },
});
const { svg } = await mermaid.render('erd-svg', `erDiagram
  USERS ||--o{ PROJECTS : owns
  USERS ||--o{ PROJECT_MEMBERS : "is member"
  PROJECTS ||--|{ DIAGRAMS : contains
  PROJECTS ||--o{ PROJECT_MEMBERS : has
  DIAGRAMS ||--|{ ELEMENTS : contains
  ELEMENTS ||--o{ CONNECTORS : "source of"
  ELEMENTS ||--o{ CONNECTORS : "target of"
  DIAGRAMS ||--o{ EXPORTS : "exported as"

  USERS {
    uuid user_id PK
    string email
    string username
    string password_hash
    timestamp created_at
  }
  PROJECTS {
    uuid project_id PK
    uuid owner_id FK
    string name
    string arch_style
    timestamp updated_at
  }
  PROJECT_MEMBERS {
    uuid project_id FK
    uuid user_id FK
    string role
  }
  DIAGRAMS {
    uuid diagram_id PK
    uuid project_id FK
    string name
    string uml_type
    string view_type
    jsonb canvas_state
    boolean is_valid
    timestamp updated_at
  }
  ELEMENTS {
    uuid element_id PK
    uuid diagram_id FK
    string element_type
    string label
    jsonb properties
    float pos_x
    float pos_y
  }
  CONNECTORS {
    uuid connector_id PK
    uuid source_id FK
    uuid target_id FK
    string relation_type
    string multiplicity
  }
  EXPORTS {
    uuid export_id PK
    uuid diagram_id FK
    string format
    string file_url
    timestamp created_at
  }
`);
document.getElementById('erd').innerHTML = svg;
document.querySelectorAll('#erd svg .node').forEach(node => {
  const firstPath = node.querySelector('path[d]');
  if (!firstPath) return;
  const d = firstPath.getAttribute('d');
  const nums = d.match(/-?[\d.]+/g)?.map(Number);
  if (!nums || nums.length < 8) return;
  const xs = [nums[0],nums[2],nums[4],nums[6]];
  const ys = [nums[1],nums[3],nums[5],nums[7]];
  const x=Math.min(...xs),y=Math.min(...ys),w=Math.max(...xs)-x,h=Math.max(...ys)-y;
  const rect=document.createElementNS('http://www.w3.org/2000/svg','rect');
  rect.setAttribute('x',x);rect.setAttribute('y',y);rect.setAttribute('width',w);rect.setAttribute('height',h);rect.setAttribute('rx','8');
  for(const a of ['fill','stroke','stroke-width','class','style']){if(firstPath.hasAttribute(a))rect.setAttribute(a,firstPath.getAttribute(a));}
  firstPath.replaceWith(rect);
});
document.querySelectorAll('#erd svg .row-rect-odd path, #erd svg .row-rect-even path').forEach(p=>{p.setAttribute('stroke','none');});
</script>