Thinkmark

Edit Markdown files as XMind-style mind maps in VS Code.

The .md file stays the source of truth. Every change you make in the map (adding, renaming, moving or deleting topics, images, notes, links, layout) is written back to the Markdown as a normal VS Code edit, so undo, redo, dirty state and save all work as usual. Every change you make to the text shows up in the map right away.

Features

• Markdown in, Markdown out. Headings and lists become topics; paragraphs, code blocks and tables become topic notes. Editing a topic changes only that topic's line, and your heading levels, list markers and indentation are kept.
• Keyboard-first editing. Tab adds a subtopic, Enter adds a sibling, typing starts editing (IME friendly), arrow keys move around the map.
• Drag and drop with explicit placement: drop above, below, as a subtopic or as a new parent.
• Box selection and group actions: move, delete, copy, fold, link or tick several topics at once.
• Images inside topics: insert from a file, paste a screenshot, drop a file, resize by dragging.
• Notes, task checkboxes, links (Cmd+K) and inline formatting (bold, italic, code, links).
• Structures: mind map, logic chart (right or left) and org chart. Themes: Rainbow, Fresh, Business, Ink, Midnight, or Auto to follow VS Code's light / dark theme. Curved, elbow or straight branch lines.
• Side-by-side source: the selected topic and the cursor in the Markdown editor follow each other.
• English and Simplified Chinese interface.

Installation

Install Thinkmark from the Visual Studio Marketplace: search for "Thinkmark" in the Extensions view, or run

code --install-extension illusion77.thinkmark

Requires VS Code 1.80 or newer.

To build it from source instead:

git clone https://github.com/illusion77/thinkmark.git
cd thinkmark
npm install
npm run package
code --install-extension thinkmark-0.1.0.vsix

Usage

• Click the mind map icon in the title bar of a Markdown editor to open the map beside the text.
• Or right-click a .md file and choose Open as Mind Map, or run Thinkmark: Open as Mind Map from the Command Palette.
• Thinkmark: New Mind Map… creates a new file from a template.
• Files named *.mm.md or *.mindmap.md open as a mind map by default.
• Click Markdown in the toolbar to show the source next to the map.

Markdown format

# Design a URL Shortener

## Requirements

- Functional
  - [x] Custom aliases
  - [ ] Expiration

## High-level Design ![architecture|240](https://github.com/illusion77/thinkmark/raw/HEAD/assets/architecture.png)

## Trade-offs <!-- mindmap: left -->

Consistency vs availability for the alias namespace.

- SQL vs NoSQL

New topics follow the style of their siblings. A topic without siblings becomes a heading for the first two levels of the map and a list item below that (setting thinkmark.headingLevels).

In the mind map structure, main topics are placed on the right of the central topic. A main topic you move to the left is marked with <!-- mindmap: left -->, which Markdown previews do not show.

Structure, theme and line style chosen in the Format panel are saved in the file's front matter:

---
mindmap:
  layout: right      # map | right | left | down
  theme: fresh       # auto | rainbow | fresh | business | ink | midnight
  lineStyle: elbow   # curve | elbow | straight
---

Editing

Shortcuts are shown for macOS. On Windows and Linux, use Ctrl instead of Cmd and Alt instead of Option.

Right-click a topic, an image, a selection or the background for more commands.

Drag and drop

Drag a topic near another topic and four arrows appear around it. The highlighted arrow decides where the topic goes, and a placeholder previews the result:

Dropping onto the topic itself also makes it a subtopic. Next to the central topic, left and right choose the side of the map. Press Esc to cancel.

Images

• Image in the toolbar picks a file. Files from outside the workspace are copied into an assets folder next to the Markdown file (setting thinkmark.imageFolder).
• Paste an image from the clipboard, or drop image files onto a topic (hold Shift while dropping from the file manager).
• Click an image to select it: drag the handle to resize, press Delete to remove it from the topic, or right-click for more options. Double-click to open it.
• Removing an image from a topic leaves the file in place. Thinkmark: Clean Up Unused Images… lists the images that no Markdown, HTML or text file in the workspace refers to, and moves the ones you select to the Trash.

Links

Cmd+K opens a link field under the selected topic. Enter a URL or a file path; a domain such as example.com gets https:// added. The topic then shows a link icon, which opens the link when clicked. With several topics selected, the link is added to all of them.

Settings

Development

npm install
npm run build          # extension and webview bundles
npm run watch          # rebuild on change
npm test               # unit tests (parser, serializer, text diff)
npm run harness        # the webview in a browser with a mocked VS Code API: dev/harness.html
npm run test:vscode    # smoke test in an isolated VS Code window (macOS)
npm run package        # build thinkmark-<version>.vsix

Press F5 in VS Code to start an Extension Development Host.

Project layout:

• src/shared/markdown.ts converts between Markdown and the topic tree.
• src/mindmapEditor.ts is the custom text editor that keeps the document and the webview in sync.
• src/webview/ contains the map: layout, branch drawing, themes and interaction.

License

MIT