Using MDX

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.

Mermaid flowchart example

flowchart TD A[开始] --> B[收集需求] B --> C{需求清晰?} C -->|是| D[开始开发] C -->|否| E[继续沟通] E --> B D --> F[上线发布]

Mermaid sequence example

sequenceDiagram participant User participant Frontend participant API User->>Frontend: 打开页面 Frontend->>API: 请求数据 API-->>Frontend: 返回结果 Frontend-->>User: 展示内容

Mermaid gantt example

gantt title 项目计划 dateFormat YYYY-MM-DD section 设计需求确认: a1, 2026-07-01, 3d 原型制作: after a1, 2d section 开发前端实现: 2026-07-06, 4d 后端接口: after a1, 4d

Mermaid state example

stateDiagram-v2 [*] --> 未开始未开始 --> 进行中: 开始进行中 --> 已完成: 完成进行中 --> 失败: 出错失败 --> 进行中: 重试已完成 --> [*]

Mermaid ER example

erDiagram USER ||--o{ ORDER : places ORDER ||--|{ ORDER_ITEM : contains PRODUCT ||--o{ ORDER_ITEM : includes USER { string id PK string name } ORDER { string id PK string user_id FK date created_at } ORDER_ITEM { string id PK string order_id FK string product_id FK int quantity } PRODUCT { string id PK string name }