MindMap/MARKDOWN_INTEGRATION.md

# Markdown 节点渲染集成说明

## 概述

这个集成方案为你的 Mind Elixir 思维导图项目添加了 markdown 节点渲染能力，支持：

- ✅ **表格渲染** - 完整的 markdown 表格支持
- ✅ **代码高亮** - 代码块和行内代码
- ✅ **文本格式** - 粗体、斜体、标题等
- ✅ **列表** - 有序和无序列表
- ✅ **链接** - 自动链接渲染
- ✅ **智能检测** - 自动识别 markdown 语法

## 文件结构

```
frontend/src/
├── utils/
│   └── markdownRenderer.js    # 核心渲染器
├── components/
│   ├── MindMap.vue           # 主思维导图组件（已集成）
│   └── MarkdownTest.vue      # 测试组件
└── ...
```

## 使用方法

### 1. 在节点中使用 markdown

现在你可以在思维导图的节点内容中直接使用 markdown 语法：

```markdown
# 产品价格表

| 产品 | 价格 | 库存 |
|------|------|------|
| 苹果 | 4元 | 100个 |
| 香蕉 | 2元 | 50个 |

## 技术栈

- **前端**: Vue.js 3
- **后端**: Django
- **数据库**: PostgreSQL

## 代码示例

\`\`\`javascript
function hello() {
  console.log('Hello World!');
}
\`\`\`
```

### 2. 测试功能

访问 `MarkdownTest.vue` 组件来测试 markdown 渲染功能：

```vue
<template>
  <MarkdownTest />
</template>

<script setup>
import MarkdownTest from './components/MarkdownTest.vue';
</script>
```

### 3. 在现有节点中启用

系统会自动检测节点内容是否包含 markdown 语法，如果包含，会自动使用 markdown 渲染器。

## 核心功能

### 智能渲染

```javascript
import { smartRenderNodeContent } from '../utils/markdownRenderer.js';

// 自动检测并渲染
smartRenderNodeContent(nodeElement, content);
```

### 手动渲染

```javascript
import { renderMarkdownToHTML } from '../utils/markdownRenderer.js';

// 直接渲染为 HTML
const html = renderMarkdownToHTML(markdownContent);
```

### 语法检测

```javascript
import { hasMarkdownSyntax } from '../utils/markdownRenderer.js';

// 检测是否包含 markdown 语法
if (hasMarkdownSyntax(content)) {
  // 使用 markdown 渲染
}
```

## 支持的 Markdown 语法

### 表格
```markdown
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
```

### 代码块
```markdown
\`\`\`javascript
function test() {
  console.log('Hello');
}
\`\`\`
```

### 行内代码
```markdown
使用 \`console.log()\` 输出信息
```

### 文本格式
```markdown
**粗体文本**
*斜体文本*
```

### 列表
```markdown
- 无序列表项1
- 无序列表项2

1. 有序列表项1
2. 有序列表项2
```

### 链接
```markdown
[链接文本](https://example.com)
```

## 样式定制

渲染器会自动添加 CSS 样式，你也可以通过以下类名进行自定义：

- `.markdown-content` - 主容器
- `.markdown-table` - 表格样式
- `.markdown-code` - 代码块样式
- `.markdown-math` - 数学公式样式

## 注意事项

1. **性能**: 大量 markdown 内容可能影响渲染性能
2. **安全性**: 渲染器允许 HTML，请确保内容来源可信
3. **兼容性**: 与 Mind Elixir 的拖拽、编辑功能完全兼容

## 故障排除

### 渲染失败
- 检查 markdown 语法是否正确
- 查看浏览器控制台错误信息
- 使用 `MarkdownTest.vue` 组件测试

### 样式问题
- 检查 CSS 样式是否被覆盖
- 确保 `markdown-node-styles` 样式已加载

### 性能问题
- 避免在单个节点中放置过多内容
- 考虑将复杂内容拆分为多个子节点

## 扩展功能

如果需要更多功能，可以扩展 `markdownRenderer.js`：

- 数学公式支持（KaTeX）
- 图表支持（Mermaid）
- 更多 markdown 扩展语法

## 总结

这个集成方案让你可以在保持现有 Mind Elixir 功能的同时，享受强大的 markdown 渲染能力。特别是表格渲染功能，让思维导图可以展示更丰富的数据结构。