Diagram ToolMermaid - Ant Design X

When to Use

Need to render Mermaid diagrams in the application
Want to provide interactive features like zoom, pan, and code view
Need to support both image and code view modes

Code Demo

API

Property	Description	Type	Default
children	Code content	`string`	-
header	Header	`React.ReactNode \| null`	React.ReactNode
className	Style class name	`string`
classNames	Style class name	`string`	-
highlightProps	Code highlighting configuration	`highlightProps`	-

Semantic DOM

Theme Variables (Design Token)

Component TokenHow to use?

Token Name	Description	Type	Default Value
colorBgTitle	Title background color	string	rgba(0,0,0,0.06)
colorBorderCode	Code block border color	string	#f0f0f0
colorBorderGraph	Graph border color	string	#f0f0f0
colorTextTitle	Title text color	string	rgba(0,0,0,0.88)

Global TokenHow to use?