Mind Map Diagram

Ментальная карта — собственный движок tidy-tree (без Mermaid): лёгкие боксы и кривые-связи.

Цвета

Типографика

Токены

Кнопки

Поля ввода

Компоненты

Формы

Каталоги

Паттерны

Дизайн-система

import {
  MindMapDiagram,
  type MindMapNode,
} from "@/components/ui/mind-map-diagram";

const ROOT: MindMapNode = {
  label: "Дизайн-система",
  children: [
    {
      label: "Токены",
      children: [{ label: "Цвета" }, { label: "Типографика" }],
    },
    {
      label: "Компоненты",
      children: [{ label: "Кнопки" }, { label: "Поля ввода" }],
    },
    {
      label: "Паттерны",
      children: [{ label: "Формы" }, { label: "Каталоги" }],
    },
  ],
};

export default function Particle() {
  return <MindMapDiagram root={ROOT} title="Дизайн-система" />;
}

Установка


pnpm dlx shadcn@latest add @oracul/mind-map-diagram

Использование

import {
  MindMapDiagram,
  type MindMapNode,
} from "@/components/ui/mind-map-diagram";
 
const root: MindMapNode = {
  label: "Тема",
  children: [
    { label: "Ветвь A", caption: "пояснение", children: [{ label: "A1" }] },
    { label: "Ветвь B" },
  ],
};
 
<MindMapDiagram root={root} title="Тема" />

Самодостаточный движок: раскладывает дерево узлов слева направо и рисует HTML- боксы + SVG-связи. Без Mermaid и внешних библиотек. Текст узлов — из темы; цвета ветвей — категориальная палитра (намеренно литеральные data-viz цвета, читаются на светлом и тёмном фоне).

Prop	Тип	Описание
`root`	`MindMapNode`	Корень дерева (`label`, `caption?`, `children?`).
`title`	`string`	Подпись для `aria-label` (опц.).

На этой странице

Установка Использование API