demos/er.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ER diagram | Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
      div.mermaid {
        /* font-family: 'trebuchet ms', verdana, arial; */
        font-family: 'Courier New', Courier, monospace !important;
      }
      .diagram-title {
        fill: red;
        font-size: 24pt;
      }
    </style>
  </head>

  <body>
    <pre class="mermaid">
      ---
      title: This is a title
      config:
        theme: forest
      ---
      erDiagram
        %% title This is a title
        %% accDescription Test a description

        "Person . CUSTOMER"||--o{ ORDER : places

        ORDER ||--|{ "€£LINE_ITEM ¥" : contains

        "Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses

        "Address//StreetAddress::[DELIVERY ADDRESS]" {
          int customerID FK
          string line1 "this is the first address line comment"
          string line2
          string city
          string region
          string state
          string(5) postal_code
          string country
        }

        "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞ﬁ§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂ÎƒÏ©˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
          string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
        }

        "€£LINE_ITEM ¥" {
          int orderID FK
          int currencyId FK
          number price
          number quantity
          number adjustment
          number final_price
        }
    </pre>
    <hr />

    <pre class="mermaid">
    erDiagram
      "HOSPITAL" {
        int id PK
        int doctor_id FK
        string address UK
        string name
        string phone_number
        string fax_number
      }
    </pre>
    <hr />

    <pre class="mermaid">
      erDiagram
        "HOSPITAL" {
          int id PK
          int doctor_id PK, FK
          string address UK
          string name
          string phone_number
          string fax_number
        }
      </pre
    >
    <hr />

    <pre class="mermaid">
      erDiagram
        CAR ||--o{ NAMED-DRIVER : allows
        CAR {
          string registrationNumber PK
          string make
          string model
          string[] parts
        }
        PERSON ||--o{ NAMED-DRIVER : is
        PERSON {
          string driversLicense PK "The license #"
          string(99) firstName "Only 99 characters are allowed"
          string lastName
          string phone UK
          int age
        }
        NAMED-DRIVER {
          string carRegistrationNumber PK, FK
          string driverLicence PK,FK
        }
        MANUFACTURER only one to zero or more CAR : makes
    </pre>
    <hr />

    <pre class="mermaid">
    erDiagram
      p[Person] {
          string firstName
          string lastName
      }
      a["Customer Account"] {
          string email
      }
      p ||--o| a : has
    </pre>
    <hr />

    <pre class="mermaid">
    erDiagram
      _customer_order {
          bigint id PK
          bigint customer_id FK
          text shipping_address 
          text delivery_method 
          timestamp_with_time_zone ordered_at 
          numeric total_tax_amount 
          numeric total_price 
          text payment_method 
      }
    </pre>
    <hr />

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
        theme: 'default',

        // themeCSS: '.node rect { fill: red; }',
        logLevel: 3,
        securityLevel: 'loose',
        flowchart: { curve: 'basis' },
        gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50 },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
      });
    </script>
  </body>
</html>