思维导图
将缩进大纲解析为节点树,计算坐标、连线和 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