Skip to content

feat(document): add interactive Markmap view #8

Description

@ryan-wong-coder

背景

Flowix 当前文档仅提供线性编辑视图。对于包含大量标题、正文、嵌套列表、表格、流程图和 AI 对话组件的长文档,用户很难快速理解整体结构,也缺少从全局视角浏览内容关系的方式。

期望能力

  • 在文档区域提供“编辑 / 导图”视图切换
  • 根据完整 Markdown 文档生成可缩放、平移、折叠的 Markmap
  • 展示标题、正文、嵌套列表、任务项、引用、表格、代码和文档属性
  • 支持 Mermaid 流程图与 AI 对话组件,并在右侧预览区渲染完整内容
  • 长文本节点保持适合阅读的宽度,最多展示两行摘要和省略号
  • 点击节点文字后在右侧展开完整内容
  • 提供适应画布、适合阅读、放大、缩小和沉浸展示操作
  • 支持快捷键 R 快速切换到适合阅读的缩放比例
  • 兼容深层嵌套和中文长文本,避免节点被挤成细长列

交互示例

导图主画布包含节点类型标签、长文本摘要、层级分支以及右侧富内容预览。

Image

验收标准

  • 编辑器与 Markmap 视图可无损切换
  • 切换前会同步尚未落盘的编辑内容
  • 长文本在导图中可读且不会完全消失
  • 点击节点可查看完整原始内容
  • Mermaid 与 AI 组件拥有对应的富预览
  • 中英文界面、深色主题和窄窗口均可正常使用

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions