# markdown-graphs 啟用有限 MDX 支援，僅少數元件可用

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：keshav (@kshvbgde) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥 · 日期：2026-08-31

> 原始來源：https://x.com/kshvbgde/status/2093826416307843290

## 證據與延伸閱讀

- [markdown-graphs 啟用有限 MDX 支援，僅少數元件可用。](https://mdx-graphs.kshv.me/) — 官方文件 · 最後核對：2026-08-31 · 支持主張：The linked markdown-graphs service now accepts MDX for some components, expanding the authoring options beyond its earlier capability set.
- [markdown-graphs MDX support — kshv.me](https://kshv.me/) — 官方文件 · 最後核對：2026-08-31 · 支持主張：The linked markdown-graphs service now accepts MDX for some components, expanding the authoring options beyond its earlier capability set.
- [markdown-graphs 現在接受 MDX](https://x.com/kshvbgde/status/2093826416307843290)
- [coding agent 會喜歡的 skill](https://mdx-graphs.kshv.me/docs/skill)

## 中文摘要

markdown-graphs 啟用有限 MDX 支援，僅少數元件可用。

**功能更新** Keshav Bagaade（@kshvbgde）宣布，[markdown-graphs](https://mdx-graphs.kshv.me) 現在接受 MDX，作者不必只依賴原先的 Markdown 與 ASCII 表示法。這項更新擴大了內容製作方式，並延續他所稱「你的 coding agent 會喜歡」的 markdown graphs skill；相關的 skill 說明可在[文件頁面](https://mdx-graphs.kshv.me/docs/skill)查閱。不過，公告也明確提醒，MDX 當下只開放給少數元件，更多元件預計日後加入，因此不能把整個程式庫都視為已支援 MDX。

**元件與撰寫方式** 網站將 markdown-graphs 定位為以單色字元與虛線框呈現表格、圖表和圖解的 React 元件程式庫，並提供兩種使用路徑：

- 元件可以在 MDX 中使用 JSX；也可以把 ASCII 版本貼進 README，方便在不執行互動式元件的情境下閱讀。
- 網站列出 25 個同時具備 MDX 與 fenced ASCII 版本的元件，代表兩種發佈形式已有相當程度的重疊。
- Flow、Plot、Activity、Heatmap、Calendar、Timer、Countdown 目前仍維持 React 版本，沒有對應的 MDX twin；這些元件不能因為整體支援已上線，就直接假設能在 MDX 中使用。
- 文件提供搜尋功能，讓作者能先確認各元件的支援狀態，再決定要採用 MDX、Markdown 或 ASCII 表示法。

**開發與部署模式** markdown-graphs 採用 shadcn registry 的安裝方式，網站提示使用者在準備好後，將所需檔案複製到自己的專案中。這種做法把元件原始檔納入使用者可控制的專案，而不是只依賴外部服務；專案目前以 MIT 授權開源，並在 GitHub 上提供來源。網站也展示了多種圖表和介面範例，包括研究成本、RFC 進度、Launch checklist、財務邊際、貢獻紀錄、伺服器負載、API uptime 與路由流量等情境。 

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1788150154011-ws2b5rsu.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/e691fac81c3dbfc6.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> markdown-graphs 網站展示透過 ASCII 區塊呈現的元件與研究成本統計表

**實際價值與限制** 對需要撰寫技術文件、README 或產品頁面的開發者而言，MDX support 讓文件中的圖表更容易和文字、React 元件放在同一個內容流程裡，也讓 coding agent 能以可搜尋的 skill 文件作為製作依據。但目前支援範圍仍不完整，使用者必須逐項核對文件，不能把網站展示的所有圖表都當成可直接在 MDX 中重現；尤其那些「沒有 MDX twin」的圖表，仍只能走 React 路徑。這次更新的重點因此不是一次完成全面支援，而是先讓部分元件可用，再逐步增加涵蓋範圍。

## 媒體內容

**markdown-graphs 網站展示透過 ASCII 區塊呈現的元件與研究成本統計表**

**影片中的 Prompt 與操作**

操作步驟：

1. （00:00）瀏覽頁面與各 Markdown 圖表元件

## 標籤

功能更新, Skills, markdown-graphs