I'll create a Next.js application that renders Markdown content with Mermaid diagrams. Let's build this step by step:

How It Works

I've created a modular React application that renders Markdown content with Mermaid diagrams. Here's a breakdown of the components:

1. MermaidRenderer Component

This component is responsible for rendering Mermaid diagrams:

• Uses the Mermaid library to transform diagram text into SVG
• Handles errors gracefully with user-friendly error messages
• Generates a unique ID for each diagram to prevent rendering conflicts
• Displays a loading spinner while the diagram is being rendered

2. MarkdownRenderer Component

This component handles the rendering of Markdown content:

• Uses react-markdown to parse and render Markdown
• Integrates with remark-gfm for GitHub Flavored Markdown support
• Uses rehype-raw to handle HTML in Markdown

• Implements custom code block rendering:

  • Detects Mermaid code blocks and passes them to the MermaidRenderer
  • Uses syntax highlighting for regular code blocks
• Forces re-rendering when content changes to ensure Mermaid diagrams initialize properly

3. App Component (page.tsx)

The main page component:

• Manages state for the Markdown content
• Provides a split-view interface with input and output panels
• Includes sample Markdown content with various Mermaid diagram examples
• Offers controls to load sample content or clear the input

Features

• Modular Design: Each component has a single responsibility, making the code maintainable
• Responsive Layout: Uses Tailwind CSS grid for a responsive split-view layout
• Error Handling: Gracefully handles Mermaid syntax errors with helpful messages
• Syntax Highlighting: Provides syntax highlighting for code blocks
• Interactive Interface: Allows users to edit Markdown and see the rendered output in real-time

Dependencies

The application uses these key libraries:

• react-markdown for Markdown parsing and rendering
• mermaid for diagram rendering
• remark-gfm for GitHub Flavored Markdown support
• rehype-raw for HTML support in Markdown
• react-syntax-highlighter for code syntax highlighting

To use this application, you'll need to install these dependencies:

This implementation provides a complete solution for rendering Markdown content with Mermaid diagrams in a React application, meeting all the requirements you specified.