v0.9.0 · Open Source

The AI-Native
Mindmap for React.

Transform complex mental models into structured visual systems with natural language. Open source, extensible, and built for the modern web.

$npm install @xiangfa/mindmap
Start Building View Demo
Open MindMapv0.9 runtime

Prompts are sent to the public Open MindMap AI endpoint. Attachments are not sent.

Open MindMapGetting StartedInstallationnpm install @xiangfa/mindmapQuick SetupConfigurationCore Features✓Markdown Syntax✓Real-time Rendering-AI GenerationExtension SystemIntegrationsReactTypeScriptAstroUse CasesProject PlanningKnowledge BaseBrainstorming
Core Engine

Real-time AI Streaming.

Append Markdown as it arrives. The v0.9 controller publishes immutable previews, preserves stable node identities, and commits the completed generation as one history entry.

  • Incremental Markdown parsing
  • Transactional stream commit and rollback
  • OpenAI-compatible and custom generators
  • Host-owned credentials and attachments

Everything you need.

A complete mind-mapping toolkit built from explicit runtime surfaces, optional Features, pure SVG, and accessible interaction.

AI Generation

Connect a host-owned generator, stream Markdown updates, and optionally accept supported attachments.

Pure SVG Rendering

No Canvas or external layout engine. Maps remain crisp at every zoom level.

Interactive Editor

Editing, selection, panning, zooming, and focused controls in a composable React surface.

Dark Mode

Follow the system color scheme or explicitly select a light or dark runtime theme.

CSS Customizable

Use surface-specific stylesheets and semantic theme tokens to match your product.

Keyboard First

Create, edit, move, fold, copy, paste, undo, and navigate without leaving the keyboard.

Modular Entries

Choose Core, Static, Viewer, or Editor and add Features only when your interface needs them.

Mobile & Touch

Pan, zoom, select, and edit through pointer and touch-friendly controls.

Internationalization

Built-in English and Simplified Chinese messages with host-provided overrides.

Export Anywhere

Export SVG, PNG, Markdown, JSON, or a plain-text outline through explicit Features.

Markdown Editor

Add an opt-in source editor while the controller keeps the visual document synchronized.

Read-only Viewer

Use the dedicated Viewer entry for navigation and selection without editor mutations.

Extensible

Extend with Extensions.

Seven built-in Extensions transform syntax and layout through stable, opt-in hooks.

Frontmatter

Set document direction and theme from a YAML header.

---
direction: right
theme: dark
---

Dotted Lines

Use dotted connections for secondary relationships.

-. Dashed child node

Folding

Persist collapsed branches in the document.

+ Collapsed group
  - Hidden child

Multi-line

Attach multiple display lines to one node.

- Title
  | Detail line 1
  | Detail line 2

Tags

Categorize and filter nodes with namespaced attributes.

- React #frontend #lib

Cross Links

Connect nodes outside the parent-child tree.

- Node {#a}
  -> {#b} "ref"

LaTeX Math

Render formulas through the optional KaTeX peer.

- Inline: $E = mc^2$
- Block: $$\sum x_i$$

Write Markdown.
See Mind Maps.

Use familiar Markdown to describe ideas. Open MindMap parses it into a deterministic Document and renders an interactive SVG projection.

  • Inline formatting — bold, italic, code, strikethrough, highlight
  • Task markers — todo, done, and in-progress states
  • Remarks — attach multi-line notes to any node
  • Multi-root — multiple independent trees on one surface
  • Drag and keyboard movement — reorder or reparent nodes
  • Text editing — keep Markdown and visual edits synchronized
Project Roadmap
- **Phase 1** — Foundation
  - [x] Setup repository
  - [x] Core architecture
  - [-] API design
    > Explicit package entries
- *Phase 2* — Features
  - [ ] Search and history
  - [ ] `Markdown` editor
  - [ ] ==Export workflow==
- Resources
  - [Docs](/docs/)
  - ~~Private source imports~~

Built for the React Ecosystem.

Choose a focused runtime surface, pass Markdown or a Document, and compose only the Features and Extensions your application needs.

TypeScript Native

Public types cover Documents, nodes, patches, controllers, surfaces, Features, and Extensions.

Extension System

Transform parsing, serialization, visibility, edges, or layout through stable hooks.

import { MindMapEditor } from '@xiangfa/mindmap/editor'
import '@xiangfa/mindmap/styles/editor.css'

export function Map() {
  return <MindMapEditor
    markdown={content}
    extensions={extensions}
    features={features}
    onMarkdownChange={save}
  />
}

Built on open web standards

React 18–19
TypeScript
Pure SVG
Markdown
Astro

Precision in Thought.

An open-source toolkit for visual thinking in the React ecosystem.

Get Started Free View Documentation