### Quick Start with markmap-cli

Source: https://markmap.js.org/docs/markmap/packages--markmap-cli

A quick example demonstrating how to generate a markmap from a Markdown file using `npx markmap-cli`. This command takes a Markdown file as input and produces an HTML markmap, providing a fast way to visualize your Markdown content.

```Shell
$ npx markmap-cli markmap.md
```

--------------------------------

### Quick Start HTML Integration for markmap-autoloader

Source: https://markmap.js.org/docs/markmap/packages--markmap-autoloader

This snippet demonstrates the basic setup for `markmap-autoloader` in an HTML page. It includes defining global styles for markmaps, embedding Markdown source within a `.markmap` div using a script template, and loading the `markmap-autoloader` script from a CDN.

```html
<!-- Set global styles -->
<style>
	.markmap {
		position: relative;
	}
	.markmap > svg {
		width: 100%;
		height: 300px;
	}
</style>

<!-- Wrap Markdown source in `.markmap` elements -->
<div class="markmap">
	<script type="text/template">
		- markmap
		  - autoloader
		  - transformer
		  - view
	</script>
</div>

<!-- Load markmap -->
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
```

--------------------------------

### Install markmap-cli Globally

Source: https://markmap.js.org/docs/markmap/packages--markmap-cli

Instructions for installing the markmap-cli tool globally on your system. This allows you to run the `markmap` command directly from any terminal location. You can choose between `yarn` or `npm` package managers for the installation.

```Shell
$ yarn global add markmap-cli
# or
$ npm install -g markmap-cli
```

--------------------------------

### Install markmap-toolbar via npm

Source: https://markmap.js.org/docs/markmap/packages--markmap-toolbar

This snippet provides the command to install the `markmap-toolbar` package using npm, the standard package manager for Node.js. This is the first step to include the library in your project.

```bash
$ npm install markmap-toolbar
```

--------------------------------

### Install markmap-view via npm

Source: https://markmap.js.org/docs/markmap/packages--markmap-view

Instructions to install the markmap-view package using the npm package manager.

```shell
npm install markmap-view
```

--------------------------------

### Install markmap-render via npm

Source: https://markmap.js.org/docs/markmap/packages--markmap-render

Command to install the markmap-render package using the Node Package Manager (npm). This makes the library available for use in your project.

```Shell
$ npm install markmap-render
```

--------------------------------

### Use markmap-cli with npx

Source: https://markmap.js.org/docs/markmap/packages--markmap-cli

Demonstrates how to execute markmap-cli without a global installation using `npx`. This method is convenient for one-off uses or when you prefer not to install packages globally, as `npx` will download and run the package temporarily.

```Shell
$ npx markmap-cli
```

--------------------------------

### Install markmap-lib via npm

Source: https://markmap.js.org/docs/markmap/packages--markmap-lib

Instructions to install the markmap-lib package using npm, the Node.js package manager. This command adds the library to your project's dependencies.

```Shell
$ npm install markmap-lib
```

--------------------------------

### Configure markmap-autoloader with Global Options

Source: https://markmap.js.org/docs/markmap/packages--markmap-autoloader

This example shows how to customize `markmap-autoloader` behavior by setting `window.markmap.autoLoader` before the main script loads. It demonstrates enabling the toolbar feature using `AutoLoaderOptions`.

```javascript
<script>
	window.markmap = {
		/** @type AutoLoaderOptions */
		autoLoader: {
			toolbar: true, // Enable toolbar
		},
	};
</script>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
```

--------------------------------

### Install coc-markmap Plugin

Source: https://markmap.js.org/docs/markmap/packages--coc-markmap

Installs the coc-markmap plugin using coc.nvim's built-in CocInstall command. This command should be executed within a Vim or Neovim session where coc.nvim is active.

```Vim
:CocInstall coc-markmap
```

--------------------------------

### Import Transformer without built-in plugins

Source: https://markmap.js.org/docs/markmap/packages--markmap-lib

Illustrates importing the Transformer class from 'markmap-lib/no-plugins' for scenarios where built-in plugins are not desired. This allows for a more lightweight setup or explicit inclusion of specific plugins like 'pluginFrontmatter'.

```JavaScript
import { Transformer } from 'markmap-lib/no-plugins';
import { pluginFrontmatter } from 'markmap-lib/plugins';

// No plugin at all
const transformer = new Transformer();

// With specified plugins
const transformer = new Transformer([pluginFrontmatter]);
```

--------------------------------

### Create SVG container for markmap

Source: https://markmap.js.org/docs/markmap/packages--markmap-view

Example HTML snippet to define an SVG element with specific width and height, which will serve as the rendering target for the markmap visualization.

```html
<svg id="markmap" style="width: 800px; height: 800px"></svg>
```

