Design KitComponentv0.3.0

NBMermaid

Mermaid diagram wrapper styled with MetalHatsCats theme vars for native Neobrutalist flowcharts.

All componentsKit overviewContact

When to use

Use to visualize architectures, component relationships, or process flows.

Import

Import
tsx
import NBMermaid from "@/components/NBMermaid";

Example

Example
tsx
// See import NBMermaid from "@/components/NBMermaid"; for import usage.

Live preview

People also ask

Where do I import NBMermaid from?

Use: import NBMermaid from "@/components/NBMermaid";

How do I keep it multi-domain safe?

Don’t hardcode domains in metadata/JSON-LD. Use getSiteUrl() + toAbsoluteUrl().

Design kit

Turn this into a sellable export

If you want the “packaged kit” (versioning, license, exportable docs and components), we can scope the release pipeline.

ContactAll components