### Install React Mermaid Diagram Component

Source: https://github.com/lightenna/react-mermaid-diagram/blob/main/README.md

Instructions to install the `mermaid` and `react` dependencies, followed by the `@lightenna/react-mermaid-diagram` package using npm.

```shell
npm install mermaid react
npm install @lightenna/react-mermaid-diagram
```

--------------------------------

### Embed Mermaid Diagram in Next.js Client Component

Source: https://github.com/lightenna/react-mermaid-diagram/blob/main/README.md

Illustrates how to use the `MermaidDiagram` component specifically within a Next.js application. It highlights the need for the `'use client'` directive to ensure the component runs on the client side, as Mermaid is a client-side library.

```jsx
'use client';
import { MermaidDiagram } from '@lightenna/react-mermaid-diagram';

export default function Diagram() {
  return <MermaidDiagram>{`graph TD;\nA-->B;\nB-->C;`}</MermaidDiagram>;
}
```

--------------------------------

### Embed Mermaid Diagram in React Component

Source: https://github.com/lightenna/react-mermaid-diagram/blob/main/README.md

Demonstrates how to import and use the `MermaidDiagram` component in a standard React application. It shows passing Mermaid diagram text as children to the component for rendering.

```jsx
import {MermaidDiagram} from "@lightenna/react-mermaid-diagram";

const diagram_text="graph TD\nA-->B;\nB-->C;\n";
return <MermaidDiagram>
  {diagram_text}
</MermaidDiagram>;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.