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

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

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

Source repository: 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 แทนการคัดลอก 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 / SVG	Architecture	`src/worker.ts`, `wrangler.jsonc`, `scripts/build.mjs`	รวม endpoint เป็น API node เดียว; ไม่แสดง security header ทุกค่า
agent-context HTML / 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 / SVG	Flowchart	`scripts/check.mjs`, `scripts/smoke-production.mjs`	รวม lint, typecheck, API และ browser checks เป็น Verify gate
design-assets HTML / SVG	Flowchart	`docs/lessons/04-design-and-assets.md`, `docs/assets/image-provenance.md`, `scripts/optimize-images.mjs`	ไม่แสดงขนาดไฟล์และคำสั่ง optimize รายขั้น
contact-sequence HTML / SVG	Sequence	`examples/company/main.js`, `src/worker.ts`, `migrations/0001_initial.sql`	รวม validation, abuse control และ optional Turnstile
rental-reservation HTML / 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 / SVG	State machine	`src/worker.ts`, `migrations/0001_initial.sql`, `migrations/0002_demo_retention.sql`, `wrangler.jsonc`	“หมดผล” และ “deleted” เป็นเหตุการณ์ ไม่ใช่ค่า status column
quote-authority HTML / SVG	Sequence	`examples/store/main.js`, `src/worker.ts`, `migrations/0001_initial.sql`	ไม่แสดงสินค้ารายชิ้นและ idempotency bookkeeping
cloudflare-deployment HTML / SVG	Architecture	`wrangler.jsonc`, `package.json`, `scripts/build.mjs`	ไม่แต่ง PoP หรือ replica count ที่ repository ไม่ได้กำหนด
release-gates HTML / SVG	Flowchart	`package.json`, `scripts/check.mjs`, `tests/api.test.mjs`, `tests/browser.spec.mjs`, `scripts/smoke-production.mjs`	รวมผลตรวจย่อยและไม่ตรึงจำนวน test ที่เปลี่ยนได้
data-lifecycle HTML / 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 / 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 / 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 / SVG	ER diagram	`migrations/0001_initial.sql`, `migrations/0002_demo_retention.sql`, `src/worker.ts`	ซ่อน PII/fingerprint/demo timestamps เพื่อเน้น capacity และ idempotency
learner-roadmap HTML / 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 / 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 / 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 ไม่ใช่ raw execution transcript และไม่อ้างว่าเป็นข้อความ verbatim ที่ agent ใช้สร้าง implementation แรก สิ่งที่พิสูจน์ได้คือ generator สร้าง HTML/SVG จาก definitions ปัจจุบัน, prompt ถูกฝังครบ และ checker ตรวจ artifact ชุดเดียวกัน หากต้อง audit การตัดสินใจ ให้ใช้ source paths กับ simplification ledger มากกว่าคาดเดาจาก prompt เพียงอย่างเดียว

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

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 จึงไม่ใช้แผนภาพจอที่ยังโหลดค้างอยู่

ความคืบหน้าบันทึกเฉพาะเบราว์เซอร์นี้ ไม่มีบัญชีผู้เรียนหรือการส่งข้อมูลการเรียนขึ้นเซิร์ฟเวอร์