แผนภาพบล็อก
บล็อกไดอะแกรมประกอบด้วยบล็อกและตัวเชื่อมต่อ เพื่อแสดงระบบ กระบวนการ หรือสถาปัตยกรรมที่ซับซ้อนอย่างชัดเจน บล็อกแทนคอมโพเนนต์หรือฟังก์ชันพื้นฐาน ส่วนตัวเชื่อมต่อแสดงความสัมพันธ์หรือการไหลระหว่างคอมโพเนนต์เหล่านี้ บล็อกไดอะแกรมมีความสำคัญอย่างยิ่งในแวดวงต่าง ๆ เช่น วิศวกรรม การพัฒนาซอฟต์แวร์ และการจัดการกระบวนการ
คัดลอก
ฝัง
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
การใช้งานบล็อกไดอะแกรม
จุดประสงค์หลักของบล็อกไดอะแกรมคือการให้มุมมองระดับสูงของระบบ ทำให้ผู้คนเข้าใจและวิเคราะห์ได้ง่าย โดยไม่ต้องเจาะลึกรายละเอียดที่ซับซ้อนของแต่ละคอมโพเนนต์ สิ่งนี้ทำให้บล็อกไดอะแกรมมีประโยชน์เป็นพิเศษสำหรับการทำให้ระบบที่ซับซ้อนง่ายขึ้น และการอธิบายโครงสร้างโดยรวมและการโต้ตอบของคอมโพเนนต์ต่าง ๆ ภายในระบบ
สถานการณ์การใช้งาน
บล็อกไดอะแกรมมีการใช้งานอย่างกว้างขวางในหลากหลายอุตสาหกรรมและสาขาวิชา โดยหลัก ๆ ได้แก่:
- สถาปัตยกรรมซอฟต์แวร์: ในการพัฒนาซอฟต์แวร์ บล็อกไดอะแกรมใช้แสดงสถาปัตยกรรมของแอปพลิเคชันซอฟต์แวร์ ซึ่งรวมถึงการแสดงว่าโมดูลหรือบริการต่าง ๆ โต้ตอบกันอย่างไร การไหลของข้อมูล และการโต้ตอบของคอมโพเนนต์ระดับสูง
- แผนภาพโทโพโลยีเครือข่าย: บล็อกไดอะแกรมเหมาะอย่างยิ่งสำหรับการแสดงสถาปัตยกรรมเครือข่ายใน IT และโทรคมนาคม สามารถแสดงว่าอุปกรณ์และบริการเครือข่ายต่าง ๆ เชื่อมต่อกันอย่างไร รวมถึง router, switch, firewall และการไหลของข้อมูลในเครือข่าย
- แผนภาพกระบวนการผลิต: ในธุรกิจและการผลิต สามารถใช้บล็อกไดอะแกรมเพื่อสร้างแผนภาพกระบวนการได้ แผนภาพเหล่านี้แทนขั้นตอนต่าง ๆ ของกระบวนการทางธุรกิจหรือการผลิต ช่วยให้เห็นลำดับขั้นตอน จุดตัดสินใจ และการควบคุมกระบวนการ
- ระบบไฟฟ้า: วิศวกรใช้บล็อกไดอะแกรมเพื่อแสดงระบบไฟฟ้าและวงจร สามารถอธิบายโครงสร้างระดับสูงของระบบไฟฟ้า การโต้ตอบระหว่างคอมโพเนนต์ไฟฟ้าต่าง ๆ และการไหลของกระแสไฟฟ้า
- จุดประสงค์ทางการศึกษา: บล็อกไดอะแกรมยังใช้กันอย่างแพร่หลายในสื่อการศึกษา เพื่ออธิบายแนวคิดและระบบที่ซับซ้อนด้วยวิธีที่เรียบง่ายขึ้น บล็อกไดอะแกรมช่วยแยกย่อยและแสดงทฤษฎีทางวิทยาศาสตร์ หลักการทางวิศวกรรม และระบบเทคโนโลยี
ต่อไปนี้ เราจะเจาะลึกวิธีการสร้างและจัดการบล็อกไดอะแกรมด้วย Mermaid ครอบคลุมทุกอย่างตั้งแต่ไวยากรณ์พื้นฐานไปจนถึงการกำหนดค่าและสไตล์ขั้นสูง
บล็อกไดอะแกรมอย่างง่าย
โครงสร้างพื้นฐาน
บล็อกไดอะแกรมประกอบด้วยบล็อกที่แทนเอนทิตีหรือคอมโพเนนต์ต่าง ๆ ใน Mermaid สามารถสร้างบล็อกได้ง่ายด้วยป้ายกำกับข้อความธรรมดา บล็อกไดอะแกรมในรูปแบบพื้นฐานที่สุดอาจเป็นชุดของบล็อกที่ไม่มีการเชื่อมต่อใด ๆ
ตัวอย่างบล็อกไดอะแกรมอย่างง่าย: หากต้องการสร้างบล็อกไดอะแกรมอย่างง่ายที่มีบล็อกสามอันซึ่งมีป้ายกำกับว่า a, b และ c ไวยากรณ์มีดังนี้:
คัดลอก
ฝัง
block-beta
a b c
โค้ดนี้จะสร้างบล็อกสามอันที่เรียงในแนวนอน โดยแต่ละบล็อกจะถูกเว้นช่วงและจัดตำแหน่งโดยอัตโนมัติ เพื่อให้อ่านง่ายที่สุด
กำหนดจำนวนคอลัมน์ที่จะใช้
แผนภาพหลายคอลัมน์
แม้ว่าบล็อกไดอะแกรมอย่างง่ายจะเป็นแบบเส้นตรงและเรียบง่าย แต่ระบบที่ซับซ้อนกว่าอาจต้องใช้เลย์เอาต์ที่มีโครงสร้าง Mermaid อนุญาตให้จัดระเบียบบล็อกเป็นหลายคอลัมน์ จึงช่วยสร้างแผนภาพที่ซับซ้อนและละเอียดยิ่งขึ้น
ตัวอย่างแผนภาพหลายคอลัมน์: ในกรณีที่ต้องกระจายบล็อกไปยังหลายคอลัมน์ สามารถระบุจำนวนคอลัมน์และจัดเรียงบล็อกอย่างสอดคล้องกัน ต่อไปนี้คือวิธีการสร้างบล็อกไดอะแกรมที่มีสามคอลัมน์และสี่บล็อก โดยบล็อกที่สี่ปรากฏในบรรทัดที่สอง:
คัดลอก
ฝัง
block-beta
columns 3
a b c d
ไวยากรณ์นี้ Mermaid จะจัดเรียงบล็อก a, b, c และ d ไว้ในสามคอลัมน์ และขึ้นบรรทัดใหม่ตามความจำเป็น ฟีเจอร์นี้มีประโยชน์เป็นพิเศษสำหรับการแสดงระบบแบบลำดับชั้นหรือหลายชั้น
การกำหนดค่าบล็อกขั้นสูง
ไวยากรณ์ขั้นสูงของ Mermaid ทำให้การออกแบบแผนภาพมีความยืดหยุ่นและความซับซ้อนมากขึ้น สามารถรองรับกรณีการใช้งานและสถานการณ์ที่หลากหลายขึ้น
ปรับความกว้างของบล็อก
ข้ามหลายคอลัมน์
ในแผนภาพที่ซับซ้อนกว่า คุณอาจต้องใช้บล็อกที่ข้ามหลายคอลัมน์ เพื่อเน้นคอมโพเนนต์บางอย่างหรือแสดงเอนทิตีที่ใหญ่กว่า Mermaid อนุญาตให้ปรับความกว้างของบล็อกเพื่อครอบคลุมหลายคอลัมน์ จึงช่วยเพิ่มความอ่านง่ายและความเป็นโครงสร้างของแผนภาพ
ตัวอย่าง: หากต้องการสร้างบล็อกที่ข้ามสองคอลัมน์ คุณสามารถระบุความกว้างที่ต้องการให้กับแต่ละบล็อกได้:
คัดลอก
ฝัง
block-beta
columns 3
a["A label"] b:2 c:2 d
ในตัวอย่างนี้ บล็อกที่มีป้ายกำกับว่า A label ใช้พื้นที่หนึ่งคอลัมน์ ส่วนบล็อก b, c ข้าม 2 คอลัมน์ และ d ถูกจัดสรรให้กับคอลัมน์ของตัวเอง ความยืดหยุ่นของขนาดบล็อกเช่นนี้มีความสำคัญอย่างยิ่งต่อการแสดงระบบที่มีคอมโพเนนต์ที่มีความสำคัญหรือขนาดต่างกันได้อย่างถูกต้อง
สร้างบล็อกผสม
บล็อกซ้อนกัน
บล็อกผสมอนุญาตให้แสดงระบบแบบซ้อนกันหรือแบบลำดับชั้น ซึ่งคอมโพเนนต์หนึ่งประกอบด้วยคอมโพเนนต์ย่อยหลายตัว
ตัวอย่าง: การสร้างบล็อกผสมเกี่ยวข้องกับการกำหนดบล็อกแม่ แล้วซ้อนบล็อกลูกไว้ภายใน ต่อไปนี้คือไวยากรณ์สำหรับกำหนดบล็อกผสมที่มีองค์ประกอบซ้อนกัน:
คัดลอก
ฝัง
block-beta
block
D
end
A["A: I am a wide one"]
ในไวยากรณ์นี้ D เป็นบล็อกลูกที่ซ้อนอยู่ภายในบล็อกแม่ที่ใหญ่กว่า ฟีเจอร์นี้มีประโยชน์เป็นพิเศษสำหรับการอธิบายโครงสร้างที่ซับซ้อน เช่น เซิร์ฟเวอร์ที่มีหลายบริการ หรือแผนกหนึ่งภายในกรอบองค์กรที่ใหญ่กว่า
ความกว้างคอลัมน์อัตโนมัติ
ปรับความกว้าง
Mermaid อนุญาตให้ปรับความกว้างคอลัมน์แบบไดนามิกตามเนื้อหาของบล็อก ความกว้างของคอลัมน์ถูกกำหนดโดยบล็อกที่กว้างที่สุดในคอลัมน์ เพื่อให้แผนภาพมีความสมดุลและอ่านง่าย
ตัวอย่าง: ในแผนภาพที่มีขนาดบล็อกต่างกัน Mermaid จะปรับความกว้างคอลัมน์โดยอัตโนมัติให้พอดีกับบล็อกที่ใหญ่ที่สุดในแต่ละคอลัมน์
คัดลอก
ฝัง
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
ที่นี่สาธิตว่า Mermaid ปรับความกว้างของคอลัมน์แบบไดนามิกให้พอดีกับบล็อกที่กว้างที่สุดได้อย่างไร
การรวมบล็อกในแนวนอน: ในกรณีที่ต้องซ้อนบล็อกในแนวนอน สามารถใช้ความกว้างคอลัมน์เพื่อทำงานให้สำเร็จได้ ต่อไปนี้คือไวยากรณ์ของบล็อกไดอะแกรมสำหรับสร้างบล็อก 4 อันที่ซ้อนกัน:
คัดลอก
ฝัง
block-beta
block
columns 1
a["A label"] b c d
end
ในตัวอย่างนี้ ความกว้างของบล็อกที่รวมกันจะถูกปรับโดยอัตโนมัติเป็นความกว้างของบล็อกย่อยที่ใหญ่ที่สุด
ประเภทและรูปร่างของบล็อก
บล็อกไดอะแกรมของ Mermaid ไม่จำกัดเฉพาะรูปร่างสี่เหลี่ยมมุมฉากมาตรฐาน Mermaid มีรูปร่างบล็อกหลากหลาย จึงสามารถแสดงประเภทข้อมูลหรือเอนทิตีที่ต่างกันได้อย่างละเอียดและเป็นเอกลักษณ์ยิ่งขึ้น
รูปร่างบล็อกมาตรฐาน
สี่เหลี่ยมมุมมน
สร้างบล็อกสี่เหลี่ยมมุมมน ใช้แสดงคอมโพเนนต์ที่นุ่มนวลหรือยืดหยุ่นกว่าได้:
คัดลอก
ฝัง
block-beta
id1("This is the text in the box")
รูปร่างสนามกีฬา
บล็อกรูปร่างสนามกีฬาใช้แสดงคอมโพเนนต์ที่เน้นกระบวนการได้:
คัดลอก
ฝัง
block-beta
id1(["This is the text in the box"])
รูปร่างกราฟย่อย
ใช้แสดงกราฟย่อยหรือกระบวนการที่ซ้อนอยู่ แสดงด้วยบล็อกสี่เหลี่ยมที่มีเส้นแนวตั้งคู่:
คัดลอก
ฝัง
block-beta
id1[["This is the text in the box"]]
ทรงกระบอก
ทรงกระบอกเหมาะอย่างยิ่งสำหรับแสดงฐานข้อมูลหรือคอมโพเนนต์จัดเก็บข้อมูล:
คัดลอก
ฝัง
block-beta
id1[("Database")]
วงกลม
วงกลมใช้แสดงคอมโพเนนต์ที่เป็นศูนย์กลางหรือสำคัญได้:
คัดลอก
ฝัง
block-beta
id1(("This is the text in the circle"))
รูปร่างไม่สมมาตร สี่เหลี่ยมข้าวหลามตัด และหกเหลี่ยม
สำหรับการตัดสินใจใช้สี่เหลี่ยมข้าวหลามตัด สำหรับกระบวนการที่เป็นเอกลักษณ์หรือเฉพาะทาง สามารถใช้รูปร่างไม่สมมาตรและหกเหลี่ยมได้:
รูปร่างไม่สมมาตร
คัดลอก
ฝัง
block-beta
id1>"This is the text in the box"]
คัดลอก
ฝัง
block-beta
id1{"This is the text in the box"}
คัดลอก
ฝัง
block-beta
id1{{"This is the text in the box"}}
สี่เหลี่ยมด้านขนานและสี่เหลี่ยมคางหมู
สี่เหลี่ยมด้านขนานและสี่เหลี่ยมคางหมูเหมาะอย่างยิ่งสำหรับการป้อน/ส่งออกและกระบวนการเปลี่ยนผ่าน
คัดลอก
ฝัง
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
วงกลมซ้อน
เพื่อไฮไลต์คอมโพเนนต์ที่สำคัญหรือมีลำดับความสำคัญสูง การใช้วงกลมซ้อนจะได้ผลดีมาก:
คัดลอก
ฝัง
block-beta
id1((("This is the text in the circle")))
บล็อกลูกศรและบล็อกว่าง
บล็อกลูกศร
บล็อกลูกศรสามารถแสดงทิศทางหรือการไหลภายในกระบวนการได้อย่างชัดเจน:
คัดลอก
ฝัง
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
บล็อกว่าง
บล็อกว่างใช้สร้างช่องว่างได้ ซึ่งมีประโยชน์สำหรับเลย์เอาต์และความอ่านง่าย:
คัดลอก
ฝัง
block-beta
columns 3
a space b
c d e
คัดลอก
ฝัง
block-beta
ida space:3 idb idc
หมายเหตุ คุณสามารถใช้สัญลักษณ์ตัวเลข space:num เพื่อกำหนดจำนวนคอลัมน์ที่บล็อกว่างใช้ โดย num แสดงถึงความกว้างคอลัมน์ คุณยังสามารถใช้ space โดยค่าเริ่มต้นเป็นหนึ่งคอลัมน์
รูปร่างมาตรฐานและรูปร่างพิเศษใน Mermaid ช่วยเพิ่มความสามารถในการสื่อสารของบล็อกไดอะแกรม ทำให้สามารถแสดงได้อย่างถูกต้องและมีบริบทมากขึ้น
เชื่อมต่อบล็อกด้วยเส้น
คุณลักษณะสำคัญอย่างหนึ่งของบล็อกไดอะแกรมของ Mermaid คือความสามารถในการเชื่อมต่อบล็อกต่าง ๆ ด้วยเส้นหรือลิงก์ประเภทต่าง ๆ
ประเภทการเชื่อมต่อและลูกศรพื้นฐาน
การเชื่อมต่อบล็อกต้องใช้ลูกศรหรือเส้น ตัวเชื่อมต่อเหล่านี้อธิบายความสัมพันธ์หรือการไหลของข้อมูลระหว่างบล็อก Mermaid มีประเภทลูกศรหลากหลายเพื่อตอบสนองความต้องการของแผนภาพที่แตกต่างกัน
ลิงก์พื้นฐาน
สร้างลิงก์อย่างง่ายที่มีลูกศร แสดงทิศทางหรือการไหลจากบล็อกหนึ่งไปยังอีกบล็อกหนึ่ง:
คัดลอก
ฝัง
block-beta
A space B
A-->B
ตัวอย่างนี้อธิบายการเชื่อมต่อโดยตรงจากบล็อก A ไปยังบล็อก B
ข้อความบนลิงก์
นอกจากการเชื่อมต่อบล็อกแล้ว มักต้องอธิบายหรือติดป้ายกำกับความสัมพันธ์ด้วย Mermaid อนุญาตให้เพิ่มข้อความบนลิงก์ เพื่อให้บริบทกับลิงก์
หากต้องการเพิ่มข้อความบนลิงก์ ไวยากรณ์คือการใส่ข้อความนั้นในนิยามของลิงก์:
คัดลอก
ฝัง
block-beta
A space:2 B
A-- "X" -->B
คัดลอก
ฝัง
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
สไตล์และการปรับแต่งเอง
นอกจากโครงสร้างและเลย์เอาต์ของบล็อกไดอะแกรมแล้ว Mermaid ยังมีตัวเลือกสไตล์มากมาย ฟีเจอร์การปรับแต่งเองเหล่านี้ช่วยให้สร้างแผนภาพที่มีเอกลักษณ์ทางสายตาและมีข้อมูลมากขึ้น
สไตล์ของบล็อกเดี่ยว
Mermaid สามารถกำหนดสไตล์โดยละเอียดให้กับบล็อกเดี่ยวได้ คุณสามารถใช้คุณสมบัติ CSS ต่าง ๆ เช่น สี การตีเส้น และความหนาของขอบ
กำหนดสไตล์ของบล็อกเดี่ยวเอง
หากต้องการนำสไตล์แบบกำหนดเองไปใช้กับบล็อกหนึ่ง คุณสามารถใช้ไวยากรณ์ style ตามด้วยตัวระบุของบล็อกและคุณสมบัติ CSS ที่ต้องการ:
คัดลอก
ฝัง
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
สไตล์คลาส
Mermaid รองรับการนำสไตล์ไปใช้กับคลาส หากคุณต้องการนำชุดสไตล์เฉพาะไปใช้กับหลายองค์ประกอบ การใช้การตั้งค่าสไตล์จะง่ายกว่า เพราะคุณเพียงเชื่อมโยงองค์ประกอบเหล่านั้นกับคลาสเดียว
กำหนดสไตล์ให้กับคลาสเดียว
คัดลอก
ฝัง
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
ที่นี่ มีการกำหนดคลาสชื่อ blue และนำไปใช้กับบล็อก A ส่วนบล็อก B ได้รับสไตล์แยกต่างหาก
กรณีการใช้งาน
เมื่อนำแผนภาพแบบโมดูลาร์ของบล็อกไดอะแกรม Mermaid ไปใช้กับสถานการณ์จริง ความสามารถรอบด้านของมันจะแสดงออกมาอย่างเต็มที่
ตัวอย่างโดยละเอียดของฟังก์ชันต่าง ๆ
ด้วยองค์ประกอบด้านโครงสร้าง ลิงก์ และสไตล์ เราสามารถสร้างบล็อกไดอะแกรม Mermaid ที่ทำหน้าที่เฉพาะในสถานการณ์ต่าง ๆ ได้
สถาปัตยกรรมระบบ
ต่อไปนี้คือสถาปัตยกรรมระบบซอฟต์แวร์อย่างง่ายที่มีคอมโพเนนต์เชื่อมต่อกัน:
คัดลอก
ฝัง
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
ตัวอย่างนี้แสดงสถาปัตยกรรมพื้นฐานที่ประกอบด้วย frontend, backend และฐานข้อมูล โดยรูปลักษณ์ของแต่ละบล็อกแตกต่างกันเพื่อแยกแยะประเภทคอมโพเนนต์ที่ต่างกัน
กระบวนการทางธุรกิจ
ต่อไปนี้คือกระบวนการทางธุรกิจที่มีจุดตัดสินใจและหลายขั้นตอน:
คัดลอก
ฝัง
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
กรณีศึกษาจริงเหล่านี้เน้นคุณค่าในทางปฏิบัติของบล็อกไดอะแกรม Mermaid ในการทำให้ข้อมูลที่ซับซ้อนง่ายขึ้นและบรรลุการสื่อสารที่มีประสิทธิภาพข้ามสาขา
การแก้ไขปัญหา
การใช้ไวยากรณ์ Mermaid เพื่อสร้างบล็อกไดอะแกรมที่ซับซ้อนบางครั้งอาจเผชิญกับความท้าทาย ที่นี่ได้รวบรวมข้อผิดพลาดทางไวยากรณ์ที่พบบ่อย และให้เคล็ดลับในการจัดการโครงสร้างแผนภาพที่ซับซ้อนยิ่งขึ้น
ข้อผิดพลาดทางไวยากรณ์ที่พบบ่อย
การหลีกเลี่ยงข้อผิดพลาดทางไวยากรณ์ที่พบบ่อยเป็นกุญแจสำคัญในการใช้บล็อกไดอะแกรม Mermaid ได้อย่างราบรื่น
ข้อผิดพลาดของลิงก์
การใช้ไวยากรณ์ลิงก์ที่ไม่ถูกต้องอาจนำไปสู่ผลลัพธ์ที่ไม่คาดคิดหรือแผนภาพที่เสียหาย:
คัดลอก
ฝัง
block-beta
A - B
แก้ไข: ตรวจสอบให้แน่ใจว่าใช้การเชื่อมต่อด้วยลูกศร (--> หรือ ---) กับแต่ละบล็อกอย่างถูกต้อง เพื่อกำหนดทิศทางและประเภทของการเชื่อมต่อ นอกจากนี้ หลักการพื้นฐานอย่างหนึ่งของบล็อกไดอะแกรมคือให้ผู้เขียนควบคุมตำแหน่งของบล็อกได้อย่างเต็มที่ ดังนั้นในกรณีด้านบน จึงต้องเพิ่มช่องว่างระหว่างบล็อก:
คัดลอก
ฝัง
block-beta
A space B
A --> B
สไตล์ไม่ตรงตำแหน่ง
การนำสไตล์ไปใช้ในบริบทที่ผิดหรือด้วยไวยากรณ์ที่ไม่ถูกต้องอาจทำให้ไม่สามารถกำหนดสไตล์ได้ตามที่คาดหวัง:
คัดลอก
ฝัง
block-beta
A
style A fillpink;
แก้ไข: ตรวจสอบให้แน่ใจว่าใช้จุลภาคแยกคุณสมบัติสไตล์อย่างถูกต้อง และใช้รูปแบบคุณสมบัติ CSS ที่ถูกต้องเพื่อแก้ไขไวยากรณ์:
คัดลอก
ฝัง
block-beta
A
style A fill:pink,stroke:#333;
