Mermaid.js เป็นเครื่องมือที่ทรงพลังในการสร้างแผนภาพ (Diagram) จากโค้ดข้อความ ทำให้การจัดทำเอกสารทางเทคนิคเป็นเรื่องง่าย อย่างไรก็ตาม การใช้แผนภาพที่ดูเป็นมาตรฐานอาจไม่เพียงพอต่อการสื่อสารข้อมูลที่ซับซ้อน บทความนี้จะเจาะลึกถึงเทคนิคการกำหนดสไตล์ (Styling) ขั้นสูงของ Mermaid.js โดยจำลองการใช้งานและจัดการพารามิเตอร์เหล่านี้ผ่านโครงสร้างของฐานข้อมูล PostgreSQL เพื่อให้การจัดการข้อมูลมีความเป็นระบบและสามารถเรียกใช้ได้อย่างแม่นยำ
การจัดการสไตล์ Mermaid.js ด้วย PostgreSQL
การตกแต่งแผนภาพให้มีสไตล์ที่สอดคล้องกับแบรนด์หรือบริบทของระบบเป็นสิ่งสำคัญ เราสามารถกำหนดสไตล์ได้ 3 ระดับหลัก คือ การกำหนดธีมทั่วโลก (Global Theme), การปรับแต่งธีมเฉพาะ (Custom Theme), และการกำหนดคลาสเฉพาะ (Class Definition) ซึ่งทั้งหมดนี้สามารถถูกจัดการและอ้างอิงผ่านระบบฐานข้อมูลได้อย่างมีประสิทธิภาพ
1. การกำหนดธีมทั่วโลก (Global Theme)
การกำหนดธีมเป็นการกำหนดรูปลักษณ์พื้นฐานของแผนภาพทั้งหมดให้เป็นแบบเดียวกัน โดยเราสามารถกำหนดค่าธีมพื้นฐาน (เช่น ‘neutral’, ‘forest’, หรือ ‘dark’) และจัดเก็บค่าเหล่านี้ไว้ในตารางการตั้งค่า (Configuration Table) ของ PostgreSQL
SQL
-- การกำหนดค่าธีมพื้นฐานสำหรับ Mermaid Diagram
INSERT INTO diagram_config (config_key, config_value) VALUES
('theme', 'neutral');
-- SELECT * FROM diagram_config WHERE config_key = 'theme';
2. การสร้างคลาสและสไตล์เฉพาะ (Class Definition: classDef)
นี่คือหัวใจของการปรับแต่งสไตล์ โดยเราใช้ `classDef` เพื่อสร้างรูปแบบ (Style Template) ที่สามารถนำไปใช้ซ้ำได้ การกำหนดสไตล์เหล่านี้จะถูกจัดการเสมือนการสร้าง Custom Data Type ใน PostgreSQL เพื่อให้มีโครงสร้างที่ชัดเจน
SQL
-- 1. สร้างโครงสร้างประเภทข้อมูลสำหรับสไตล์ (Simulated classDef)
CREATE TYPE diagram_style AS ENUM ('start_node', 'process_step', 'database_box');
-- 2. กำหนดค่าสไตล์สำหรับ 'start_node' (เทียบเท่า classDef start)
INSERT INTO diagram_styles (style_name, fill_color, stroke_color, font_weight) VALUES
('start_node', '#D6FFD4', '#3C6A39', 'bold');
-- 3. การนำไปใช้งาน (Applying the style to an object)
-- object_id: 'Start', style_ref: 'start_node'
SELECT 'Start' AS object_id, 'start_node' AS style_ref;
3. การปรับแต่งธีมขั้นสูง (Custom Theme Variables)
สำหรับความยืดหยุ่นสูงสุด เราสามารถกำหนดตัวแปรสี (Color Variables) ที่ควบคุมองค์ประกอบย่อย ๆ ของแผนภาพได้ การจัดการตัวแปรเหล่านี้ใน PostgreSQL ช่วยให้เราสามารถอัปเดตโทนสีของระบบได้ง่าย โดยไม่ต้องแก้ไขโค้ดหลักของ Mermaid.js
SQL
-- การกำหนดตัวแปรสีหลัก (Primary Color Variables)
UPDATE diagram_variables SET variable_name = 'primary_color', variable_value = '#007bff';
-- การกำหนดตัวแปรสีรอง (Secondary Color Variables)
INSERT INTO diagram_variables (variable_name, variable_value) VALUES
('background_color', '#f8f9fa');
บทสรุป
การทำความเข้าใจการกำหนดสไตล์ของ Mermaid.js ไม่ได้จำกัดอยู่แค่การเขียนโค้ด แต่รวมถึงการจัดการโครงสร้างข้อมูลที่ควบคุมสไตล์เหล่านั้นด้วย การจำลองการจัดการธีมและคลาสผ่านระบบฐานข้อมูลอย่าง PostgreSQL ทำให้เราสามารถสร้างระบบ Diagramming ที่มีความยืดหยุ่นสูง สามารถอัปเดตสไตล์ได้จากส่วนหลังบ้าน (Backend) และมั่นใจได้ว่าทุกองค์ประกอบของแผนภาพจะถูกควบคุมด้วยชุดกฎเกณฑ์ที่ชัดเจนและเป็นมาตรฐานเดียวกัน