# antuikit / Mermaid

> Mermaid, a diagram drawn from Mermaid syntax in the theme's colors, light or dark, framed as a Card, with its toolbar glyphs from the icon pack.

Docs: https://antuikit.com/docs/components/mermaid

## Install

npx antuikit@latest init
npx antuikit@latest add mermaid

## Import

import { Mermaid } from "@/components/ui/mermaid";

## Demos

- [Flowchart](https://ui.antuikit.com/embed/mermaid/flowchart.md): Pass Mermaid syntax as `children` to draw a diagram, with a toolbar to zoom, download it as an image, or switch to the source.
- [Sequence diagram](https://ui.antuikit.com/embed/mermaid/sequence.md): A sequence diagram of one chat request, from the message the user sends to the reply the app streams back.
- [Toolbar actions](https://ui.antuikit.com/embed/mermaid/actions.md): Set `enableZoom` or `enableDownload` to `false` in `actions` to drop those buttons, or add your own with `customActions`.
- [Without toolbar](https://ui.antuikit.com/embed/mermaid/no-header.md): Set `header` to `null` to show the diagram alone, with no toolbar and no way to switch to the source.
- [Custom header](https://ui.antuikit.com/embed/mermaid/custom-header.md): Pass `header` a node to replace the toolbar with your own title and buttons.
- [Architecture answer](https://ui.antuikit.com/embed/mermaid/architecture-answer.md): An assistant reply that explains how an upload service works with a flowchart of its parts between two lines of text.
- [Project timeline](https://ui.antuikit.com/embed/mermaid/project-timeline.md): A project plan card with a Gantt chart of design, build and release phases, plus buttons to share it or add it to a calendar.
- [Flow explainer](https://ui.antuikit.com/embed/mermaid/flow-explainer.md): A two-pane card that lists the steps of an order on one side and draws every state it can move between on the other.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/mermaid`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Mermaid` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.