rehype-mind-elixir

[zakarialaoui10]

Rehype Mind Elixir: Interactive Mind Maps in Markdown

I'm the author of ZikoJS, and I've been building tools around the ZikoJS ecosystem to make interactive content easier to create and embed.

Today I want to introduce rehype-mind-elixir, a Rehype plugin that brings interactive Mind Elixir mind maps directly into Markdown.

The idea is simple: instead of writing JavaScript to create a mind map, you can describe it directly in your Markdown using a mind-elixir fenced code block.

For example:

```mind-elixir
height : 300px
width : 600px
direction : 0
---
- ZikoJS Architecture
  - Core UI Engine
    - UIElement
    - Hooks
    - Hyperscript
  - Ecosystem
    - Three.js
    - Chart.js
    - Mind Elixir
```

The section before --- is optional YAML configuration, while the section after --- contains the actual mind-map data.

The mind-map body can be written using plain text, JSON, or JSON-like syntax.

For example, the same map can be represented using JSON:

```mind-elixir
{
  "topic": "ZikoJS Architecture",
  "children": [
    {
      "topic": "Core UI Engine",
      "children": [
        { "topic": "UIElement" },
        { "topic": "Hooks" },
        { "topic": "Hyperscript" }
      ]
    },
    {
      "topic": "Ecosystem",
      "children": [
        { "topic": "Three.js" },
        { "topic": "Chart.js" },
        { "topic": "Mind Elixir" }
      ]
    }
  ]
}
```

The plugin transforms these code blocks into interactive Mind Elixir mind maps during the Rehype processing pipeline.

It supports:

• Plain text for concise, tree-oriented mind maps
• JSON for structured Mind Elixir data
• JSON-like syntax for a more JavaScript-friendly format
• YAML configuration for options such as height, width, and direction
• Mind Elixir node properties such as tags, children, links, styles, icons, and other node configuration

Because it is a Rehype plugin, it isn't tied to a specific framework. It can be integrated into Astro, Next.js/MDX, Gatsby, or directly into a Unified pipeline.

The result is a simple workflow:

Markdown → Rehype → Mind Elixir → Interactive Mind Map

This makes mind maps feel like another Markdown content primitive, alongside code blocks, diagrams, and other embedded content.

I'm particularly interested in this approach for documentation, technical articles, tutorials, knowledge bases, and interactive notes, where the structure of the content can be represented visually without leaving Markdown.

rehype-mind-elixir, write the mind map in Markdown, render it interactively.

If you find this project useful or interesting, consider giving a ⭐ to the technologies that make it possible:

• ZikoJS : the declarative JavaScript ecosystem behind the project
• @zikojs/mind-elixir : the ZikoJS integration for Mind Elixir

Use Case: Astro

Configuration

// @ts-check
import { defineConfig } from 'astro/config';
import { unified } from 'unified';
import rehypeMindElixir from 'rehype-mind-elixir';

// ...

export default defineConfig({
  markdown: {
    processor: unified({
      rehypePlugins: [
        rehypeMindElixir,
      ],
    }),
  },
});

Then you can use mind maps directly in your Astro Markdown or MDX pages:

```mind-elixir
height : 300px
width : 600px
direction : 0
---
- Astro
  - Markdown
  - MDX
  - Rehype
    - rehype-mind-elixir
  - Mind Elixir
```

The Markdown is processed by Astro, converted to HAST, and then rehype-mind-elixir detects the mind-elixir code block and replaces it with an interactive Mind Elixir map.

[SSShooter]

Thanks for sharing this! It’s a great idea and a really cool integration for the ecosystem.

One suggestion regarding the data format: you might want to check out Mind Elixir Plaintext. It's designed to be much more concise and natural for human writing/editing inside Markdown files, which could make writing mind maps in fenced code blocks even easier.

Thanks again for building this!

[zakarialaoui10]

Thanks for sharing this! It’s a great idea and a really cool integration for the ecosystem.

One suggestion regarding the data format: you might want to check out Mind Elixir Plaintext. It's designed to be much more concise and natural for human writing/editing inside Markdown files, which could make writing mind maps in fenced code blocks even easier.

Thanks again for building this!

For now, it supports JSON, JSON-like, and YAML. JSON is supported because users may want to export their mind map/tree directly as JSON and use it in Markdown.

I’m also working on supporting the Plaintext syntax. It’s not stable yet and doesn’t support all the features, but I’m actively implementing it.

[zakarialaoui10]

@SSShooter,
I've added it to @zikojs/mind-elixir:

https://github.com/zikojs/addons/blob/main/packages/mind-elixir/src/mind/node.js#L45

It now supports the Mind Elixir plaintext syntax:

import {
  MindMap,
  MindNode,
  plainTextToMindNodes
} from "@zikojs/mind-elixir";

const map4 = MindMap({
  height: "400px",
  data: plainTextToMindNodes(`
- Root
  - Node A [^id1]
  - Node B [^id2]
  - > [^id1] <-Link Label-> [^id2]
  `),
});

map4.mount(document.body);

@zikojs/mind-elixir is a zikojs declarative wrapper for mind elixir

I've adopted the plaintext parser there, and I'll now sync the support with rehype-mind-elixir.

[zakarialaoui10]

@SSShooter , Plain Text is fully supported now :

[zakarialaoui10]

https://zikojs-rehype-plugins.vercel.app/guides/mind-elixir/