Mindmap NextGen

You can view your notes as mindmaps using two primary methods:

1. Command Palette: Open the command palette (Cmd/Ctrl+P) and search for the Mindmap NextGen commands to open a mindmap view.
2. Inline Markmaps: Insert a mindmap directly into your document using a Markdown code block tagged with markmap.

Pinned vs. Unpinned Mindmaps:

• Pinned: Linked to a single specific Markdown document.
• Unpinned: Dynamically updates to show the mindmap for whichever document you last clicked on.

# Mindmap
## Mindmap

Mindmap NextGen supports several advanced Markdown features:

• Checkboxes: Standard Markdown checkboxes (- [ ] and - [x]) are rendered in the mindmap. This also works within document titles.
• LaTeX: Render mathematical expressions using dollar signs. Use single $ for inline expressions and double $$ for multiline blocks.
• Syntax Highlighting: Uses highlightjs. To use custom themes, download a highlightjs compatible CSS file, place it in your Obsidian Snippets folder, and enable it via Settings > Appearance.

# Housework
## Main
- [x] Dishes
- [ ] Cleaning the bathroom

$\frac{\partial f}{\partial t}$

The "More options" menu is located in the top right of each mindmap tab and provides the following actions:

• Pin/Unpin: Toggle whether the mindmap is locked to the current document or follows your navigation.
• Copy screenshot: Copies a PNG of the current mindmap to your clipboard. Colors for the background and text can be configured in plugin settings or document frontmatter.
• Collapse all: Immediately closes all nodes, leaving only the root node visible.
• Toggle toolbar: Shows or hides the toolbar located in the bottom right of the mindmap.

Global settings can be adjusted in the Obsidian plugin settings menu:

• Coloring approaches:
  • Branch coloring: Assigns random colors per branch. Use Color freeze level to stop color changes at a specific depth.
  • Depth coloring: Colors branches based on their depth. You can define colors for the first three levels and a default for deeper levels.
  • Single color: All branches use the same color.
• Line thickness: Set specific thicknesses for the first three depth levels and a default for deeper levels.
• Highlight inline markmaps: Toggle background highlighting for inline code blocks.
• Use title as root node: Automatically uses the document title as the root of the mindmap.
• Markmap settings: Fine-tune the shape and size of various mindmap components.

Document frontmatter can override global plugin settings. The plugin accepts most Markmap JSON options (excluding extraJs and extraCss).

Available Frontmatter Keys:

• markmap.highlight: (boolean) Adds a background to inline markmaps to make them stand out.
• markmap.titleAsRootNode: (boolean) Uses the document title as the root node to avoid repetition.
• markmap.screenshotTextColor: Sets the text color for screenshots.
• markmap.screenshotBgColor: Sets the background color for screenshots.

Example:

---
markmap:
  screenshotTextColor: #28F48D
  highlight: true
  titleAsRootNode: true
---

The plugin registers a Markdown code block processor using the markmap identifier. When you create a code block with markmap in an Obsidian note, the plugin will process the markdown content within that block to render a mindmap.

Example usage in an Obsidian note:

# Root
## Branch 1
## Branch 2

You can customize individual nodes using inline HTML comments with CSS-style declarations.

Supported Parameters:

Example:

# Project <!-- nodeColor: #663366 -->
## Risks <!-- bgColor: red; color: white; fold: this -->
- Item one

# Project <!-- nodeColor: #663366 -->
## Risks <!-- bgColor: red; color: white; fold: this -->
- Item one
- Item two
## Goals <!-- nodeColor: #2e86de; fold: tree -->
### Short term
### Long term

The splitMarkdown<Type>(type, markdown) function allows you to separate the actual content body from the configuration settings defined in Markdown.

• type: Must be either 'file' (for frontmatter in a file) or 'codeBlock' (for settings inside a code block).
• Returns an object containing the body (the Markdown content) and settings (the parsed YAML configuration).

Settings are extracted from the markmap key within the YAML block.

// For a code block
const { body, settings } = splitMarkdown('codeBlock', markdownContent);

// For a file with frontmatter
const { body, settings } = splitMarkdown('file', fileContent);

You can react to changes in the global settings by listening to the settingChanges event emitter. This is useful for updating UI components or re-rendering views when a user modifies a setting.

Use settingChanges.listen(key, callback) where key is a key of GlobalSettings.

import { settingChanges } from 'src/settings/filesystem';

settingChanges.listen('animationDuration', (newValue) => {
  console.log(`Animation duration changed to: ${newValue}`);
});

The getOptions(settings: CodeBlockSettings) function converts project-specific CodeBlockSettings into the standard IMarkmapOptions format used by the markmap-view library.

It handles complex logic for:

• Coloring modes: Supports branch, depth, and single coloring strategies.
• Animation: Maps animationDuration to duration.
• Layout: Passes through properties like initialExpandLevel, maxWidth, nodeMinHeight, paddingX, spacingVertical, and spacingHorizontal.
• Coloring Logic:
  • branch: Uses branch-based coloring.
  • depth: Uses depth1Color, depth2Color, and depth3Color for the first three levels, falling back to defaultColor.
  • single: Uses defaultColor.

// settings is an object of type CodeBlockSettings
const markmapOptions = getOptions(settings);

Because settings are loaded asynchronously from the filesystem, you should use the settingsLoaded promise to ensure the globalSettings object is fully initialized before attempting to access it.

import { settingsLoaded, globalSettings } from 'src/settings/filesystem';

async function init() {
  await settingsLoaded;
  console.log('Current split direction:', globalSettings.splitDirection);
}