跳到主内容
UniKit

思维导图

将缩进大纲解析为节点树,计算坐标、连线和 SVG,不依赖图像编码。

浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。

大纲

思维导图

节点布局与 SVG

输入大纲后即可看到结果

这个工具能做什么

  • 整理大纲
  • 导出结构数据

示例

输入

根
  子

输出

思维导图:2 个节点 · 深度 2 层 · 叶子 1 个
布局:节点宽 160px · 行距 38px · 层距 48px · 画布 392 × 50px
算法:同层按后序顺序自上而下排列,父节点取首末子节点的中点;连线为三次贝塞尔(父右中点 → 子左中点)。

Markdown 大纲:
# 根
- 子

SVG 源码:
<svg xmlns="http://www.w3.org/2000/svg" width="392" height="50" viewBox="0 0 392 50" role="img">
  <g font-family="system-ui, -apple-system, sans-serif">
  <path d="M 176 0 C 192 0 192 0 208 0" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-opacity="0.7" />
  <g><rect x="0" y="-15" width="176" height="30" rx="6" fill="#4d6bfe" fill-opacity="0.95" stroke="#4d6bfe" stroke-width="1" />
  <g><rect x="208" y="-15" width="160" height="30" rx="6" fill="#f59e0b" fill-opacity="0.16" stroke="#f59e0b" stroke-width="1" />
  <text x="10" y="5" font-size="14" font-weight="700" fill="#ffffff">根</text></g>
  <text x="218" y="5" font-size="12" font-weight="400" fill="#1f2937">子</text></g>
  </g>
</svg>

输出节点树与 SVG。

常见问题

支持什么输入?

支持缩进、Markdown 和 mindmap 格式。

能导出图片吗?

输出 SVG,可由页面保存。

会联网吗?

不会,纯本地计算。

关键词:思维导图mind map树布局SVG

同类工具