คำแนะนำ

ธีมนี้ประกอบด้วยปลั๊กอิน remark-mermaid แบบกำหนดเอง (plugins/remark-mermaid.mjs) ที่แปลงบล็อกโค้ด ```mermaid แบบ fenced เป็น wrapper <div class="mermaid-container"> สคริปต์ Mermaid CDN จะเรนเดอร์แผนภาพ SVG เมื่อโหลดหน้า

ไวยากรณ์ไอคอน

ผังงาน (Flowcharts)

ใช้ไวยากรณ์โหนด @\{\} เพื่อเพิ่มไอคอนจากแพ็กเกจไอคอนที่ลงทะเบียนไว้:

nodeName@{ icon: 'pack:icon-name', label: 'Display Label' }

แผนภาพสถาปัตยกรรม (Architecture Diagrams)

ประเภทแผนภาพ architecture-beta รองรับคำนิยามบริการและกลุ่มพร้อมโหนดที่ตกแต่งด้วยไอคอน:

service myService(pack:icon-name)[Label]
group myGroup(pack:icon-name)[Label]

แพ็กเกจไอคอนที่มีอยู่

แพ็กเกจไอคอนต่อไปนี้ได้รับการลงทะเบียนและพร้อมใช้งานในแผนภาพ Mermaid ไอคอนจะถูกโหลดแบบ lazy จาก CDN เมื่อมีการอ้างอิงเท่านั้น

ชื่อแพ็ก	แพ็กเกจ npm	ไอคอนหลัก
`hashicorp-flight`	`@f5-sales-demo/icons-hashicorp-flight`	`terraform-color`, `consul-color`, `vault-color`, `aws-color`, `azure-color`, `gcp-color`, `kubernetes-color`, `docker-color`
`f5-brand`	`@f5-sales-demo/icons-f5-brand`	`network-gateway`, `security-firewall`, `security-shield-network`, `cloud-multi`, `hw-server`
`f5xc`	`@f5-sales-demo/icons-f5xc`	`web-app-and-api-protection`, `bot-defense`, `multi-cloud-app-connect`, `dns-management`, `content-delivery-network`
`carbon`	`@f5-sales-demo/icons-carbon`	`cloud-services`, `data-base`, `gateway-api`, `virtual-machine`, `load-balancer-global`, `firewall`, `dns-services`, `virtual-private-cloud`
`lucide`	`@f5-sales-demo/icons-lucide`	`server`, `database`, `shield`, `shield-check`, `globe`, `lock`, `cloud`, `network`, `user`
`mdi`	`@f5-sales-demo/icons-mdi`	`server`, `database`, `shield`, `cloud`, `lock`, `network`, `dns`, `vpn`, `router`
`phosphor`	`@f5-sales-demo/icons-phosphor`	`cloud`, `database`, `shield`, `globe`, `lock`, `network`
`tabler`	`@f5-sales-demo/icons-tabler`	`server`, `database`, `shield`, `cloud`, `lock`, `network`, `route`, `router`
`azure`	`@f5-sales-demo/icons-azure`	`virtual-networks`, `load-balancers`, `firewalls`, `virtual-network-gateways`, `virtual-machine`, `public-ip-addresses`, `route-tables`, `subnet`

เอกสารอ้างอิง CSS

การจัดรูปแบบคอนเทนเนอร์

แผนภาพ Mermaid ถูกห่อด้วยคอนเทนเนอร์ที่มีการจัดรูปแบบพร้อมมุมโค้งมนและเงากล่องแบบหลายชั้น:

.mermaid-container {
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
  margin-block: 1.5rem;
  background: #fff;
}

การรีเซ็ต Pre Element

การจัดรูปแบบ <pre> เริ่มต้นของ Starlight จะถูกลบออกจาก wrapper ของ mermaid เพื่อให้มองเห็นเฉพาะเส้นขอบคอนเทนเนอร์ด้านนอก:

.mermaid-container pre.mermaid {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

การบังคับพื้นหลัง SVG

SVG ภายในถูกบังคับให้ใช้พื้นหลังสีขาวเพื่อความเข้ากันได้กับโหมดมืด:

.mermaid-container svg {
  background: white !important;
  border-radius: 0.5rem;
}

การตรวจสอบธีม

.mermaid-container มีพื้นหลัง SVG สีขาวในโหมดมืด
เส้นขอบคอนเทนเนอร์ใช้ --sl-color-gray-5
คอนเทนเนอร์มี border radius 0.75rem และเงากล่องแบบหลายชั้น
แผนภาพสามารถอ่านได้ทั้งในธีมสว่างและธีมมืด
สคริปต์ Mermaid CDN โหลดและเรนเดอร์ SVG เมื่อโหลดหน้า