mermaid/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
      p[Person] {
          string firstName
          string lastName
      }
      a["Customer Account"] {
          string email
      }

      b["Customer Account Secondary"] {
        string email
      }

      c["Customer Account Tertiary"] {
        string email
      }

      d["Customer Account Nth"] {
        string email
      }

      p ||--o| a : "has<br />one"
      p ||--o| b : "has<br />one<br />two"
      p ||--o| c : "has<br />one<br />two<br />three"
      p ||--o| d : "has<br />one<br />two<br />three<br />...<br />Nth"
    </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 />

    <!-- Aggregation Examples -->
    <h2>Aggregation Examples</h2>

    <h3>Basic Aggregation (Solid Line)</h3>
    <pre class="mermaid">
    erDiagram
      DEPARTMENT <> EMPLOYEE : contains
      DEPARTMENT {
          int id PK
          string name
          string location
      }
      EMPLOYEE {
          int id PK
          string name
          int department_id FK
      }
    </pre>
    <hr />

    <h3>Dashed Aggregation</h3>
    <pre class="mermaid">
    erDiagram
      PROJECT <>.. TASK : manages
      PROJECT {
          int id PK
          string name
          string description
      }
      TASK {
          int id PK
          string title
          int project_id FK
      }
    </pre>
    <hr />

    <h3>Aggregation with Different Cardinalities</h3>
    <pre class="mermaid">
    erDiagram
      COMPANY <> DEPARTMENT : owns
      DEPARTMENT <> EMPLOYEE : contains
      EMPLOYEE <> PROJECT : works_on
      PROJECT <> TASK : consists_of

      COMPANY {
          int id PK
          string name
      }
      DEPARTMENT {
          int id PK
          string name
          int company_id FK
      }
      EMPLOYEE {
          int id PK
          string name
          int department_id FK
      }
      PROJECT {
          int id PK
          string name
          int employee_id FK
      }
      TASK {
          int id PK
          string title
          int project_id FK
      }
    </pre>
    <hr />

    <h3>Two-way Aggregation</h3>
    <pre class="mermaid">
    erDiagram
      TEAM <> MEMBER : consists_of
      TEAM {
          int id PK
          string name
      }
      MEMBER {
          int id PK
          string name
          int team_id FK
      }
    </pre>
    <hr />

    <h3>Complex Aggregation with Labels</h3>
    <pre class="mermaid">
    erDiagram
      UNIVERSITY <> COLLEGE : "has multiple"
      COLLEGE <> DEPARTMENT : "contains"
      DEPARTMENT <> FACULTY : "employs"
      FACULTY <> STUDENT : "teaches"

      UNIVERSITY {
          int id PK
          string name
      }
      COLLEGE {
          int id PK
          string name
          int university_id FK
      }
      DEPARTMENT {
          int id PK
          string name
          int college_id FK
      }
      FACULTY {
          int id PK
          string name
          int department_id FK
      }
      STUDENT {
          int id PK
          string name
          int faculty_id FK
      }
    </pre>
    <hr />

    <h3>Mixed Relationship Types</h3>
    <pre class="mermaid">
    erDiagram
      CUSTOMER ||--o{ ORDER : places
      ORDER ||--|{ ORDER_ITEM : contains
      PRODUCT <> ORDER_ITEM : "aggregated in"
      WAREHOUSE <>.. PRODUCT : "stores"

      CUSTOMER {
          int id PK
          string name
      }
      ORDER {
          int id PK
          int customer_id FK
          date order_date
      }
      ORDER_ITEM {
          int id PK
          int order_id FK
          int product_id FK
          int quantity
      }
      PRODUCT {
          int id PK
          string name
          int warehouse_id FK
      }
      WAREHOUSE {
          int id PK
          string name
      }
    </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>