Mind map

Parse an indented outline into nodes, coordinates, links, and SVG without image encoding.

Runs in your browserEvery computation happens in your browser — your data never leaves this device.

Outline

Mind map

Node layout and SVG

Enter an outline to see the result

What this tool does

Organize outlines
Export structure data

Example

Input

Root
  Child

Output

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

Markdown 大纲：
# Root
- Child

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">Root</text></g>
  <text x="218" y="5" font-size="12" font-weight="400" fill="#1f2937">Child</text></g>
  </g>
</svg>

Outputs a node tree and SVG.

Frequently asked questions

What input is supported?

Indent, Markdown, and mindmap formats are supported.

Can it export an image?

It outputs SVG that the page can save.

Does it use the network?

No, it is local computation.

Keywords：思维导图mind map树布局SVG

What this tool does

Example

Frequently asked questions

Related tools