# Provenance ของแผนภาพ Diagram Design

หน้านี้บันทึกแหล่งที่มาของแผนภาพ HTML/SVG ทั้ง 16 ชิ้นในหลักสูตร แยกให้ชัดระหว่าง skill ที่ติดตั้ง, profile ของโครงการ, facts จาก source code, prompt สำหรับทำซ้ำ และผลตรวจไฟล์ เพื่อไม่ให้ภาพที่จัดวางใหม่ถูกเข้าใจว่าเป็นหลักฐานอิสระจาก source

## Skill และการติดตั้ง

- Source repository: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Source path ที่เลือกจาก repository: `skills/diagram-design`
- Global destination ของเครื่องสร้างหลักสูตร: `/home/dev/.codex/skills/diagram-design`
- Metadata ที่อ่านจาก `SKILL.md` หลังติดตั้งเมื่อ 9 กันยายน 2026: `name: diagram-design`, version `2.6`, license `MIT`
- วิธีติดตั้งจริง: `python3 /home/dev/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py --repo cathrynlavery/diagram-design --path skills/diagram-design --dest /home/dev/.codex/skills`

ตัว installer รอบนี้ไม่ได้เก็บ commit SHA ไว้ใน destination จึงไม่อ้าง SHA ของไฟล์ที่ติดตั้ง หลักฐานที่ยืนยันได้คือ repository/path, metadata ในไฟล์ปลายทาง และไฟล์ที่ตรวจพบจริง สำหรับผู้เรียนให้ใช้ `$skill-installer` แบบ natural language ตาม [Lab Diagram Design](../labs/diagram-design.md) แทนการคัดลอก absolute path ของเครื่องนี้

## Profile และเหตุผลของแบรนด์

Project marker `.diagram-design` ใช้ `profile: rawinnipa-ai-web-studio` และ resolve ไปยัง `~/.diagram-design/profiles/rawinnipa-ai-web-studio.md` ตามกติกา marker-first ของ skill Profile อ้างอิง `DESIGN.md`, UI จริง และ source of truth ของบริษัทที่ `/home/dev/projects/rawinnipa-brandbook/01-strategy/Rawinnipa_Brand_Guidelines_v1.0.md` Brandbook เป็นเอกสารภายในอ้างอิงตอนสร้างและไม่ได้ถูกคัดลอกเข้า source package สาธารณะ:

| Role | ค่า |
| --- | --- |
| canvas | `#0A0A0A` |
| surface | `#1A1A1A` |
| ink | `#F7F7F7` |
| muted / soft | `#9CA3AF` |
| rule | `#2A2A2A` |
| focal accent | `#3EDC81` |
| print paper / ink | `#F7F7F7` / `#0A0A0A` |
| typography | Inter สำหรับละติน + Noto Sans Thai สำหรับไทย |

สำเนา profile ที่พกไปกับ source อยู่ใน `design-system/diagrams/STYLE_GUIDE.md` และ generator ใช้ค่า machine-readable จาก `design-system/diagrams/tokens.json` การ mapping นี้ใช้ dark canvas เป็นหลัก, Rawin Green เฉพาะจุดตัดสินใจหรือปลายทางสำคัญ และใช้ light-canvas exception สำหรับ PDF/งานพิมพ์ตาม brandbook §6.1 ค่า `source-url` ใน metadata ยังชี้เว็บหลักสูตรที่เผยแพร่; ไม่ได้ใช้แทน path ของ brandbook

ทุกภาพใช้ preset `doc-inline` ขนาด `960×600`, audience `mixed`, HTML เป็น source of truth และ SVG ถูก extract จาก HTML โดย `scripts/build-diagrams.mjs` ฟอนต์ไทยถูกฝังในไฟล์ จึงเปิดตรวจ offline ได้โดยไม่ใช้ server หรือ port

## Mapping ของผลลัพธ์ทั้ง 16 ชิ้น

คำว่า “Source หลัก” ด้านล่างหมายถึงไฟล์ที่ใช้ยืนยัน node, edge, state หรือข้อความ ไม่ใช่เพียงไฟล์ที่มีคำคล้ายกัน รายละเอียดการย่อแต่ละภาพอยู่ใน `diagrams/definitions.json` และแสดงใน HTML ของภาพนั้น

