Markdown 思维导图 - 粘贴即渲染、可折叠可导出 SVG

左边写 Markdown、右边实时渲染成可交互的思维导图，支持缩放、折叠、导出 SVG 与 PNG，全部在浏览器本地完成。

Markdown 思维导图 - 粘贴即渲染、可折叠可导出 SVG是什么

把一份 Markdown 大纲直接变成可交互的思维导图：左边写，右边实时画出来，中间不用点任何按钮。标题层级就是分支层级，# 是中心主题、## 是第一层分支、- 是叶子，写完立刻能看出结构哪里不平衡。导图支持滚轮缩放、拖拽平移、点节点折叠，还能导出成 SVG 或 PNG 拿去放进文档。全部渲染在浏览器本地完成，内容不上传服务器。

所有计算都在你的浏览器本地完成，输入的内容不会上传到服务器。

怎么用Markdown 思维导图 - 粘贴即渲染、可折叠可导出 SVG

在左边输入框写 Markdown。用 # 写中心主题、## 写分支、- 写叶子要点，缩进多一级就多一层分支
右边会实时渲染，不需要点确认；连续打字时会稍微合并一下再重绘，避免每敲一个字符都重排整棵树
点击节点旁边的小圆点可以折叠或展开那个分支，适合大纲很长时先收起不关心的部分
工具栏的「适应窗口」把整张图缩放到刚好放得下，「只留两层」先收起到主干，讲给别人听时更好控制节奏
滚轮缩放、按住拖拽平移；缩放后想回到全貌点一下「适应窗口」即可
导出 SVG 得到矢量图，可以无限放大不失真，也能直接拖进 Figma、Illustrator 或放进 Word；导出 PNG 适合贴到聊天窗口

示例

输入

# 项目计划
## 目标
- 一句话说清要做什么
## 风险
- 依赖第三方接口

输出

中心节点「项目计划」向右分出「目标」「风险」两条分支，各挂一个叶子节点

层级就是缩进关系，改结构只需要调整 # 的数量。

常见问题

和常见的思维导图软件有什么区别？

它的输入是纯文本 Markdown，不是鼠标拖拽的节点。好处是可以直接复用你已有的笔记、大纲、代码注释，改结构靠改缩进，不用一个个拖动节点；代价是无法自由摆放位置，布局完全自动。

导出的 SVG 里字体变了怎么办？

SVG 只记录字体名称，不嵌入字体文件。如果打开导出的文件的机器上没有同一款字体，浏览器会用自己的默认字体替代。要保证完全一致，导出 PNG 更稳妥。

能做多张图吗？

一次一张。需要多张时分别导出，或者在一份 Markdown 里用多个一级标题——但那样它们会变成同一张图里的并列主干，不是独立的两张图。

内容会上传吗？

不会。解析和渲染都由浏览器里的 JavaScript 完成，没有网络请求；断网状态下这个页面照样能用。

小提示

导出的 SVG 已经内联了样式，双击就能在浏览器里打开，不需要依赖本站也看不出差别
Markdown 的层级跳跃不会报错但会打乱结构：从 # 直接跳到 ### 会导致中间缺一层，建议逐级递进
一张图超过四层就很难读。真正需要四层以上时，通常是该拆成两张图了
节点文字太长会把整张图撑得很宽。把一句话压到十几个字以内，细节放到叶子节点里
支持 Markdown 的行内语法（加粗、行内代码、链接），但不支持图片和多行表格——思维导图里塞表格会直接排版崩掉

Markdown 思维导图 - 粘贴即渲染、可折叠可导出 SVG