参与 WeaveFox「AI艺术家」大赛，赢 SEE Conf 门票与千元好礼

logoAnt Design X

设计研发组件X MarkdownX SDK演示国内镜像
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
      2.0.0
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 确认
    • Think思考过程
      2.0.0
    • ThoughtChain思维链
      2.0.0
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 反馈
    • Actions操作列表
    • CodeHighlighter代码高亮
      2.1.0
    • FileCard文件卡片
      2.0.0
    • Mermaid图表工具
      2.1.0
    • Sources来源引用
      2.0.0
  • 其他
    • XProvider全局化配置

Mermaid
图表工具

用于渲染图表工具 Mermaid。
使用import { Mermaid } from "@ant-design/x";
源码components/mermaid
文档
编辑此页...
版本自 2.1.0 起支持
更新日志

何时使用

  • 用于在应用中渲染支持缩放、平移、图像/代码双视图切换的交互式 Mermaid 图表。
  • 与 XMarkdown 结合使用，可在 Markdown 内容中渲染 Mermaid，并增强交互功能。

代码演示

API

属性说明类型默认值
children代码内容string-
header顶部React.ReactNode | nullReact.ReactNode
className样式类名string
classNames样式类名string-
highlightProps代码高亮配置highlightProps-

Semantic DOM

主题变量（Design Token）

组件 Token如何定制？
Token 名称描述类型默认值
colorBgTitle标题背景颜色stringrgba(0,0,0,0.06)
colorBorderCode代码块边框颜色string#f0f0f0
colorBorderGraph图表边框颜色string#f0f0f0
colorTextTitle标题文本颜色stringrgba(0,0,0,0.88)
全局 Token如何定制？
基本
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
流程图示例
自定义 Header
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
配合 XMarkdown
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • root
    根节点
  • header
    头部的容器
  • graph
    图片的容器