| ผลลัพธ์ | ชนิด | Source หลัก | สิ่งที่ย่อ |
| --- | --- | --- | --- |
| [web-request HTML](/diagrams/web-request.html) / [SVG](/diagrams/web-request.svg) | Architecture | `src/worker.ts`, `wrangler.jsonc`, `scripts/build.mjs` | รวม endpoint เป็น API node เดียว; ไม่แสดง security header ทุกค่า |
| [agent-context HTML](/diagrams/agent-context.html) / [SVG](/diagrams/agent-context.svg) | Layer stack | `docs/lessons/02-agent-skills.md`, `docs/lessons/03-specs-and-prompts.md`, `DESIGN.md`, `docs/lessons/00-setup-and-web-basics.md` | รวม instruction ตามหน้าที่; ไม่แสดง precedence รายบรรทัด |
| [delivery-loop HTML](/diagrams/delivery-loop.html) / [SVG](/diagrams/delivery-loop.svg) | Flowchart | `scripts/check.mjs`, `scripts/smoke-production.mjs` | รวม lint, typecheck, API และ browser checks เป็น Verify gate |
| [design-assets HTML](/diagrams/design-assets.html) / [SVG](/diagrams/design-assets.svg) | Flowchart | `docs/lessons/04-design-and-assets.md`, `docs/assets/image-provenance.md`, `scripts/optimize-images.mjs` | ไม่แสดงขนาดไฟล์และคำสั่ง optimize รายขั้น |
| [contact-sequence HTML](/diagrams/contact-sequence.html) / [SVG](/diagrams/contact-sequence.svg) | Sequence | `examples/company/main.js`, `src/worker.ts`, `migrations/0001_initial.sql` | รวม validation, abuse control และ optional Turnstile |
| [rental-reservation HTML](/diagrams/rental-reservation.html) / [SVG](/diagrams/rental-reservation.svg) | Flowchart | `examples/rental/main.js`, `src/worker.ts`, `migrations/0001_initial.sql`, `migrations/0002_demo_retention.sql` | รวม idempotency claim และ rate limit ใน Worker validation |
| [reservation-states HTML](/diagrams/reservation-states.html) / [SVG](/diagrams/reservation-states.svg) | State machine | `src/worker.ts`, `migrations/0001_initial.sql`, `migrations/0002_demo_retention.sql`, `wrangler.jsonc` | “หมดผล” และ “deleted” เป็นเหตุการณ์ ไม่ใช่ค่า status column |
| [quote-authority HTML](/diagrams/quote-authority.html) / [SVG](/diagrams/quote-authority.svg) | Sequence | `examples/store/main.js`, `src/worker.ts`, `migrations/0001_initial.sql` | ไม่แสดงสินค้ารายชิ้นและ idempotency bookkeeping |
| [cloudflare-deployment HTML](/diagrams/cloudflare-deployment.html) / [SVG](/diagrams/cloudflare-deployment.svg) | Architecture | `wrangler.jsonc`, `package.json`, `scripts/build.mjs` | ไม่แต่ง PoP หรือ replica count ที่ repository ไม่ได้กำหนด |
| [release-gates HTML](/diagrams/release-gates.html) / [SVG](/diagrams/release-gates.svg) | Flowchart | `package.json`, `scripts/check.mjs`, `tests/api.test.mjs`, `tests/browser.spec.mjs`, `scripts/smoke-production.mjs` | รวมผลตรวจย่อยและไม่ตรึงจำนวน test ที่เปลี่ยนได้ |
| [data-lifecycle HTML](/diagrams/data-lifecycle.html) / [SVG](/diagrams/data-lifecycle.svg) | Flowchart | `docs/instructor/demo-data-policy.md`, `src/worker.ts`, `migrations/0002_demo_retention.sql`, `wrangler.jsonc` | แสดง rental 30 นาที กับ contact/quote 7 วัน; TTL ของ key และตัวนับอยู่ในคำอธิบาย |
| [real-estate-journey HTML](/diagrams/real-estate-journey.html) / [SVG](/diagrams/real-estate-journey.svg) | Flowchart | `examples/real-estate/index.html`, `examples/real-estate/main.js`, `docs/labs/real-estate-ui-ux-pro-max.md` | รวม filter และ dialog interaction เป็นขั้นเดียว |
| [diagram-workflow HTML](/diagrams/diagram-workflow.html) / [SVG](/diagrams/diagram-workflow.svg) | Flowchart | `design-system/diagrams/STYLE_GUIDE.md`, `design-system/diagrams/tokens.json`, `scripts/build-diagrams.mjs`, `docs/labs/diagram-design.md` | ไม่แสดง visual type ทั้ง 39 แบบและ PNG export |
| [rental-data HTML](/diagrams/rental-data.html) / [SVG](/diagrams/rental-data.svg) | ER diagram | `migrations/0001_initial.sql`, `migrations/0002_demo_retention.sql`, `src/worker.ts` | ซ่อน PII/fingerprint/demo timestamps เพื่อเน้น capacity และ idempotency |
| [learner-roadmap HTML](/diagrams/learner-roadmap.html) / [SVG](/diagrams/learner-roadmap.svg) | Timeline | `docs/instructor/course-guide.md`, `docs/lessons/00-setup-and-web-basics.md`, `docs/lessons/10-capstone-and-handoff.md` | สรุปเส้นทางในชั้น 2 วัน / 8 ชั่วโมง; 12 บทและ full labs เป็นคลังเรียนต่อด้วยตัวเอง |
| [research-to-brand HTML](/diagrams/research-to-brand.html) / [SVG](/diagrams/research-to-brand.svg) | Flowchart | `docs/labs/research-to-brand-website.md` | รวม source inventory เป็นจุดเริ่มเดียวแต่คง source ID, รวม icon กับ key visual เป็น visual system ที่คง prompt ID และรวม handoff กับ QA; เก็บเส้นย้อนกลับไปวิจัยเมื่อหลักฐานไม่พอ |
| [rw-web-pipeline HTML](/diagrams/rw-web-pipeline.html) / [SVG](/diagrams/rw-web-pipeline.svg) | Flowchart | `skill-packs/rw-web/skills/` ทั้ง 4 ตัว | แสดง research → brandkit → website → browser QA → Cloudflare; GPT Image เป็น asset ทางเลือกแยกจาก capture และตัดรายละเอียด config/ไฟล์ส่งต่อไว้ใน Lab |

