### Build and Start Production Server

Source: https://github.com/brianxiadong/mermaid-exporter/blob/main/README.md

Builds the production-ready version of the application and starts the production server.

```bash
pnpm build
```

```bash
pnpm start
```

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

### Install Dependencies with pnpm or npm

Source: https://github.com/brianxiadong/mermaid-exporter/blob/main/README.md

Installs project dependencies using either pnpm or npm. pnpm is recommended for this project.

```bash
pnpm install
```

```bash
npm install
```

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

### Start Development Server

Source: https://github.com/brianxiadong/mermaid-exporter/blob/main/README.md

Launches the development server for local testing and development. Access the application at http://localhost:3000.

```bash
pnpm dev
```

```bash
npm run dev
```

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

### Add New Example Template

Source: https://github.com/brianxiadong/mermaid-exporter/blob/main/README.md

Shows how to add a new example template to the ExampleTemplates component by adding an object to the 'templates' array.

```typescript
const templates = [
  {
    name: '你的模板',
    code: `graph TD
    A[开始] --> B[结束]`
  },
];
```

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

### Deploy to Vercel using CLI

Source: https://github.com/brianxiadong/mermaid-exporter/blob/main/README.md

Installs the Vercel CLI globally and deploys the project. This method is suitable for quick deployments.

```bash
npm i -g vercel

vercel
```

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

### Mermaid Syntax Reference

Source: https://context7.com/brianxiadong/mermaid-exporter/llms.txt

This section provides examples of Mermaid syntax for various diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, and pie charts. Use these examples to understand and implement different visualizations.

```mermaid
%% 流程图示例 - 使用 graph TD (从上到下) 或 graph LR (从左到右)
graph TD
    A[矩形节点] --> B(圆角矩形)
    B --> C{菱形判断}
    C -->|条件1| D((圆形))
    C -->|条件2| E[结束]

%% 连接线类型
%% A --> B     箭头连接
%% A --- B     直线连接
%% A -.-> B    虚线箭头
%% A ==> B     粗箭头
%% A -->|标签| B  带标签的连接
```

```mermaid
%% 时序图示例
sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 发送请求
    B-->>A: 返回响应
```

```mermaid
%% 类图示例
classDiagram
    class Animal {
        +String name
        +eat()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog
```

```mermaid
%% 状态图示例
stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 待机: 停止
    运行 --> [*]: 关闭
```

```mermaid
%% 甘特图示例
gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 开发
    需求分析 :2024-01-01, 3d
    编码实现 :2024-01-04, 5d
```

```mermaid
%% 饼图示例
pie title 数据分布
    "A" : 45
    "B" : 35
    "C" : 20
```

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

### ExampleTemplates Component for Preset Templates

Source: https://context7.com/brianxiadong/mermaid-exporter/llms.txt

Provides a selection of pre-defined Mermaid chart templates, including flowcharts, sequence diagrams, class diagrams, Gantt charts, pie charts, and state diagrams. Use this to help users quickly start creating diagrams.

```tsx
import { ExampleTemplates } from '@/components/ExampleTemplates';
import { useState } from 'react';

function TemplateSelector() {
  const [code, setCode] = useState('');

  return (
    <ExampleTemplates
      onTemplateSelect={(templateCode) => setCode(templateCode)}
    />
  );
}

// ExampleTemplates Props 接口
interface ExampleTemplatesProps {
  onTemplateSelect: (code: string) => void;  // 选择模板后的回调
}

// 内置模板示例 - 流程图
const flowchartTemplate = `graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[用户登录]
    E --> C
    C --> F[浏览内容]
    F --> G[结束]`;

// 内置模板示例 - 时序图
const sequenceTemplate = `sequenceDiagram
    participant A as 用户
    participant B as 前端
    participant C as 后端
    participant D as 数据库

    A->>B: 登录请求
    B->>C: 验证用户信息
    C->>D: 查询用户数据
    D-->>C: 返回用户信息
    C-->>B: 验证结果
    B-->>A: 登录成功`;
```

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

### MermaidPreview Component for Live Rendering

Source: https://context7.com/brianxiadong/mermaid-exporter/llms.txt

Renders Mermaid diagrams in real-time based on provided code and theme. It includes syntax validation and error handling, optimized with a 300ms debounce for performance. Use this for immediate visual feedback on diagram changes.

```tsx
import { MermaidPreview } from '@/components/MermaidPreview';

function DiagramPreview() {
  const mermaidCode = `sequenceDiagram
    participant A as 用户
    participant B as 前端
    participant C as 后端

    A->>B: 登录请求
    B->>C: 验证用户信息
    C-->>B: 返回结果
    B-->>A: 登录成功`;

  return (
    <div className="h-[600px] overflow-auto">
      <MermaidPreview
        code={mermaidCode}
        theme="default"  // 可选: 'default' | 'dark' | 'forest' | 'neutral' | 'base'
      />
    </div>
  );
}

// MermaidPreview Props 接口
interface MermaidPreviewProps {
  code: string;   // Mermaid 图表代码
  theme: string;  // Mermaid 主题名称
}
```

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

### Add New Theme Option

Source: https://github.com/brianxiadong/mermaid-exporter/blob/main/README.md

Demonstrates how to add a new theme option to the ThemeSelector component by updating the 'themes' array.

