Mind Map Canvas

Create and edit mind maps in Obsidian on a zoomable, draggable infinite canvas. Mind maps are stored as nested Markdown lists, so your data stays plain text and works seamlessly with the rest of your notes.

Features

• Mind map layout: Root node centered, with first-level branches expanding symmetrically to the left and right
• Infinite canvas: Scroll to zoom, drag to pan, one-click fit-to-view
• Node editing: Double-click or F2 to edit text, Tab to add a subtopic, Enter to add a sibling topic, Delete to remove
• Free dragging: Drag any node to an arbitrary position, with connectors following in real time
• Plain-text persistence: Saved as nested Markdown lists (- with tab indentation), viewable and editable directly in the editor
• Two-way sync: Open any Markdown note and render its nested lists as a mind map

Installation and build

npm install
npm run build       # production build, outputs main.js
npm run dev         # development mode, watches for file changes
npm run typecheck   # type check only

The build output is main.js. Put it together with manifest.json and styles.css into your vault's plugin folder:

<your-vault>/.obsidian/plugins/mindmap-canvas/
├── main.js
├── manifest.json
└── styles.css

Then enable Mind Map Canvas in Obsidian → Settings → Community plugins.

Requires Obsidian 1.7.2 or later.

Usage

• Click the ribbon icon, or run Open mind map / New mind map from the command palette (Ctrl/Cmd+P)
• Toolbar buttons, in order: New, Open current note, Add subtopic, Add sibling topic, Delete, Zoom in, Zoom out, Fit view, Reset layout

Keyboard shortcuts

Data format

Mind maps are stored as nested Markdown lists, for example:

- Central topic
    - Branch one
        - Subtopic A
        - Subtopic B
    - Branch two

Tech stack

• TypeScript, bundled with esbuild
• Obsidian Plugin API (ItemView, registerView)
• Native DOM + SVG rendering (no third-party runtime dependencies)

Project structure

mindmap-canvas/
├── manifest.json          # plugin metadata
├── package.json
├── tsconfig.json
├── esbuild.config.mjs     # build config
├── versions.json
├── styles.css             # styles
└── src/
    ├── main.ts            # plugin entry point
    ├── view.ts            # mind map view (ItemView)
    ├── renderer.ts        # canvas rendering and interaction
    ├── layout.ts          # tree layout algorithm
    ├── model.ts           # Markdown parsing / serialization
    └── types.ts           # type definitions

中文说明

在 Obsidian 中创建、编辑思维导图的画布插件。数据以 Markdown 嵌套列表（- + tab 缩进）保存，可在编辑器中直接查看和修改，并提供滚轮缩放、拖拽平移、一键自适应等无限画布能力。

• 用法：点击左侧功能区图标，或执行命令面板中的「打开思维导图」/「新建思维导图」
• 快捷键：Tab 添加子主题，Enter 添加同级主题，Delete 删除节点，F2/双击 编辑文字
• 构建：npm install 后执行 npm run build，将产物放入 <库>/.obsidian/plugins/mindmap-canvas/
• 要求 Obsidian 1.7.2 及以上

License

MIT