ชนิดของ `diagram-workflow` ตรวจจาก definition จริงว่าเป็น **Flowchart** และ `rental-reservation` เป็น **Flowchart** ที่แตกแขนงตรง capacity trigger ส่วน sequence examples ที่มีจริงคือ `contact-sequence` และ `quote-authority`

## สถานะของ prompt

`diagrams/definitions.json` เก็บ prompt สำหรับทำซ้ำครบทุกภาพ และ `scripts/build-diagrams.mjs` ฝัง prompt นั้นใน HTML ข้างผลลัพธ์ Prompt เหล่านี้เป็น **reproducible briefs** ที่สรุป content, type, size, brand และข้อจำกัดจาก source ปัจจุบัน ผู้เรียนสามารถคัดลอกไปสร้างงานรูปแบบเดียวกันแล้วเปรียบเทียบผลได้

Prompt ใน definitions และ [Prompt library](../prompts/diagram-design-prompts.md) ไม่ใช่ raw execution transcript และไม่อ้างว่าเป็นข้อความ verbatim ที่ agent ใช้สร้าง implementation แรก สิ่งที่พิสูจน์ได้คือ generator สร้าง HTML/SVG จาก definitions ปัจจุบัน, prompt ถูกฝังครบ และ checker ตรวจ artifact ชุดเดียวกัน หากต้อง audit การตัดสินใจ ให้ใช้ source paths กับ simplification ledger มากกว่าคาดเดาจาก prompt เพียงอย่างเดียว

## การสร้างซ้ำและหลักฐานตรวจ

```bash
node scripts/build-diagrams.mjs
npm run check:diagrams
```

รอบตรวจวันที่ 9 กันยายน 2026 ที่บันทึกใน `artifacts/diagram-checks.json` เป็นหลักฐานของชุดก่อน rebrand และต้องรันใหม่หลังเปลี่ยน profile/tokens เป็น Rawinnipa ก่อนอ้างผลกับชุดปัจจุบัน Checker ครอบคลุม:

- self-check ของ skill กับ HTML ทุกไฟล์
- accessible SVG/XML, `title`/`desc`/ID และ prompt ที่ฝังอยู่
- embedded Inter + Noto Sans Thai ในโหมด offline
- viewBox 960×600, label clipping/node overflow และ page errors ผ่าน browser
- contrast ของข้อความหลัก

ผลนี้ไม่พิสูจน์ business truth โดยตัวมันเอง ผู้ตรวจยังต้องเทียบ diagram กับ source paths, อ่าน simplification ledger และตรวจว่าภาพไม่ได้เพิ่ม state, endpoint, payment หรือข้ออ้างที่ source ไม่มี

## การพิมพ์แผนภาพ

ไฟล์ `*.svg` ใช้ dark canvas สำหรับเว็บ ส่วน `*.print.svg` เป็นเวอร์ชันพื้นอ่อนที่สร้างจาก definition และ HTML renderer เดียวกันใน `scripts/build-diagrams.mjs` โดยเปลี่ยนเฉพาะ semantic colors: paper `#F7F7F7`, ink `#0A0A0A`, muted `#4A4A4A` และใช้ Rawin Green เป็นพื้นของ focal node พร้อมข้อความดำ เมื่อพิมพ์บทเรียนหรือคู่มือ `<picture>` เลือกไฟล์ print ผ่าน `media="print"`; exporter เปิด print media ก่อนรอภาพ decode จึงไม่ใช้แผนภาพจอที่ยังโหลดค้างอยู่