Plaintext Format

Pass an indentation-based outline string to data instead of a MindElixirData object.

Besides a MindElixirData object, the data prop also accepts a plaintext string. The component detects a string input and converts it to MindElixirData internally via plaintextToMindElixir, so you can author maps as a simple outline. This format is ideal for human editing, AI generation, and streaming scenarios.

Passing a string to data

Just assign the string to data. Everything else works the same as with an object.

<script lang="ts">
  import { MindMap, MindMapControls } from '$lib/components/ui/mindmap';

  // Pass a plaintext string directly — no manual parsing required.
  const plaintext = `- Mind Map
  - Topic 1
    - Subtopic 1.1
    - Subtopic 1.2
  - Topic 2`;
</script>

<div class="relative h-[500px] w-full overflow-hidden rounded-lg border">
  <MindMap data={plaintext} readonly>
    <MindMapControls />
  </MindMap>
</div>

Basic structure

Each line is a node. Indentation of 2 spaces per level defines the hierarchy, and each node line starts with - followed by a space and the topic text.

- Root Node
  - Child Node 1
    - Child Node 1-1
    - Child Node 1-2
  - Child Node 2
    - Child Node 2-1

Syntax reference

  • Node — - Topic
  • Node with ID — - Topic [^id] assigns a reference id for links
  • Inline style — - Topic {"color": "#e87a90", "fontSize": "18px"}
  • Bidirectional link — > [^id1] <-Label-> [^id2]
  • Forward link — > [^id1] >-Label-> [^id2]
  • Summary (all siblings) — } Summary text
  • Summary (last N siblings) — }:N Summary text
Link coordinates are optional. When hand-writing or generating plaintext you can omit the (x,y) offsets — Mind Elixir calculates balanced defaults automatically.

Complete example

The example rendered above is generated from this outline — copy it and use it as-is:

- Project Planning
  - Phase 1: Research [^phase1]
    - Market Analysis {"color": "#3298db"}
    - Competitor Study {"color": "#3298db"}
    - }:2 Research Summary
  - Phase 2: Development [^phase2]
    - Frontend {"color": "#2ecc71"}
    - Backend {"color": "#2ecc71"}
    - Testing {"color": "#f39c12"}
    - } Development Summary
  - Phase 3: Launch [^phase3]
    - Marketing
    - Deployment
  - > [^phase1] >-Leads to-> [^phase2]
  - > [^phase2] >-Leads to-> [^phase3]

Learn more

For the full plaintext specification and the Obsidian-style syntax, see Mind Elixir — Obsidian Plaintext.

Previous Usage Next Data Structure