This page demonstrates the two enhanced components supported by the docs site: Tabs and Mermaid diagrams. Both adapt to light/dark themes, and Mermaid re-renders automatically when the theme changes.
Tabs
Basic usage
Wrap content with a :::tabs container and separate each tab with ==. Ideal for parallel options.
Supports JSAPI, Native, QR code, APP, and Mini-Program payments, covering all WeChat scenarios.
Code variant
Add variant:code to render tabs as a code group — ideal for comparing multiple languages / versions.
curl -X POST https://api.daxpay.cn/unipay \
-H "Content-Type: application/json" \
-H "Accesstoken: ${token}" \
-d '{"bizOrderNo":"O202601001","amount":100,"channel":"alipay"}'Shared selection
Multiple tab groups marked with the same key:name share their selection state — switching one updates all.
WeChat Pay channel notes and integration points.
The group below shares the same key as the one above — switching above syncs here:
- Rate: 0.6%
- Settlement: T+1
Nested tabs
Use four colons for the outer layer and three for the inner to build hierarchies.
Sandbox WeChat Pay configuration.
Mermaid Diagrams
Use a mermaid code block in Markdown to render diagrams — flowcharts, sequence diagrams, architecture graphs, state machines, and more.
Payment Flow
Payment & Callback Sequence
System Architecture
Order State Machine
Mind Maps
The docs support two kinds of mind maps: Mermaid mindmap (static SVG) and Markmap (interactive — collapsible / zoomable).
Mermaid mindmap (static)
Markmap (interactive)
Click nodes to collapse / expand, scroll to zoom, drag to pan.