```typescript
const themes = [
  { value: 'default', label: '默认' },
  { value: 'dark', label: '深色' },
  { value: 'your-theme', label: '你的主题' },
];
```

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

### ThemeSelector Component for Theme Switching

Source: https://context7.com/brianxiadong/mermaid-exporter/llms.txt

Allows users to switch between five predefined Mermaid themes: default, dark, forest, neutral, and base. Use this component to let users customize the visual style of their diagrams.

```tsx
import { ThemeSelector } from '@/components/ThemeSelector';
import { useState } from 'react';

function ThemeControl() {
  const [theme, setTheme] = useState('default');

  return (
    <div className="flex items-center gap-2">
      <span>主题:</span>
      <ThemeSelector
        theme={theme}
        onThemeChange={setTheme}
      />
    </div>
  );
}

// ThemeSelector Props 接口
interface ThemeSelectorProps {
  theme: string;                        // 当前选中的主题
  onThemeChange: (theme: string) => void;  // 主题变更回调
}

// 可用主题列表
const themes = [
  { value: 'default', label: '默认' },
  { value: 'dark', label: '深色' },
  { value: 'forest', label: '森林' },
  { value: 'neutral', label: '中性' },
  { value: 'base', label: '基础' },
];
```

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

### MermaidEditor Component for Code Editing

Source: https://context7.com/brianxiadong/mermaid-exporter/llms.txt

Integrates Monaco Editor for a professional Mermaid code editing experience with syntax highlighting and auto-completion. Use this component to provide a rich text editing interface for Mermaid diagrams.

```tsx
import { MermaidEditor } from '@/components/MermaidEditor';
import { useState } from 'react';

function DiagramEditor() {
  const [code, setCode] = useState(`graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[用户登录]
    E --> C`);

  return (
    <div className="h-[600px]">
      <MermaidEditor
        value={code}
        onChange={(newValue) => setCode(newValue)}
      />
    </div>
  );
}

// MermaidEditor Props 接口
interface MermaidEditorProps {
  value: string;           // 当前编辑器中的 Mermaid 代码
  onChange: (value: string) => void;  // 代码变更时的回调函数
}
```

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

### Mermaid Editor Page Integration

Source: https://context7.com/brianxiadong/mermaid-exporter/llms.txt

This React component demonstrates a full-page integration of the Mermaid editor using Next.js App Router. It includes state management for Mermaid code and theme, and integrates components for editing, previewing, and exporting diagrams.

```tsx
'use client';

import { useState } from 'react';
import { MermaidEditor } from '@/components/MermaidEditor';
import { MermaidPreview } from '@/components/MermaidPreview';
import { ExportPanel } from '@/components/ExportPanel';
import { ThemeSelector } from '@/components/ThemeSelector';
import { ExampleTemplates } from '@/components/ExampleTemplates';

const defaultMermaidCode = `graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[用户登录]
    E --> C`;

export default function EditorPage() {
  const [mermaidCode, setMermaidCode] = useState(defaultMermaidCode);
  const [theme, setTheme] = useState('default');
  const [isPreviewMode, setIsPreviewMode] = useState(false);

  return (
    <div className="max-w-7xl mx-auto">
      {/* 工具栏 */}
      <div className="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div className="flex flex-wrap items-center gap-4">
          {/* 主题选择 */}
          <div className="flex items-center gap-2">
            <span>主题:</span>
            <ThemeSelector theme={theme} onThemeChange={setTheme} />
          </div>

          {/* 示例模板 */}
          <ExampleTemplates onTemplateSelect={setMermaidCode} />

          {/* 导出面板 */}
          <div className="ml-auto">
            <ExportPanel mermaidCode={mermaidCode} theme={theme} />
          </div>
        </div>
      </div>

      {/* 编辑器和预览区域 - 双栏布局 */}
      <div className="grid md:grid-cols-2 gap-6">
        {/* 代码编辑器 */}
        <div className="h-[700px]">
          <MermaidEditor
            value={mermaidCode}
            onChange={setMermaidCode}
          />
        </div>

        {/* 实时预览 */}
        <div className="h-[700px] overflow-auto">
          <MermaidPreview
            code={mermaidCode}
            theme={theme}
          />
        </div>
      </div>
    </div>
  );
}
```

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

### ExportPanel Component for SVG Export

Source: https://context7.com/brianxiadong/mermaid-exporter/llms.txt

Provides functionality to export Mermaid diagrams as SVG files. Allows configuration of export dimensions and background color. Use this component when users need to download their diagrams.

```tsx
import { ExportPanel } from '@/components/ExportPanel';

function ExportSection() {
  const mermaidCode = `pie title 数据分布
    "A 类" : 45
    "B 类" : 35
    "C 类" : 20`;
  const theme = 'default';

  return (
    <ExportPanel
      mermaidCode={mermaidCode}
      theme={theme}
    />
  );
}

// ExportPanel Props 接口
interface ExportPanelProps {
  mermaidCode: string;  // 要导出的 Mermaid 代码
  theme: string;        // 当前使用的主题
}

// 导出设置状态
const exportSettings = {
  width: 800,
  height: 600,
  backgroundColor: 'transparent' // 背景色: 'transparent' | 'white' | '#f8f9fa' | '#343a40' | 'black'
};
```

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