p.md

开发一个用于演示的思维导图的前端项目。思维导图输入的格式是无序列表的markdown，可以看成一个树的数据结构。有一个根节点。演示数据如下

• root
  • a
    • a0
      • a00
      • a01
      • a02
    • a1
      • a10
      • a11
      • a12
  • b
    • b0
      • b00
      • b01
      • b02
    • b1
      • b10
      • b11
      • b12

展示的方式类似ppt演示文稿，需要展示节点和连接线。每次都有一个节点被选中，用户可以通过键盘上下按钮，选择其他节点。选择节点的顺序是树的前序遍历。先选中根节点，然后选择左子树，右子树。

布局规则：

1. 当前选中节点的祖先链，也就是 root 到当前选中节点的路径，水平排列。
2. 当前路径上的每个节点，如果它有已经访问过但不在当前路径上的子节点，这些子节点作为已完成分支显示在该节点上方。
3. 已完成分支需要继续保留自己的树形结构，不能被折叠成单个节点，也不能消失。
4. 未访问节点完全隐藏，不占位。
5. 每次切换选中节点时，整张图重新布局，避免节点重叠。 浅色背景，切换的过程有动画，节点和连线的展示要美观，会用于汇报演示。推荐框架：React + SVG + Framer Motion + Tailwind CSS 下面是演示过程，会跳过部分节点。

root

root ─── a

root ─── a ─── a0

root ─── a ─── a0 ─── a00

                  ├── a00
root ─── a ─── a0 ─── a01

                  ├── a00
                  ├── a01
root ─── a ─── a0 ─── a02

                  ├── a00
          ├── a0 ─┼── a01
          │       └── a02
root ─── a ─── a1

                  ├── a00
          ├── a0 ─┼── a01
          │       └── a02
          │        ├── a10
root ─── a ─── a1 ──── a11

                  ├── a00
          ├── a0 ─┼── a01
          │       └── a02
          │       ├── a10
          │       ├── a11
root ─── a ─── a1 ─── a12

                  ├── a00
          ├── a0 ─┼── a01
  ├── a ──┤       └── a02
  │       │       ├── a10
  │       └── a1 ─┼── a11
  │               └── a12
root ─── b ─── b0 ─── b00

                  ├── a00
          ├── a0 ─┼── a01
  ├── a ──┤       └── a02
  │       │       ├── a10
  │       └── a1 ─┼── a11
  │               └── a12

                  ├── b00
                  ├── b01
root ─── b ─── b0 ─── b02

                  ├── a00
          ├── a0 ─┼── a01
  ├── a ──┤       └── a02
  │       │       ├── a10
  │       └── a1 ─┼── a11
  │               └── a12

                  ├── b00
          ├── b0 ─┼── b01
          │       └── b02
          │       ├── b10
          │       ├── b11
root ─── b ─── b1 ─── b12