#What is MermaidCN?

MermaidCN is a clean, developer-friendly React component library that makes it effortless to embed, style, and interact with Mermaid.js diagrams inside modern React/Next.js apps built with shadcn/ui. It’s designed for teams and individuals who need to display flowcharts, sequence diagrams, architecture visuals, Gantt charts, or any Mermaid syntax directly in their UI without the usual integration headaches. Powered by Mermaid.js under the hood and fully compatible with the shadcn CLI workflow, it delivers core value through a simple <Mermaid /> component plus powerful add-ons like zoom/pan, live playground, and export tools — all while maintaining shadcn/ui’s copy-paste simplicity, theming consistency, and accessibility standards. Ideal for documentation sites, internal tools, API explorers, design systems, or any project where visual diagrams enhance understanding.

#Features ⚡

• Pure <Mermaid /> Component: Render any Mermaid diagram string as SVG with automatic loading and error states.

• High-Performance <ZoomPan />: Canvas-based zoom and pan with smooth interpolation, high-DPI support, and pinch gestures.

• Interactive <MermaidPlayground />: Full editor + preview environment for live diagram testing.

• <MermaidPreview />: Combined render, zoom/pan, and export (SVG, PNG, copy to clipboard).

• Flexible Theming: Built-in support for Mermaid themes (dark, forest, etc.), custom fonts, and sizes via config.

• Dynamic & Live Rendering: Debounce support for real-time editors plus onSuccess/onError callbacks.

• shadcn CLI Registry: Install everything with one or two commands — no manual setup hassle.

• Accessible & Performant: Keyboard-friendly, reduced-motion aware, and optimized for large/complex diagrams.

#Pros ✅

• Perfect native integration with shadcn/ui — feels like an official extension.

• Turns complex Mermaid rendering into a simple, reusable component.

• Excellent zoom/pan and playground make it far more usable than raw Mermaid.js.

• Free and open for commercial use with full code ownership.

• Great documentation with live examples and clear prop tables.

#Cons ⚠️

• Requires Mermaid.js as a peer dependency (installed automatically via CLI in most cases).

• Focused exclusively on Mermaid diagrams — not a general charting library.

• Zoom/pan uses canvas conversion, which may need tuning for extremely large diagrams.

• Still a niche library — fewer community extensions compared to broader shadcn tools.

#Included Components - Templates

• <Mermaid />: Core diagram renderer with config support.

• <ZoomPan />: High-performance wrapper for interactive zoom and pan.

• <MermaidPlayground />: Live editor + preview for testing diagrams.

• <MermaidPreview />: Rendered diagram with built-in export controls.

• useZoomPan Hook: For building custom zoom/pan experiences.

• Mermaid Themes Registry: Pre-configured theme files for consistent styling

#Pricing 💸

• Completely free and open-source — no paid tiers or restrictions.

• All components, registry, docs, and usage are 100% free.

• No Pro version or upsells mentioned.

#Integrations 🧰

• shadcn/ui: Full CLI registry compatibility for one-command adds.

• React / Next.js: Primary framework support with hooks and components.

• Mermaid.js: Core rendering engine (peer dependency).

• Tailwind CSS: Seamless theming and styling alongside shadcn/ui.

• TypeScript: Fully typed components and props.

• Framer Motion or similar (optional) for additional interactions.