開始使用
事前準備
請在符合以下條件的 Nuxt Content 應用程式中使用此套件：
- Node.js
>=22.19.0 - Nuxt
^4.1.0 - Nuxt Content
>=3.5.0 <4.0.0
安裝
安裝模組與 Nuxt Content：
pnpm add @barzhsieh/nuxt-content-mermaid @nuxt/content
模組已內含 Mermaid，因此不需要另外安裝。 已發布的版本與套件 metadata 可在 npm 查看。
啟用模組
將模組加入 nuxt.config.ts：
export default defineNuxtConfig({
modules: ['@barzhsieh/nuxt-content-mermaid'],
})
如果應用程式已經列出 @nuxt/content，可以將它保留在模組清單中。
新增第一個圖表
在 Content 來源的 Markdown 檔案中新增 mermaid 程式碼圍欄：
# 第一個圖表
```mermaid
flowchart LR
Markdown --> Content
Content --> Mermaid
Mermaid --> Rendered
```
圍欄的語言標記必須是 mermaid。模組會在 Content 建置期間轉換此區塊，並在瀏覽器中渲染圖表。
執行應用程式
啟動 Nuxt，並開啟該 Markdown 檔案對應的路由：
pnpm dev