사용 지침

이 테마에는 펜스 코드 블록 ```mermaid을 <div class="mermaid-container"> 래퍼로 변환하는 커스텀 remark-mermaid 플러그인(plugins/remark-mermaid.mjs)이 포함되어 있습니다. Mermaid CDN 스크립트는 페이지 로드 시 SVG 다이어그램을 렌더링합니다.

아이콘 구문

플로우차트

@\{\} 노드 구문을 사용하여 등록된 아이콘 팩에서 아이콘을 추가합니다:

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

아키텍처 다이어그램

architecture-beta 다이어그램 타입은 아이콘이 적용된 노드를 포함한 서비스 및 그룹 정의를 지원합니다:

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

사용 가능한 아이콘 팩

다음 아이콘 팩이 등록되어 있으며 Mermaid 다이어그램에서 사용할 수 있습니다. 아이콘은 참조될 때만 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 요소 초기화

Starlight의 기본 <pre> 스타일은 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를 사용합니다
컨테이너는 0.75rem 테두리 반경과 레이어드 박스 그림자를 가집니다
다이어그램은 라이트 및 다크 테마 모두에서 가독성을 유지합니다
Mermaid CDN 스크립트가 로드되고 페이지 로드 시 SVG를 렌더링합니다