{
  "id": "entity-relationship-order-schema",
  "schemaVersion": 2,
  "title": {
    "ja": "注文データの関係 — 注文明細が商品と注文を結ぶ",
    "en": "Order Data Relationships — Order Lines Connect Products and Orders"
  },
  "summary": {
    "ja": "エンティティ枠内の主キー・外部キーとcrow's footで、注文データの参照先と1対多の制約を示すER図",
    "en": "An ER diagram uses primary/foreign keys and crow's-foot cardinality to show references and one-to-many relationships in order data."
  },
  "capturedAt": "2026-09-25",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "minimal"
  ],
  "useCases": [
    "architecture",
    "comparison"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "network",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 100,
      "right": 140,
      "bottom": 100,
      "left": 140
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.01em"
    },
    "subtitle": {
      "size": 22,
      "weight": 500
    },
    "axisTitle": {
      "size": 22,
      "weight": 700
    },
    "entityTitle": {
      "size": 24,
      "weight": 700
    },
    "field": {
      "size": 20,
      "weight": 500
    },
    "key": {
      "size": 20,
      "weight": 700
    },
    "relation": {
      "size": 20,
      "weight": 500
    },
    "takeaway": {
      "size": 28,
      "weight": 500
    },
    "note": {
      "size": 20,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "各枠はエンティティを表し、PKが主キー、FKが他エンティティへの参照を示す",
      "en": "Each box is an entity; PK marks the primary key and FK marks a reference to another entity."
    },
    {
      "ja": "単一バーは必ず1件、crow's foot（三つ又）は複数件を表す",
      "en": "A single bar marks exactly one; a crow's foot marks many."
    },
    {
      "ja": "注文明細を関連エンティティとして置き、注文と商品それぞれへの外部キーを持たせる",
      "en": "Model order lines as an associative entity with foreign keys to both orders and products."
    },
    {
      "ja": "論理モデルの例。NULL可否・一意制約・履歴の保持はシステム要件に応じて別途定義する",
      "en": "This is a logical model; define nullability, uniqueness, and history retention for the actual system separately."
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.CeRyRzrz.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "network",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 100,
          "right": 140,
          "bottom": 100,
          "left": 140
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.01em"
        },
        "subtitle": {
          "size": 22,
          "weight": 500
        },
        "axisTitle": {
          "size": 22,
          "weight": 700
        },
        "entityTitle": {
          "size": 24,
          "weight": 700
        },
        "field": {
          "size": 20,
          "weight": 500
        },
        "key": {
          "size": 20,
          "weight": 700
        },
        "relation": {
          "size": 20,
          "weight": 500
        },
        "takeaway": {
          "size": 28,
          "weight": 500
        },
        "note": {
          "size": 20,
          "weight": 400
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Each box is an entity; PK marks the primary key and FK marks a reference to another entity.",
        "A single bar marks exactly one; a crow's foot marks many.",
        "Model order lines as an associative entity with foreign keys to both orders and products.",
        "This is a logical model; define nullability, uniqueness, and history retention for the actual system separately."
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.01em\nsubtitle  22px / 500\naxisTitle  22px / 700\nentityTitle  24px / 700\nfield  20px / 500\nkey  20px / 700\nrelation  20px / 500\ntakeaway  28px / 500\nnote  20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 各枠はエンティティを表し、PKが主キー、FKが他エンティティへの参照を示す\n- 単一バーは必ず1件、crow's foot（三つ又）は複数件を表す\n- 注文明細を関連エンティティとして置き、注文と商品それぞれへの外部キーを持たせる\n- 論理モデルの例。NULL可否・一意制約・履歴の保持はシステム要件に応じて別途定義する\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/entity-relationship-order-schema/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.01em\nsubtitle  22px / 500\naxisTitle  22px / 700\nentityTitle  24px / 700\nfield  20px / 500\nkey  20px / 700\nrelation  20px / 500\ntakeaway  28px / 500\nnote  20px / 400\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Each box is an entity; PK marks the primary key and FK marks a reference to another entity.\n- A single bar marks exactly one; a crow's foot marks many.\n- Model order lines as an associative entity with foreign keys to both orders and products.\n- This is a logical model; define nullability, uniqueness, and history retention for the actual system separately.\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/entity-relationship-order-schema/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>注文データの関係 — 注文明細が商品と注文を結ぶ</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n:root{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;}\n*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}\n.artboard{width:1920px;height:1080px;padding:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}\n</style>\n<div class=\"artboard\" data-artboard><div class=\"content\" data-content>\n<svg class=\"figure\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"顧客、注文、商品、注文明細のER図。顧客と注文は1対多、注文と注文明細も1対多、商品と注文明細も1対多。注文明細が各注文の商品と数量を記録する。\">\n<style>\n.figure{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}\n.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.entity-title{font-size:24px;font-weight:700}.field{font-size:20px;font-weight:500}.key{font-size:20px;font-weight:700}.rel{font-size:20px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}\n.card{fill:var(--surface);stroke:var(--rule);stroke-width:2}.head{fill:var(--surface)}.edge{stroke:var(--muted);stroke-width:3;fill:none}.pk{fill:var(--accent)}.fk{fill:var(--muted)}.marker{stroke:var(--ink);stroke-width:3;fill:none}\n</style>\n<rect class=\"ground\" width=\"1920\" height=\"1080\"/>\n<text class=\"ink title\" data-type=\"title\" x=\"140\" y=\"153\">注文データの関係 — 注文明細が商品と注文を結ぶ</text>\n<text class=\"muted subtitle\" data-type=\"subtitle\" x=\"140\" y=\"201\">4エンティティ / 主キーと外部キーで関係を定義するER図</text>\n<line class=\"rule\" x1=\"140\" y1=\"238\" x2=\"1780\" y2=\"238\" stroke-width=\"2\"/>\n<text class=\"ink axis-title\" data-type=\"axisTitle\" x=\"960\" y=\"294\" text-anchor=\"middle\">1件の注文に複数の商品行を記録し、商品情報を再利用する</text>\n<!-- Cardinality connectors are behind the entity cards. A bar means exactly one; a crow's foot means many. -->\n<g class=\"edge\">\n<path d=\"M590 525 H780\"/><path d=\"M960 600 V670\"/><path d=\"M1350 525 H1240 V790 H1140\"/>\n</g>\n<!-- Customer (one) to Order (many). -->\n<g class=\"marker\"><path d=\"M604 513 V537\"/><path d=\"M780 525 L760 525 M780 525 L760 511 M780 525 L760 539\"/></g>\n<!-- Order (one) to OrderLine (many). -->\n<g class=\"marker\"><path d=\"M948 613 H972\"/><path d=\"M960 670 L960 650 M960 670 L946 650 M960 670 L974 650\"/></g>\n<!-- Product (one) to OrderLine (many). -->\n<g class=\"marker\"><path d=\"M1338 513 V537\"/><path d=\"M1140 790 L1160 790 M1140 790 L1160 776 M1140 790 L1160 804\"/></g>\n<g class=\"muted rel\" text-anchor=\"middle\"><text data-type=\"relation\" x=\"685\" y=\"505\">1 対 多</text><text x=\"1015\" y=\"660\">1 対 多</text><text x=\"1295\" y=\"738\">1 対 多</text></g>\n<!-- Customer entity -->\n<g><rect class=\"card\" x=\"240\" y=\"420\" width=\"350\" height=\"210\" rx=\"8\"/><path class=\"head\" d=\"M248 420 H582 Q590 420 590 428 V476 H240 V428 Q240 420 248 420 Z\"/><text class=\"ink entity-title\" data-type=\"entityTitle\" x=\"270\" y=\"459\">顧客</text>\n<text class=\"pk key\" data-type=\"key\" x=\"270\" y=\"518\">PK</text><text class=\"ink field\" data-type=\"field\" x=\"330\" y=\"518\">customer_id</text><line class=\"rule\" x1=\"260\" y1=\"535\" x2=\"570\" y2=\"535\"/>\n<text class=\"muted field\" x=\"330\" y=\"566\">name</text><line class=\"rule\" x1=\"260\" y1=\"582\" x2=\"570\" y2=\"582\"/><text class=\"muted field\" x=\"330\" y=\"612\">email</text></g>\n<!-- Order entity -->\n<g><rect class=\"card\" x=\"780\" y=\"340\" width=\"360\" height=\"260\" rx=\"8\"/><path class=\"head\" d=\"M788 340 H1132 Q1140 340 1140 348 V396 H780 V348 Q780 340 788 340 Z\"/><text class=\"ink entity-title\" data-type=\"entityTitle\" x=\"810\" y=\"379\">注文</text>\n<text class=\"pk key\" data-type=\"key\" x=\"810\" y=\"438\">PK</text><text class=\"ink field\" data-type=\"field\" x=\"870\" y=\"438\">order_id</text><line class=\"rule\" x1=\"800\" y1=\"455\" x2=\"1120\" y2=\"455\"/>\n<text class=\"fk key\" data-type=\"key\" x=\"810\" y=\"490\">FK</text><text class=\"ink field\" data-type=\"field\" x=\"870\" y=\"490\">customer_id</text><line class=\"rule\" x1=\"800\" y1=\"507\" x2=\"1120\" y2=\"507\"/>\n<text class=\"muted field\" x=\"870\" y=\"550\">ordered_at</text></g>\n<!-- Product entity -->\n<g><rect class=\"card\" x=\"1350\" y=\"420\" width=\"350\" height=\"210\" rx=\"8\"/><path class=\"head\" d=\"M1358 420 H1692 Q1700 420 1700 428 V476 H1350 V428 Q1350 420 1358 420 Z\"/><text class=\"ink entity-title\" data-type=\"entityTitle\" x=\"1380\" y=\"459\">商品</text>\n<text class=\"pk key\" data-type=\"key\" x=\"1380\" y=\"518\">PK</text><text class=\"ink field\" data-type=\"field\" x=\"1440\" y=\"518\">product_id</text><line class=\"rule\" x1=\"1370\" y1=\"535\" x2=\"1680\" y2=\"535\"/>\n<text class=\"muted field\" x=\"1440\" y=\"566\">sku</text><line class=\"rule\" x1=\"1370\" y1=\"582\" x2=\"1680\" y2=\"582\"/><text class=\"muted field\" x=\"1440\" y=\"612\">unit_price</text></g>\n<!-- OrderLine is the associative entity. -->\n<g><rect class=\"card\" x=\"780\" y=\"670\" width=\"360\" height=\"260\" rx=\"8\"/><path class=\"head\" d=\"M788 670 H1132 Q1140 670 1140 678 V726 H780 V678 Q780 670 788 670 Z\"/><text class=\"ink entity-title\" data-type=\"entityTitle\" x=\"810\" y=\"709\">注文明細</text>\n<text class=\"pk key\" data-type=\"key\" x=\"810\" y=\"770\">PK</text><text class=\"ink field\" data-type=\"field\" x=\"870\" y=\"770\">order_line_id</text><line class=\"rule\" x1=\"800\" y1=\"787\" x2=\"1120\" y2=\"787\"/>\n<text class=\"fk key\" data-type=\"key\" x=\"810\" y=\"818\">FK</text><text class=\"ink field\" data-type=\"field\" x=\"870\" y=\"818\">order_id</text><line class=\"rule\" x1=\"800\" y1=\"835\" x2=\"1120\" y2=\"835\"/>\n<text class=\"fk key\" data-type=\"key\" x=\"810\" y=\"866\">FK</text><text class=\"ink field\" data-type=\"field\" x=\"870\" y=\"866\">product_id</text><line class=\"rule\" x1=\"800\" y1=\"883\" x2=\"1120\" y2=\"883\"/><text class=\"muted field\" x=\"870\" y=\"914\">quantity</text></g>\n<text class=\"ink takeaway\" data-type=\"takeaway\" x=\"960\" y=\"958\" text-anchor=\"middle\">注文明細が注文と商品をN:1で結び、数量を保持</text>\n<line class=\"rule\" x1=\"140\" y1=\"982\" x2=\"1780\" y2=\"982\" stroke-width=\"1\"/><text class=\"muted note\" data-type=\"note\" x=\"140\" y=\"1018\">バー=必ず1件、三つ又=複数件。関係はサンプルの論理モデルで、実運用の制約は別途定義する。</text>\n</svg></div></div>\n",
      "url": "https://design-vault.pages.dev/designs/entity-relationship-order-schema/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/entity-relationship-order-schema/font.css",
        "https://design-vault.pages.dev/designs/entity-relationship-order-schema/font-0.woff2",
        "https://design-vault.pages.dev/designs/entity-relationship-order-schema/font-1.woff2",
        "https://design-vault.pages.dev/designs/entity-relationship-order-schema/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/entity-relationship-order-schema",
    "en": "https://design-vault.pages.dev/en/designs/entity-relationship-order-schema"
  },
  "notesMarkdown": "### 視覚的な問い\n\n注文・顧客・商品はどのキーで結ばれ、1件と複数件の関係はどこにあるか。\n\n### 構造\n\n4つのエンティティ枠に主キー（PK）・外部キー（FK）・属性を置く。顧客から注文、注文から注文明細、商品から\n注文明細へ1対多の関係が伸びる。バーは「1」、crow's foot（三つ又）は「多」を示し、注文明細が注文ID・商品IDと\n数量を結びつける。\n\n組織図や関係者ネットワークは人・役割間の階層や影響を表すが、このER図はデータエンティティ、キー、参照制約を\n示す。論理構造の例であり、実データベースではNULL可否、一意制約、削除規則、履歴保持を設計する必要がある。"
}