使用 Markmap 來顯示心智圖

如果你想在 MkDocs 中使用 Markmap（一種可以將 Markdown 轉換為交互式心智圖的工具），你可以透過幾種方式來實現：

✅ 方法 1：直接在 MkDocs 使用 Markmap

MkDocs 本身不直接支援 Markmap，但你可以使用 自訂 JavaScript 來啟用它。

📌 步驟 1：安裝 MkDocs

如果你還沒安裝 MkDocs，請先安裝：

pip install mkdocs mkdocs-material

📌 步驟 2：修改 mkdocs.yml

在你的 mkdocs.yml 檔案中，新增 JavaScript 引用：

extra_javascript:
  - https://cdn.jsdelivr.net/npm/markmap-autoloader@0.15.3

這樣 MkDocs 就能自動載入 Markmap 來處理 Markdown 中的心智圖。

📌 步驟 3：在 Markdown 檔案中寫入 Markmap 語法

在你的 .md 檔案（例如 docs/mindmap.md）中，使用 三個反引號 (```) 和 markmap 來標記你的心智圖：

# 我的心智圖

```markmap
# 主要主題
## 子主題 1
### 內容 1.1
### 內容 1.2
## 子主題 2
### 內容 2.1
```

這樣，當 MkDocs 生成網站時，Markmap 就會自動轉換這段 Markdown 成為互動式的心智圖。

✅ 方法 2：使用 MkDocs 插件

有一個 MkDocs 的外掛 mkdocs-markmap 可以直接支援 Markmap，但需要額外安裝。

📌 安裝 mkdocs-markmap 插件

pip install mkdocs-markmap

📌 修改 mkdocs.yml

在 mkdocs.yml 中啟用這個外掛：

plugins:
  - markmap

📌 在 Markdown 中使用

```markmap
# 我的心智圖
## 主要分支 1
### 子內容 1.1
### 子內容 1.2
## 主要分支 2
### 子內容 2.1
```

這樣當 MkDocs 產生網站時，這些 Markdown 心智圖就會自動轉換為互動式視覺化內容。

✅ 方法 3：手動嵌入 HTML

如果你想要更細緻的控制，可以手動嵌入 HTML + JavaScript 來載入 Markmap：

📌 在 Markdown 中嵌入 HTML

# 互動式心智圖

<div class="markmap">
# 我的心智圖
## 主要主題
### 內容 1
### 內容 2
</div>

<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@0.15.3"></script>

這樣可以讓你在 不改變 Markdown 語法 的情況下，直接在 MkDocs 網站上嵌入互動式的 Markmap 心智圖。

🚀 總結

如果你只是想快速加入心智圖，建議 方法 1（載入 JS），如果你希望 MkDocs 完全支援 Markmap，建議 方法 2（安裝插件）。