# npm
npm install @xiangfa/mindmap

# pnpm
pnpm add @xiangfa/mindmap

# yarn
yarn add @xiangfa/mindmap

pnpm add katex

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

const markdown = `Project roadmap
- Research
- Build
- Launch`

export function Roadmap() {
  return <MindMapEditor markdown={markdown} />
}

const markdown = `Machine Learning
- Supervised Learning
  - Classification
  - Regression
- Unsupervised Learning

Application Areas
- Natural Language Processing
- Computer Vision`

<MindMapEditor
  markdown={markdown}
  onMarkdownChange={setMarkdown}
/>

<MindMapEditor markdown={markdown} theme="auto" />
<MindMapEditor markdown={markdown} theme="dark" />
<MindMapEditor markdown={markdown} theme="light" />

<MindMapEditor markdown={markdown} defaultDirection="both" />
<MindMapEditor markdown={markdown} defaultDirection="right" />
<MindMapEditor markdown={markdown} defaultDirection="left" />

<MindMapEditor markdown={markdown} readOnly />

import { MindMapViewer } from '@xiangfa/mindmap/viewer'
import '@xiangfa/mindmap/styles/viewer.css'

<MindMapViewer
  markdown={markdown}
  extensions={extensions}
  selectable
/>

import { markdownEditorFeature } from '@xiangfa/mindmap/features/markdown-editor'
import '@xiangfa/mindmap/styles/features/markdown-editor.css'

const features = [markdownEditorFeature({ title: 'Markdown source' })]
<MindMapEditor markdown={markdown} features={features} />

import { MindMapEditor } from '@xiangfa/mindmap/editor'
import { basicMindMapExtensions } from '@xiangfa/mindmap/extensions'
import { historyFeature } from '@xiangfa/mindmap/features/history'
import { searchFeature } from '@xiangfa/mindmap/features/search'
import '@xiangfa/mindmap/styles/editor.css'
import '@xiangfa/mindmap/styles/features/history.css'
import '@xiangfa/mindmap/styles/features/search.css'

const extensions = basicMindMapExtensions()
const features = [historyFeature(), searchFeature()]

<MindMapEditor
  markdown={markdown}
  extensions={extensions}
  features={features}
  onMarkdownChange={setMarkdown}
/>

import {
  basicMindMapExtensions,
  crossLinkExtension,
  frontmatterExtension,
  latexExtension,
} from '@xiangfa/mindmap/extensions'

const extensions = [
  ...basicMindMapExtensions(), // tags, folding, multiline, dotted lines
  frontmatterExtension(),
  crossLinkExtension(),
  latexExtension(),
]

import { useRef } from 'react'
import { MindMapEditor, type MindMapEditorRef } from '@xiangfa/mindmap/editor'

const ref = useRef<MindMapEditorRef>(null)

async function focusResearch() {
  ref.current?.fitView(true)
  ref.current?.focusNode('research')
}

<MindMapEditor ref={ref} markdown={markdown} />

<MindMapEditor
  defaultMarkdown="Roadmap
- Research"
  onMarkdownChange={(nextMarkdown) => saveSource(nextMarkdown)}
  onDocumentChange={(nextDocument) => saveDocument(nextDocument)}
  onEvent={(event) => {
    if (event.phase === 'commit') persist(event.current.document)
  }}
/>

<MindMapEditor markdown={markdown} locale="en-US" />

<MindMapEditor
  markdown={markdown}
  locale="zh-CN"
  messages={{ newNode: 'New', zoomIn: 'Zoom in' }}
/>

Machine Learning
- Supervised Learning
  - Classification
    - Logistic Regression
    - Decision Trees
  - Regression
    - Linear Regression
- Unsupervised Learning
  - Clustering
  - Dimensionality Reduction

Computer Vision
- Image Classification
- Object Detection

Machine Learning
- **Bold Topic**
- *Italic Topic*
- ~~Deprecated Topic~~
- `code or identifier`
- ==Highlighted Topic==