--------------------------------

### Derive low-level options from JSON options

Source: https://markmap.js.org/docs/markmap/packages--markmap-view

Example of converting portable JSON options into the low-level Markmap options object using the `deriveOptions` utility function from `markmap-view`.

```javascript
import { deriveOptions } from 'markmap-view';

const options = deriveOptions(jsonOptions);
```

--------------------------------

### Applying Magic Comments for Node Folding in Markmap

Source: https://markmap.js.org/docs/markmap/magic-comments

This Markdown example demonstrates how to embed `markmap:` magic comments within headings and list items to control their initial folded state. The `foldAll` action collapses a node and all its descendants, while `fold` collapses only the current node.

```markdown
## heading 1

- item 1 <!-- markmap: foldAll -->
  - item 1.1
    - item 1.1.1
  - item 1.2
    - item 1.2.1
- item 2

## heading 2 <!-- markmap: fold -->

- item 3
  - item 3.1
- item 4
  - item 4.1
```

--------------------------------

### Render a markmap instance

Source: https://markmap.js.org/docs/markmap/packages--markmap-view

Steps to initialize and render a markmap. This involves loading necessary CSS and JavaScript assets dynamically, and then creating a Markmap instance using `Markmap.create` with an SVG selector, optional configuration, and transformed data.

```javascript
// 1. load assets
if (styles) loadCSS(styles);
if (scripts) {
	loadJS(scripts, {
		// For plugins to access the `markmap` module
		getMarkmap: () => markmap,
	});
}

// 2. create markmap
// `options` is optional, i.e. `undefined` can be passed here
Markmap.create('#markmap', options, root); // -> returns a Markmap instance
```

--------------------------------

### Markmap.create API Reference

Source: https://markmap.js.org/docs/markmap/packages--markmap-view

Documentation for the `Markmap.create` method, including its parameters and return type, and details about the `options` parameter's type (`IMarkmapOptions`) and portability considerations.

```APIDOC
Markmap.create(container: string | SVGElement, options?: IMarkmapOptions, root?: any): MarkmapInstance
  container: A CSS selector string or an SVG DOM element where the markmap will be rendered.
  options: Optional configuration object of type IMarkmapOptions. It is a low-level object with functions and is not portable. Consider using JSON options with deriveOptions for portability.
  root: The transformed data root node from markmap-lib.
Returns: A Markmap instance.
```

--------------------------------

### Create and Attach Toolbar to Markmap Instance

Source: https://markmap.js.org/docs/markmap/packages--markmap-toolbar

This snippet demonstrates the process of instantiating a new toolbar using `Toolbar.create(mm)`, where `mm` is an existing markmap instance. It then shows how to apply basic CSS styling to position the toolbar absolutely and append its DOM element (`el`) to a specified container, integrating it visually with the markmap.

```javascript
const { el } = Toolbar.create(mm);
el.style.position = 'absolute';
el.style.bottom = '0.5rem';
el.style.right = '0.5rem';

// `container` could be the element that contains both the markmap and the toolbar
container.append(el);
```

--------------------------------

### markmap-cli Command-Line Interface Reference

Source: https://markmap.js.org/docs/markmap/packages--markmap-cli

Detailed documentation for the `markmap` command-line tool, outlining its general usage pattern and all available options. This section describes how to specify input files, control output behavior, and enable features like offline mode or watch mode.

```APIDOC
Usage: markmap [options] <input>

Create a markmap from a Markdown input file

Options:
  -V, --version          output the version number
  --no-open              do not open the output file after generation
  --no-toolbar           do not show toolbar
  -o, --output <output>  specify filename of the output HTML
  --offline              Inline all assets to allow the generated HTML to work offline
  -w, --watch            watch the input file and update output on the fly, note that this feature is for development only
  -h, --help             display help for command
```

--------------------------------

### markmap-autoloader API Entry Point

Source: https://markmap.js.org/docs/markmap/packages--markmap-autoloader

This section documents the primary access point for the `markmap-autoloader` module after it has been loaded. It specifies how the module can be accessed globally and refers to the comprehensive external API documentation for detailed methods and properties.

```APIDOC
window.markmap.autoLoader:
  Description: The main module for markmap-autoloader.
  Access: Accessible globally via `window.markmap.autoLoader` after the package is loaded.
  Purpose: Provides methods and properties for controlling markmap auto-loading and rendering.
  Reference: For detailed methods and properties, refer to the official API documentation at https://markmap.js.org/api/modules/markmap-autoloader.html
```

--------------------------------

### Import Transformer with built-in plugins

Source: https://markmap.js.org/docs/markmap/packages--markmap-lib

Demonstrates how to import the Transformer class along with built-in plugins from 'markmap-lib'. It shows instantiation with default plugins and how to extend with additional custom plugins for advanced use cases.

