Transform any text outline into a visual, interactive mind map to simplify complex ideas, like a game — no coding required.

holgerhubbs

Outline to Mind Map lets you turn a plain text outline into a fully interactive, zoomable mind map — right inside your WordPress content.
I love mind maps and hope that this plugin will serve you well. I discovered <a href="https://markmap.js.org/" rel="nofollow ugc">Markmap.js</a> and asked Claude.ai to help me build a plugin around it. It takes a universe to make a sandwich; structure supports spontaneity.
How it works:
Write a Markdown-style outline between the shortcode tags and the plugin renders it into a smooth, animated SVG mind map — with clickable nodes, zoom, and pan.
<pre><code>[outline-to-mind-map]
# My Topic
## Branch One
### Leaf
## Branch Two
[/outline-to-mind-map]
</code></pre>
Features:
<ul>
<li>Simple shortcode — works in any post, page, or widget</li>
<li>Interactive: zoom, pan, and click nodes to fold/unfold</li>
<li>Configurable fold depth, dimensions, and color schemes</li>
<li>Five built-in color palettes: Default, Cool, Warm, Forest, Mono</li>
<li>Output caching via WordPress transients (Redis/Memcached compatible)</li>
<li>Settings page with full parameter reference</li>
<li>Dark mode aware</li>
<li>No account or API key required</li>
<li>Powered by the open-source <a href="https://markmap.js.org/" rel="nofollow ugc">Markmap.js</a> library</li>
</ul>
<h3>Usage</h3>
Basic example:
<pre><code>[outline-to-mind-map]
# My Project
## Planning
### Goals
### Timeline
## Execution
### Development
### Testing
[/outline-to-mind-map]
</code></pre>
With options:
<pre><code>[outline-to-mind-map fold="2" color_scheme="forest" height="600px"]
# My Topic
## Branch A
## Branch B
[/outline-to-mind-map]<h3>Shortcode Parameters</h3>
</code></pre>
* fold — Initial fold depth: <code>none</code> (fully expanded), <code>all</code> (root only), or <code>1</code>–<code>3</code>. Default: <code>none</code> 
* width — Container width, any CSS value. Default: <code>100%</code> 
* height — Container height, any CSS value. Default: <code>500px</code> 
* color_scheme — Branch palette: <code>default</code>, <code>cool</code>, <code>warm</code>, <code>forest</code>, <code>mono</code>. Default: <code>default</code> 
* zoom — Enable mouse-wheel zoom: <code>true</code> or <code>false</code>. Default: <code>true</code> 
* pan — Enable drag-to-pan: <code>true</code> or <code>false</code>. Default: <code>true</code> 
* cache — Cache this instance: <code>true</code> or <code>false</code>. Default: <code>true</code>
All parameters can be set globally at Settings → Outline to Mind Map and overridden per shortcode.

Alternatives to Outline to Mind Map

Top alternatives