Mermaid Diagram

Mermaid-диаграмма — полноэкранный вьюер с зумом и панорамой, mermaid грузится с CDN.

import { MermaidDiagram } from "@/components/ui/mermaid-diagram";

const SOURCE = `flowchart TD
  A[Запрос пользователя] --> B{Тип контента?}
  B -->|Файл| C[Превью файла]
  B -->|Диаграмма| D[Mermaid]
  B -->|Дерево идей| E[Mind-map]
  C --> F[Ответ в чате]
  D --> F
  E --> F`;

export default function Particle() {
  return (
    <div className="h-105 w-full overflow-hidden rounded-lg border">
      <MermaidDiagram source={SOURCE} title="Поток обработки" />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/mermaid-diagram

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

import { MermaidDiagram } from "@/components/ui/mermaid-diagram";
 
<MermaidDiagram
  source={`flowchart TD
  A[Старт] --> B[Конец]`}
  title="Схема"
/>

Компоненту нужен контейнер с высотой — вьюер заполняет его. Для дерева идей без Mermaid-синтаксиса используйте mind-map-diagram.

Самодостаточный: mermaid@11 грузится в рантайме с CDN внутри изолированного iframe (sandbox="allow-scripts") — npm-зависимости нет. Вьюер даёт fit-to-view + зум (колесо) и панораму (drag) с контролами; на ошибке рендера показывает исходник. Тема адаптивная (light → neutral, dark → dark).

Prop	Тип	Описание
`source`	`string`	Исходник Mermaid (например, блок `flowchart TD`).
`theme`	`"light" \| "dark"`	Тема диаграммы (по умолчанию `light`).
`title`	`string`	Заголовок для `aria-label` / `<title>`.
`className`	`string`	Доп. классы iframe.

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

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