```JavaScript
import { Transformer, builtInPlugins } from 'markmap-lib';

// With default plugins
const transformer = new Transformer();

// With additional plugins
const transformer = new Transformer([...builtInPlugins, myPlugin]);
```

--------------------------------

### markmap-render.fillTemplate Function API

Source: https://markmap.js.org/docs/markmap/packages--markmap-render

API documentation for the `fillTemplate` function within markmap-render, detailing its parameters and the structure of the optional `extra` object for advanced configuration.

```APIDOC
fillTemplate(root, assets, extra)
  root: Markmap data root node (e.g., from markmap-lib)
  assets: Assets object (e.g., containing CSS/JS URLs)
  extra: Optional object for customization
    jsonOptions: Configuration options for JSON data, see JSON Options
    urlBuilder: A custom UrlBuilder instance to construct URLs for assets
```

--------------------------------

### Create Markmap from Markdown

Source: https://markmap.js.org/docs/markmap/packages--coc-markmap

Executes the markmap.create command in Vim/Neovim to generate an HTML file containing the mindmap visualization of the current Markdown file. The generated HTML file will automatically open in your default web browser.

```Vim
:CocCommand markmap.create
```

--------------------------------

### Load markmap-view from CDN

Source: https://markmap.js.org/docs/markmap/packages--markmap-view

Instructions to include markmap-view and its dependency D3 from a Content Delivery Network (CDN) in an HTML file, suitable for browser environments.

```html
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
```

--------------------------------

### Markmap JSON Configuration Options Reference

Source: https://markmap.js.org/docs/markmap/json-options

Comprehensive reference for all available Markmap JSON options, detailing their types, default values, and purpose. These options control various aspects of the Markmap visualization, such as colors, animation, layout, and external resource loading.

```APIDOC
color:
  Type: string | string[]
  Default: d3.schemeCategory10
  Description: A list of colors to use as the branch and circle colors for each node. If none is provided, d3.schemeCategory10 will be used.
colorFreezeLevel:
  Type: number
  Default: 0
  Description: Freeze color at the specified level of branches, i.e. all child branches will use the color of their ancestor node at the freeze level. `0` for no freezing at all.
duration:
  Type: number
  Default: 500
  Description: The animation duration when folding/unfolding a node.
maxWidth:
  Type: number
  Default: 0
  Description: The max width of each node content. `0` for no limit.
initialExpandLevel:
  Type: number
  Default: -1
  Description: The maximum level of nodes to expand on initial render. `-1` for expanding all levels.
extraJs:
  Type: string[]
  Default: none
  Description: A list of JavaScript URLs. This is useful to add more features like Katex plugins. If a URL starts with `npm:`, it's treated as an npm package and resolved to a URL of the selected CDN based on the current network conditions.
extraCss:
  Type: string[]
  Default: none
  Description: A list of CSS URLs. This is useful to add more features like Katex plugins. If a URL starts with `npm:`, it's treated as an npm package and resolved to a URL of the selected CDN based on the current network conditions.
zoom:
  Type: boolean
  Default: true
  Description: Whether to allow zooming the markmap.
pan:
  Type: boolean
  Default: true
  Description: Whether to allow panning the markmap.
htmlParser:
  Type: { selector: string }
  Description: Pass options to the internal HTML parser, for example to override the default selectors for elements to display.
spacingHorizontal:
  Type: number
  Default: 80
spacingVertical:
  Type: number
  Default: 5
activeNode:
  Type: { placement: 'center' | 'visible' }
  Default: { placement: 'visible' }
  Description: Only available in markmap.js.org and gera2ld.markmap-vscode.
  Properties:
    placement:
      Description: `visible` - ensure the active node is in the viewport; `center` - center the active node.
lineWidth:
  Type: number
  Since: v0.18.8
  Description: The stroke width of lines between nodes.
```

--------------------------------

### Load markmap-lib from CDN

Source: https://markmap.js.org/docs/markmap/packages--markmap-lib

Instructions to include markmap-lib in a web page by loading it directly from a Content Delivery Network (CDN). This method allows access to the library's functionalities, such as the Transformer class, via the global window object.

```HTML
<script src="https://cdn.jsdelivr.net/npm/markmap-lib"></script>
<script>
	const { Transformer } = window.markmap;
</script>
```

--------------------------------

### Generate interactive HTML with markmap-render

Source: https://markmap.js.org/docs/markmap/packages--markmap-render

Demonstrates how to import the `fillTemplate` function from markmap-render and use it to generate an HTML string. It takes Markmap root data, assets, and an optional `extra` object for customization.

```JavaScript
import { fillTemplate } from 'markmap-render';

const html = fillTemplate(root, assets, extra);
```