Resources
- [Open MindMap](https://github.com/u14app/mindmap)
- ![Architecture diagram](data:image/png;base64,...)
- [Documentation](/docs/)

Machine Learning
- Supervised Learning
  > Learn a mapping from labelled examples.
  > Output may be categorical or continuous.
  - Classification
  - Regression

%% Internal planning note
Machine Learning
- Supervised Learning
  %% Revisit examples before publishing
  - Classification
- Clustering

Learning Plan Q1
- [x] Linear Algebra
- [-] Probability
- [ ] Neural Networks
  - [x] Backpropagation
  - [ ] Image Segmentation

import {
  basicMindMapExtensions,
  crossLinkExtension,
  frontmatterExtension,
  latexExtension,
} from '@xiangfa/mindmap/extensions'

const extensions = [
  ...basicMindMapExtensions(),
  frontmatterExtension(),
  crossLinkExtension(),
  latexExtension(),
]

Machine Learning
- Supervised Learning
  - Classification
  -. Feature Engineering

Machine Learning
- Supervised Learning
  - Classification
    | **Definition**: Maps inputs to categories.
    | **Input**: Feature vector X
    | **Output**: Class label Y
  - Regression
    | Produces continuous values.

Tech Stack
- React #frontend #javascript
  - Astro #framework
  - Zustand #state-management
- TypeScript #language
- PostgreSQL #database #backend

System Architecture
- Frontend {#frontend}
- Backend
  - API Gateway {#api-gateway}
    - REST
    - GraphQL
  - Response -> {#frontend} "HTTP"
- Data Layer
  - Cache -.> {#api-gateway}

Project Structure
- src/
  - components/
    - Button.tsx
    - Modal.tsx
  + utilities/
    - format.ts
    - validate.ts
- README.md

Loss Functions
- MSE
  | $L = \frac{1}{n}\sum_{i=1}^{n}(y_i - \hat{y}_i)^2$
- Cross Entropy
  | $$L = -\sum_i y_i \log(\hat{y}_i)$$

---
direction: right
theme: auto
---

Machine Learning
- Supervised Learning
- Unsupervised Learning

import { MindMapEditor } from '@xiangfa/mindmap/editor'
import {
  aiFeature,
  createOpenAICompatibleGenerator,
} from '@xiangfa/mindmap/features/ai'
import '@xiangfa/mindmap/styles/editor.css'
import '@xiangfa/mindmap/styles/features/ai.css'

const generator = createOpenAICompatibleGenerator({
  apiUrl: '/api/chat/completions', // server-side proxy
  model: 'gpt-5',
})

const features = [aiFeature({ generator })]

export function Brainstorm() {
  return <MindMapEditor defaultMarkdown="Product" features={features} />
}

import { aiFeature, type MindMapAIGenerator } from '@xiangfa/mindmap/features/ai'

const generate: MindMapAIGenerator = async function* ({ prompt, markdown, signal }) {
  const response = await fetch('/api/mindmap', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt, markdown }),
    signal,
  })
  if (!response.ok || !response.body) throw new Error('Generation failed')
  const reader = response.body.getReader()
  const decoder = new TextDecoder()
  const cancel = () => { void reader.cancel() }
  signal.addEventListener('abort', cancel, { once: true })
  try {
    while (!signal.aborted) {
      const { value, done } = await reader.read()
      if (done) break
      const delta = decoder.decode(value, { stream: true })
      if (delta) yield delta
    }
    const tail = decoder.decode()
    if (!signal.aborted && tail) yield tail
  } finally {
    signal.removeEventListener('abort', cancel)
    if (signal.aborted) await reader.cancel().catch(() => undefined)
    reader.releaseLock()
  }
}

const features = [aiFeature({ generate })]

interface MindMapAIGeneratorInput {
  prompt: string
  markdown: string
  document: MindMapDocument
  signal: AbortSignal
  attachments?: readonly MindMapAIAttachment[]
}

type MindMapAIGeneratorResult =
  | string
  | AsyncIterable<string>
  | Promise<string | AsyncIterable<string>>

interface MindMapAIConfig {
  apiUrl: string
  model: string
  apiKey?: string
  systemPrompt?: string
  attachments?: readonly ('text' | 'image' | 'pdf')[]
  maxAttachmentSize?: number
  maxAttachments?: number
  maxTotalAttachmentSize?: number
  attachmentReadConcurrency?: number
  headers?: Record<string, string>
  request?: (payload: MindMapAIRequestPayload) => Promise<Response>
}

const features = [aiFeature({
  generator,
  attachments: ['text', 'image', 'pdf'],
  maxAttachmentSize: 5 * 1024 * 1024,
  maxAttachments: 10,
  maxTotalAttachmentSize: 20 * 1024 * 1024,
  attachmentReadConcurrency: 3,
})]

const generator = createOpenAICompatibleGenerator({
  apiUrl: '/api/chat/completions',
  model: 'gpt-5',
  systemPrompt: [
    'Return only a Markdown mind map.',
    'Use one root title and indented list items.',
    'Do not wrap the result in a code fence.',
  ].join(' '),
})

@import '@xiangfa/mindmap/styles/editor.css';
@import '@xiangfa/mindmap/styles/features/history.css';
@import '@xiangfa/mindmap/styles/features/search.css';

.product-map .mm-surface {
  --mm-background: #ffffff;
  --mm-text: #253044;
  --mm-muted: #748096;
  --mm-root: #334155;
  --mm-selection: #007aff;
  --mm-font: system-ui, sans-serif;
}

<MindMapEditor
  markdown={markdown}
  theme="light"
  themeTokens={{
    background: '#ffffff',
    text: '#253044',
    rootFill: '#334155',
    rootText: '#ffffff',
    selection: '#007aff',
    branches: ['#ff646b', '#43c6c3', '#6ca9ff'],
  }}
/>

/* Child node shape and underline accent */
.product-map .mm-node--child .mm-node-shape {
  stroke-width: 2;
}

.product-map .mm-node-accent {
  stroke-width: 3;
}

/* Connection lines */
.product-map .mm-edge {
  stroke-linecap: square;
}

/* One stable document node ID */
.product-map .mm-node[data-mm-node="release"] .mm-node-label {
  font-weight: 800;
}

<MindMapEditor
  markdown={markdown}
  themeTokens={{
    branches: ['#e74c3c', '#2ecc71', '#3498db', '#f59e0b'],
  }}
/>

import {
  prepareMindMapSvg,
  renderSvgToPng,
} from '@xiangfa/mindmap/features/export'

const svg = await prepareMindMapSvg(document, {
  extensions,
  theme: literalThemeTokens,
  imageResolver,
})
const png = await renderSvgToPng(svg)

<MindMapEditor
  markdown={markdown}
  features={[historyFeature(), searchFeature()]}
  toolbar={{
    zoom: true,
    history: true,
    search: true,
    tags: false,
    editing: true,
    direction: true,
    textMode: false,
    fullscreen: true,
  }}
/>

const ref = useRef<MindMapEditorRef>(null)

ref.current?.fitView(true)
ref.current?.setMarkdown('Roadmap
- Research')
const controller = ref.current?.getController()
const document = ref.current?.getDocument()

interface MindMapNode {
  id: string
  text: string
  children?: MindMapNode[]
  attributes?: MindMapNodeAttributes
}

interface MindMapDocument {
  roots: MindMapNode[]
  direction?: 'left' | 'right' | 'both'
  theme?: 'light' | 'dark' | 'auto'
  metadata?: Record<string, string>
  comments?: Array<{ text: string; afterNodeId: string | null }>
}

import { MindMapViewer, type MindMapViewerRef } from '@xiangfa/mindmap/viewer'
import '@xiangfa/mindmap/styles/viewer.css'

const viewerRef = useRef<MindMapViewerRef>(null)

<MindMapViewer
  ref={viewerRef}
  markdown={markdown}
  extensions={extensions}
  activeTags={['docs']}
  onSelectedNodeChange={setSelectedNodeId}
/>

const controller = createMindMapController(markdown, { extensions })

const unsubscribe = controller.subscribeEvents((event) => {
  if (event.phase === 'commit') save(event.current.document)
  if (event.phase === 'rollback') restore(event.current.document)
})

const stream = controller.createMarkdownStream()
stream.replace('Roadmap
- Research')
await stream.commit()

unsubscribe()
controller.dispose()

import {
  applyMindMapPatches,
  applyMindMapPatchesWithInverse,
  authorizeMindMapImageUrl,
  createMarkdownStream,
  createMindMapParser,
  createMindMapController,
  diffMindMapDocuments,
  findNode,
  layoutMindMap,
  normalizeDocument,
  parseMindMap,
  reconcileMindMapIds,
  renderMindMapToSvg,
  sanitizeMindMapUrl,
  serializeMindMap,
  tokenizeMindMapInline,
  validateMindMapDocument,
  walkNodes,
} from '@xiangfa/mindmap/core'

import {
  exportMindMapOutline,
  prepareMindMapSvg,
  renderSvgToPng,
} from '@xiangfa/mindmap/features/export'

const document = parseMindMap(markdown, { extensions })
const layout = layoutMindMap(document, { extensions })
const svg = renderMindMapToSvg(document, { extensions })
const prepared = await prepareMindMapSvg(document, { extensions })
const png = await renderSvgToPng(prepared)