#流程图生成

#设计思路

mdocs 的流程图基于 Meta2d 绘图引擎，设计目标是让用户像使用 Visio 或 draw.io 一样拖拽绘制，同时将图表数据嵌入文档内容。

#插入方式

在编辑器新行中输入以下内容后回车：

---meta2d---

编辑器会自动识别并打开 Meta2d 画布编辑器。

#数据格式

图表在文档中以 ---meta2d--- 围栏块的形式内嵌存储：

---meta2d---
{ "pens": [ … ] }
---/meta2d---

编辑器渲染时：

• 识别到 ---meta2d--- 块 → 调用 canvas2svg 渲染为 SVG 预览
• 双击块 → 打开 Meta2d 画布编辑器，可拖拽编辑
• 保存 → 将 JSON 写回文档内容

#编辑器界面

#支持的图形

矩形、圆角矩形、圆形、菱形、三角形、五边形、文本、线条、数据节点、数据库、文档、显示、手动输入、并行、注释、子流程、队列、内部/外部存储等。

#设计取舍

• 为什么用 Meta2d 而非 Mermaid：Mermaid 适合由文本生成图表，但交互式编辑体验不够直观。Meta2d 提供了拖拽式 GUI 编辑器，更接近白板体验
• 数据内嵌在文档内容中：图表以 JSON 格式内嵌在文档内容里，随文档一起存储，复制、备份都很方便

#Markmap 思维导图

#使用方式

在编辑器中创建 markmap 代码块：

```markmap
# 根节点
## 分支 1
### 子节点 1.1
### 子节点 1.2
## 分支 2
```

#特性

• Markdown 语法：使用标准 Markdown 标题层级（#）定义树形结构
• 实时渲染：编辑 Markdown 时下方实时预览思维导图
• 交互一致：与 Mermaid 代码块交互方式完全相同
  • 点击内部显示源码编辑器
  • 点击外部隐藏源码，只显示思维导图
  • 点击图表进入全屏预览模式
• 全屏预览：支持缩放、拖拽，查看复杂导图更方便
• 错误提示：Markdown 语法有误时显示红色错误框

#与 Mermaid 的区别