--------------------------------

### Import Toolbar Class in JavaScript

Source: https://markmap.js.org/docs/markmap/packages--markmap-toolbar

This snippet illustrates two common methods for importing the `Toolbar` class into a JavaScript application. It shows how to access it from the global `window.markmap` object when loaded via a <script> tag, and how to import it as an ES module for modern JavaScript environments.

```javascript
// load with <script>
const { markmap } = window;
const { Toolbar } = markmap;

// or as ESM
import { Toolbar } from 'markmap-toolbar';
```

--------------------------------

### Import markmap-view module

Source: https://markmap.js.org/docs/markmap/packages--markmap-view

Demonstrates two common ways to import the markmap-view module in a JavaScript environment: via a global script tag (for browser environments) or as an ES module import (for modern JavaScript projects).

```javascript
// load with <script>
const { markmap } = window;
const { Markmap, loadCSS, loadJS } = markmap;

// or as ESM
import * as markmap from 'markmap-view';
import { Markmap, loadCSS, loadJS } = markmap;
```

--------------------------------

### Transform Markdown to markmap data

Source: https://markmap.js.org/docs/markmap/packages--markmap-lib

Shows the core process of transforming Markdown content into markmap data using the `transformer.transform()` method, which returns the root node and active features. It also demonstrates how to retrieve assets required by used features or all possible assets for rendering.

```JavaScript
// 1. transform Markdown
const { root, features } = transformer.transform(markdown);

// 2. get assets
// either get assets required by used features
const assets = transformer.getUsedAssets(features);

// or get all possible assets that could be used later
const assets = transformer.getAssets();
```

--------------------------------

### Render markmap with direct SVG element

Source: https://markmap.js.org/docs/markmap/packages--markmap-view

An alternative method to create a Markmap instance by directly passing an SVG DOM element reference instead of a selector string to `Markmap.create`.

```javascript
const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data); // -> returns a Markmap instance
```

--------------------------------

### Set Default Markmap Options in VSCode Settings

Source: https://markmap.js.org/docs/markmap/json-options

Illustrates how to define global default Markmap options within a VSCode settings JSON file. This approach provides consistent visualization settings across all Markmap files without requiring repetitive frontmatter modifications.

```JSON
{
	"color": ["blue"]
}

```

--------------------------------

### Manually Trigger markmap-autoloader Rendering

Source: https://markmap.js.org/docs/markmap/packages--markmap-autoloader

This snippet illustrates how to prevent automatic rendering and manually trigger `markmap.autoLoader.renderAll()` after the script has loaded. It sets `manual: true` in the `autoLoader` options and then calls the rendering function after a delay, useful for deferred rendering or specific event-driven scenarios.

```javascript
<script>
	window.markmap = {
		autoLoader: { manual: true },
	};
</script>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
<script>
	// Render in 5s
	setTimeout(() => {
		markmap.autoLoader.renderAll();
	}, 5000);
</script>
```

--------------------------------

### Render Markmap to PNG Image using Node.js

Source: https://markmap.js.org/docs/markmap/guide--use-with-nodejs

This TypeScript code snippet defines an asynchronous function `renderMarkmap` that converts Markdown content into a Markmap diagram and then renders it as a PNG image. It utilizes `markmap-lib` for transformation, `markmap-render` for HTML templating, and `node-html-to-image` (which uses Puppeteer) for the actual image generation. The resulting image is saved to a specified output file. Note that Puppeteer can be memory-intensive.

```TypeScript
import { Transformer } from 'markmap-lib';
import { fillTemplate } from 'markmap-render';
import nodeHtmlToImage from 'node-html-to-image';
import { writeFile } from 'node:fs/promises';

async function renderMarkmap(markdown: string, outFile: string) {
	const transformer = new Transformer();
	const { root, features } = transformer.transform(markdown);
	const assets = transformer.getUsedAssets(features);
	const html =
		fillTemplate(root, assets, {
			jsonOptions: {
				duration: 0,
				maxInitialScale: 5,
			},
		}) +
		`
<style>
body,
#mindmap {
  width: 2400px;
  height: 1800px;
}
</style>
`;
	const image = await nodeHtmlToImage({
		html,
	});
	await writeFile(outFile, image);
}

renderMarkmap(markdown, 'markmap.png');
```

--------------------------------

### Configure Markmap Options in Markdown Frontmatter

Source: https://markmap.js.org/docs/markmap/json-options

Demonstrates how to embed Markmap JSON options directly into a Markdown file's frontmatter using YAML syntax. This allows per-file customization of visualization properties, such as defining a specific color palette for the mind map.

```YAML
---
markmap:
  color:
    - blue
  # other options
---

Markdown content here

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.