ds-markdown 0.1.10-beta.1 → 0.1.10-beta.3

package/README.en.md

@@ -9,66 +9,72 @@ A React component designed specifically for modern AI applications, providing sm
 [![npm version](https://img.shields.io/npm/v/ds-markdown)](https://www.npmjs.com/package/ds-markdown)
 [![npm downloads](https://img.shields.io/npm/dm/ds-markdown.svg)](https://www.npmjs.com/package/ds-markdown)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/ds-markdown)](https://bundlephobia.com/package/ds-markdown)
-[![React](https://img.shields.io/badge/React-16.8+-blue)](https://react.dev)
+[![React](https://img.shields.io/badge/React-18.0.0+-blue)](https://react.dev)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)
 
-[📖 Live Demo](https://onshinpei.github.io/ds-markdown/)
+- [Documentation](https://onshinpei.github.io/ds-markdown/)
+- Usage Examples
+  - [Basic Usage](https://stackblitz.com/edit/vitejs-vite-ddfw8avb?file=src%2FApp.tsx)
+  - [Streaming Data Usage](https://stackblitz.com/edit/vitejs-vite-2ri8kex3?file=src%2FApp.tsx)
+  - [Mermaid Charts](https://stackblitz.com/edit/vitejs-vite-iqbyta3j?file=index.html)
+  - [Math Formula Demo 1](https://stackblitz.com/edit/vitejs-vite-iqbyta3j?file=index.html)
+  - [Math Formula Demo 2](https://stackblitz.com/edit/vitejs-vite-xk9lxagc?file=src%2FApp.tsx)
 
-[DEMO：🔧 StackBlitz Experience](https://stackblitz.com/edit/vitejs-vite-ddfw8avb?file=src%2FApp.tsx)
-
-**If you want a pure react markdown typing component, you can use [react-markdown-typer](https://github.com/onshinpei/react-markdown-typer)**
-
----
-
-## 📋 Table of Contents
-
-- [✨ Core Features](#-core-features)
-- [📦 Quick Installation](#-quick-installation)
-- [🚀 5-Minute Quick Start](#-5-minute-quick-start)
-  - [Basic Usage](#basic-usage)
-  - [Disable Typing Animation](#disable-typing-animation)
-  - [Mathematical Formula Support](#mathematical-formula-support)
-  - [AI Conversation Scenario](#ai-conversation-scenario)
-  - [🎯 Advanced Callback Control](#-advanced-callback-control)
-  - [🔄 Restart Animation Demo](#-restart-animation-demo)
-  - [▶️ Manual Start Animation Demo](#️-manual-start-animation-demo)
-- [📚 Complete API Documentation](#-complete-api-documentation)
-- [🧮 Mathematical Formula Usage Guide](#-mathematical-formula-usage-guide)
-- [🔌 Plugin System](#-plugin-system)
-- [🎛️ Timer Mode Details](#️-timer-mode-details)
-- [💡 Practical Examples](#-practical-examples)
-- [🔧 Best Practices](#-best-practices)
-- [ConfigProvider Internationalization (i18n)](<#ConfigProvider-Internationalization-(i18n)>)
+If you want a pure `react markdown` typing component, you can use [react-markdown-typer](https://github.com/onshinpei/react-markdown-typer)
 
 ---
 
 ## ❓ Why use ds-markdown?
 
 - **Ultimate AI Chat Experience**  
-  Faithfully recreates the typing animation and streaming response of leading AI chat interfaces (like DeepSeek), delivering a truly immersive "AI is thinking/answering" experience.
+  1:1 recreation of DeepSeek and other mainstream AI chat interface typing animations and streaming responses, delivering an authentic "AI is thinking/answering" experience that greatly enhances user immersion.
 
 - **Perfect for Streaming Backend Data**  
-  Many AI/LLM backends (OpenAI, DeepSeek, etc.) send data chunks containing multiple characters at once.  
-  **ds-markdown automatically splits each chunk into single characters and animates them one by one, ensuring smooth typing even if the backend sends several characters at a time.**
+  Many AI/LLM backend interfaces (like OpenAI, DeepSeek, etc.) push data chunks containing multiple characters at once, which can cause stuttering and character jumping issues with ordinary typewriter implementations.  
+  **ds-markdown automatically splits each chunk into single characters and renders them one by one with smooth animations, ensuring fluent typing regardless of how many characters the backend pushes at once.**
+
+- **Complete Markdown & Math Formula, Diagram Support**
 
-- **Full Markdown & Math Formula Support**  
-  Built-in KaTeX, supports all major Markdown syntax and math formulas—ideal for technical Q&A, education, and knowledge bases.
+  - Built-in KaTeX, supporting all mainstream Markdown syntax and math formulas, suitable for technical Q&A, education, knowledge bases, and other content-rich applications.
+  - Support for `Diagram` rendering through the [mermaid-plugin](https://github.com/onshinpei/ds-markdown-mermaid-plugin)
 
 - **Excellent Developer Experience**  
-  Rich imperative API, supports streaming data, async callbacks, and plugin extensions for flexible animation and content control.
+  Rich imperative API, supporting streaming data, async callbacks, and plugin extensions, allowing developers to flexibly control animations and content.
 
 - **Lightweight & High Performance**  
-  Small bundle size, fast, mobile and desktop ready. The only core dependency is [react-markdown](https://github.com/remarkjs/react-markdown) (a widely used, mature Markdown renderer). No other heavy dependencies—works out of the box.
+  Small size, excellent performance, compatible with mobile and desktop. Core dependency is [react-markdown](https://github.com/remarkjs/react-markdown) (industry mainstream, mature Markdown rendering library), with no other heavyweight dependencies - works out of the box.
 
 - **Multi-theme & Plugin Architecture**  
-  Light/dark theme switching, remark/rehype plugin compatibility, and advanced extensibility.
+  Support for light/dark theme switching, compatible with remark/rehype plugins, meeting personalized and advanced extension needs.
+
+- **Rich UI Component System** 🆕  
+  Built-in UI components: Button, IconButton, ToolTip, Segmented, etc., supporting code block copy, download, and other interactive features.
 
 - **Wide Range of Use Cases**
   - AI chatbots/assistants
   - Real-time Q&A/knowledge bases
-  - Education/math/programming content
-  - Product demos, interactive docs
-  - Any scenario needing "typewriter" animation and streaming Markdown rendering
+  - Education/math/programming content display
+  - Product demos, interactive documentation
+  - Any scenario requiring "typewriter" animation and streaming Markdown rendering
+
+---
+
+## 📋 Table of Contents
+
+- [✨ Core Features](#-core-features)
+- [📦 Quick Installation](#-quick-installation)
+- [🚀 5-Minute Quick Start](#-5-minute-quick-start)
+  - [Basic Usage](#basic-usage)
+  - [Disable Typing Animation](#disable-typing-animation)
+  - [Mathematical Formula Support](#mathematical-formula-support)
+  - [AI Conversation Scenario](#ai-conversation-scenario)
+  - [Code Block Features](#code-block-features) 🆕
+  - [Mermaid Chart Support](#mermaid-chart-support) 🆕
+- [📚 Complete API Documentation](#-complete-api-documentation)
+- [🔌 Plugin System](#-plugin-system)
+- [🎨 UI Component System](#-ui-component-system) 🆕
+- [💡 Practical Examples](#-practical-examples)
+- [🔧 Best Practices](#-best-practices)
 
 ---
 
@@ -84,13 +90,21 @@ A React component designed specifically for modern AI applications, providing sm
 
 - Complete Markdown syntax support, including code highlighting, tables, lists, etc.
 - Mathematical formula rendering (KaTeX), supporting `$...$` and `\[...\]` syntax
-- Light/dark theme support, adapting to different product styles
+- Mermaid chart support, including flowcharts, sequence diagrams, Gantt charts, class diagrams, etc. 🆕
+- Support for light/dark themes, adapting to different product styles
 - Plugin architecture supporting remark/rehype plugin extensions
 
+### 🎨 **UI Component System** 🆕
+
+- Built-in rich UI components: Button, IconButton, ToolTip, Segmented, etc.
+- Code block enhancement features: copy, download, language identification
+- Complete interactive experience and accessibility support
+
 ### 🔧 **Developer Experience**
 
 - Support for typing interruption `stop` and resume `resume`
-- Support for disabling and enabling typing
+- Support for enabling and disabling typing
+- Complete TypeScript type support
 
 ### 🎬 **Smooth Animation**
 
@@ -238,223 +252,81 @@ Let's explore these new features together!`);
 }
 ```
 
-### 🎯 Advanced Callback Control
+### Code Block Features 🆕
 
 ```tsx
-import { useRef, useState } from 'react';
-import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
-
-function AdvancedCallbackDemo() {
-  const markdownRef = useRef<MarkdownCMDRef>(null);
-  const [typingStats, setTypingStats] = useState({ progress: 0, currentChar: '', totalChars: 0 });
-
-  const handleBeforeTypedChar = async (data) => {
-    // Perform async operations before character typing
-    console.log('About to type:', data.currentChar);
-
-    // Can perform network requests, data validation, etc.
-    if (data.currentChar === '!') {
-      await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate delay
-    }
-  };
-
-  const handleTypedChar = (data) => {
-    // Update typing statistics
-    setTypingStats({
-      progress: Math.round(data.percent),
-      currentChar: data.currentChar,
-      totalChars: data.currentIndex + 1,
-    });
-
-    // Can add sound effects, animations, etc.
-    if (data.currentChar === '.') {
-      // Play period sound effect
-      console.log('Play period sound effect');
-    }
-  };
-
-  const handleStart = (data) => {
-    console.log('Start typing:', data.currentChar);
-  };
-
-  const handleEnd = (data) => {
-    console.log('Typing complete:', data.str);
-  };
-
-  const startDemo = () => {
-    markdownRef.current?.clear();
-    markdownRef.current?.push(
-      '# Advanced Callback Demo\n\n' +
-        'This example shows how to use `onBeforeTypedChar` and `onTypedChar` callbacks:\n\n' +
-        '- 🎯 **Pre-typing callback**: Can perform async operations before character display\n' +
-        '- 📊 **Post-typing callback**: Can update progress in real-time and add effects\n' +
-        '- ⚡ **Performance optimization**: Supports async operations without affecting typing smoothness\n\n' +
-        'Current progress: ' +
-        typingStats.progress +
-        '%\n' +
-        'Characters typed: ' +
-        typingStats.totalChars +
-        '\n\n' +
-        'This is a very powerful feature!',
-      'answer',
-    );
-  };
-
-  return (
-    <div>
-      <button onClick={startDemo}>🚀 Start Advanced Demo</button>
+import DsMarkdown from 'ds-markdown';
+import 'ds-markdown/style.css';
 
-      <div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
-        <strong>Typing Stats:</strong> Progress {typingStats.progress}% | Current char: "{typingStats.currentChar}" | Total chars: {typingStats.totalChars}
-      </div>
+function CodeBlockDemo() {
+  const codeContent = `# Hello World
 
-      <MarkdownCMD ref={markdownRef} interval={30} onBeforeTypedChar={handleBeforeTypedChar} onTypedChar={handleTypedChar} onStart={handleStart} onEnd={handleEnd} />
-    </div>
-  );
+\`\`\`javascript
+function greet(name) {
+  console.log(\`Hello, \${name}!\`);
 }
-```
-
-### 🔄 Restart Animation Demo
-
-```tsx
-import { useRef, useState } from 'react';
-import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
-
-function RestartDemo() {
-  const markdownRef = useRef<MarkdownCMDRef>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [hasStarted, setHasStarted] = useState(false);
-
-  const startContent = () => {
-    markdownRef.current?.clear();
-    markdownRef.current?.push(
-      '# Restart Animation Demo\n\n' +
-        'This example shows how to use the `restart()` method:\n\n' +
-        '- 🔄 **Restart**: Play current content from the beginning\n' +
-        '- ⏸️ **Pause/Resume**: Can pause and resume at any time\n' +
-        '- 🎯 **Precise Control**: Complete control over animation playback state\n\n' +
-        'Current state: ' +
-        (isPlaying ? 'Playing' : 'Paused') +
-        '\n\n' +
-        'This is a very practical feature!',
-      'answer',
-    );
-    setIsPlaying(true);
-  };
 
-  const handleStart = () => {
-    if (hasStarted) {
-      // If already started, restart
-      markdownRef.current?.restart();
-    } else {
-      // First time start
-      markdownRef.current?.start();
-      setHasStarted(true);
-    }
-    setIsPlaying(true);
-  };
-
-  const handleStop = () => {
-    markdownRef.current?.stop();
-    setIsPlaying(false);
-  };
-
-  const handleResume = () => {
-    markdownRef.current?.resume();
-    setIsPlaying(true);
-  };
+greet('ds-markdown');
+\`\`\`
 
-  const handleRestart = () => {
-    markdownRef.current?.restart();
-    setIsPlaying(true);
-  };
-
-  const handleEnd = () => {
-    setIsPlaying(false);
-  };
+Supports code highlighting, copy, and download features!`;
 
   return (
-    <div>
-      <div style={{ marginBottom: '10px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        <button onClick={startContent}>🚀 Start Content</button>
-        <button onClick={handleStart} disabled={isPlaying}>
-          {hasStarted ? '🔄 Restart' : '▶️ Start'}
-        </button>
-        <button onClick={handleStop} disabled={!isPlaying}>
-          ⏸️ Pause
-        </button>
-        <button onClick={handleResume} disabled={isPlaying}>
-          ▶️ Resume
-        </button>
-        <button onClick={handleRestart}>🔄 Restart</button>
-      </div>
-
-      <div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
-        <strong>Animation State:</strong> {isPlaying ? '🟢 Playing' : '🔴 Paused'}
-      </div>
-
-      <MarkdownCMD ref={markdownRef} interval={25} onEnd={handleEnd} />
-    </div>
+    <DsMarkdown
+      interval={20}
+      answerType="answer"
+      codeBlock={{
+        headerActions: true, // Enable code block header action buttons
+      }}
+    >
+      {codeContent}
+    </DsMarkdown>
   );
 }
 ```
 
-### ▶️ Manual Start Animation Demo
+### Mermaid Chart Support 🆕
 
 ```tsx
-import { useRef, useState } from 'react';
-import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
-
-function StartDemo() {
-  const markdownRef = useRef<MarkdownCMDRef>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [hasStarted, setHasStarted] = useState(false);
-
-  const loadContent = () => {
-    markdownRef.current?.clear();
-    markdownRef.current?.push(
-      '# Manual Start Animation Demo\n\n' +
-        'This example shows how to use the `start()` method:\n\n' +
-        '- 🎯 **Manual Control**: When `autoStartTyping=false`, need to manually call `start()`\n' +
-        '- ⏱️ **Delayed Start**: Can start animation after user interaction\n' +
-        '- 🎮 **Gamification**: Suitable for scenarios requiring user initiative\n\n' +
-        'Click the "Start Animation" button to manually trigger the typing effect!',
-      'answer',
-    );
-    setIsPlaying(false);
-  };
-
-  const handleStart = () => {
-    if (hasStarted) {
-      // If already started, restart
-      markdownRef.current?.restart();
-    } else {
-      // First time start
-      markdownRef.current?.start();
-      setHasStarted(true);
-    }
-    setIsPlaying(true);
-  };
+import DsMarkdown from 'ds-markdown';
+import { ConfigProvider } from 'ds-markdown';
+import mermaidPlugin from 'ds-markdown-mermaid-plugin';
+import 'ds-markdown/style.css';
 
-  const handleEnd = () => {
-    setIsPlaying(false);
-  };
+function MermaidDemo() {
+  const chartContent = `# Flowchart Example
+
+\`\`\`mermaid
+flowchart TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Process A]
+    B -->|No| D[Process B]
+    C --> E[End]
+    D --> E
+\`\`\`
+
+## Sequence Diagram Example
+
+\`\`\`mermaid
+sequenceDiagram
+    participant User
+    participant System
+    participant Database
+    
+    User->>System: Login Request
+    System->>Database: Verify User
+    Database-->>System: Return Result
+    System-->>User: Login Response
+\`\`\`
+
+Supports flowcharts, sequence diagrams, Gantt charts, class diagrams, and many other chart types!`;
 
   return (
-    <div>
-      <div style={{ marginBottom: '10px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        <button onClick={loadContent}>📝 Load Content</button>
-        <button onClick={handleStart} disabled={isPlaying}>
-          {hasStarted ? '🔄 Restart' : '▶️ Start Animation'}
-        </button>
-      </div>
-
-      <div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
-        <strong>State:</strong> {isPlaying ? '🟢 Animation Playing' : '🔴 Waiting to Start'}
-      </div>
-
-      <MarkdownCMD ref={markdownRef} interval={30} autoStartTyping={false} onEnd={handleEnd} />
-    </div>
+    <ConfigProvider>
+      <DsMarkdown interval={20} answerType="answer" plugins={[mermaidPlugin]}>
+        {chartContent}
+      </DsMarkdown>
+    </ConfigProvider>
   );
 }
 ```
@@ -472,8 +344,8 @@ import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
 | Property            | Type                                        | Description                                                                        | Default                                                                       |
 | ------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
 | `interval`          | `number`                                    | Typing interval (milliseconds)                                                     | `30`                                                                          |
-| `timerType`         | `'setTimeout'` \| `'requestAnimationFrame'` | Timer type                                                                         | Current default is `setTimeout`, will change to `requestAnimationFrame` later |
-| `answerType`        | `'thinking'` \| `'answer'`                  | Content type (affects styling)                                                     | `'answer'`                                                                    |
+| `timerType`         | `'setTimeout'` \| `'requestAnimationFrame'` | Timer type, cannot be modified dynamically                                         | Current default is `setTimeout`, will change to `requestAnimationFrame` later |
+| `answerType`        | `'thinking'` \| `'answer'`                  | Content type (affects styling), cannot be modified dynamically                     | `'answer'`                                                                    |
 | `theme`             | `'light'` \| `'dark'`                       | Theme type                                                                         | `'light'`                                                                     |
 | `plugins`           | `IMarkdownPlugin[]`                         | Plugin configuration                                                               | `[]`                                                                          |
 | `math`              | [IMarkdownMath](#IMarkdownMath)             | Mathematical formula config                                                        | `{ splitSymbol: 'dollar' }`                                                   |
@@ -483,6 +355,7 @@ import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
 | `onTypedChar`       | `(data: ITypedChar) => void`                | Character typing post-callback                                                     | -                                                                             |
 | `disableTyping`     | `boolean`                                   | Disable typing animation                                                           | `false`                                                                       |
 | `autoStartTyping`   | `boolean`                                   | Whether to auto-start typing animation, set to false for manual trigger            | `true`                                                                        |
+| `codeBlock`         | `IMarkdownCode`                             | Code block configuration                                                           | `{headerActions: true}`                                                       |
 
 > Note: If `disableTyping` changes from `true` to `false` during typing, all remaining characters will be displayed at once on the next typing trigger.
 
@@ -518,14 +391,21 @@ import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
 - `'dollar'`: Uses `$...$` and `$$...$$` syntax
 - `'bracket'`: Uses `\(...\)` and `\[...\]` syntax
 
+#### IMarkdownCode 🆕
+
+| Property        | Type      | Description                | Default |
+| --------------- | --------- | -------------------------- | ------- |
+| `headerActions` | `boolean` | Show header action buttons | `true`  |
+
 #### IMarkdownPlugin
 
-| Property       | Type                      | Description      | Default |
-| -------------- | ------------------------- | ---------------- | ------- |
-| `remarkPlugin` | `unknown`                 | remark plugin    | -       |
-| `rehypePlugin` | `unknown`                 | rehype plugin    | -       |
-| `type`         | `'buildIn'` \| `'custom'` | Plugin type      | -       |
-| `id`           | `any`                     | Plugin unique ID | -       |
+| Property       | Type                                           | Description                 | Default |
+| -------------- | ---------------------------------------------- | --------------------------- | ------- |
+| `remarkPlugin` | `Pluggable`                                    | remark plugin               | -       |
+| `rehypePlugin` | `Pluggable`                                    | rehype plugin               | -       |
+| `type`         | `'buildIn'` \| `'custom'`                      | Plugin type                 | -       |
+| `id`           | `any`                                          | Plugin unique identifier    | -       |
+| `components`   | `Record<string, React.ComponentType<unknown>>` | Custom component mapping 🆕 | -       |
 
 ### Component Exposed Methods
 
@@ -561,106 +441,97 @@ markdownRef.current?.restart(); // Restart animation
 
 ---
 
-## 🧮 Mathematical Formula Usage Guide
+## 🔌 Plugin System
 
-[DEMO1: Pythagorean Theorem](https://stackblitz.com/edit/vitejs-vite-z94syu8j?file=src%2FApp.tsx)
+### Built-in Plugins
 
-[DEMO2: Problem Solving](https://stackblitz.com/edit/vitejs-vite-xk9lxagc?file=README.md)
+#### KaTeX Mathematical Formula Plugin
 
-### Basic Syntax
+[DEMO](https://stackblitz.com/edit/vitejs-vite-iqbyta3j?file=index.html)
 
 ```tsx
 import { katexPlugin } from 'ds-markdown/plugins';
 
-// 1. Enable mathematical formula support
-<DsMarkdown plugins={[katexPlugin]}>
-  # Mathematical Formula Example
-
-  // Inline formula
-  This is an inline formula: $E = mc^2$
-
-  // Block formula
-  $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
-</DsMarkdown>
+// Enable mathematical formula support
+<DsMarkdown plugins={[katexPlugin]}>Mathematical formula: $E = mc^2$</DsMarkdown>;
 ```
 
-### Delimiter Selection
-
-```tsx
-// Using dollar sign delimiters (default)
-<DsMarkdown
-  plugins={[katexPlugin]}
-  math={{ splitSymbol: 'dollar' }}
->
-  Inline: $a + b = c$
-  Block: $$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$
-</DsMarkdown>
-
-// Using bracket delimiters
-<DsMarkdown
-  plugins={[katexPlugin]}
-  math={{ splitSymbol: 'bracket' }}
->
-  Inline: \(a + b = c\)
-  Block: \[\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n\]
-</DsMarkdown>
-```
+#### Mermaid Chart Plugin 🆕
 
-### Streaming Mathematical Formulas
+**Install Mermaid plugin:**
 
-```tsx
-// Perfect support for mathematical formulas in streaming output
-const mathContent = [
-  'Pythagorean Theorem:',
-  '$a^2 + b^2 = c^2$',
-  '\n\n',
-  'Where:',
-  '- $a$ and $b$ are the legs\n',
-  '- $c$ is the hypotenuse\n\n',
-  'For the classic "3-4-5" triangle:\n',
-  '$c = \\sqrt{3^2 + 4^2} = \\sqrt{25} = 5$\n\n',
-  'This theorem has wide applications in geometry!',
-];
-
-mathContent.forEach((chunk) => {
-  markdownRef.current?.push(chunk, 'answer');
-});
+```bash
+npm install ds-markdown-mermaid-plugin
 ```
 
-### Style Customization
+**Basic usage:**
 
-```css
-/* Mathematical formula style customization */
-.katex {
-  font-size: 1.1em;
-}
+```tsx
+import { ConfigProvider, Markdown } from 'ds-markdown';
+import mermaidPlugin from 'ds-markdown-mermaid-plugin';
 
-.katex-display {
-  margin: 1em 0;
-  text-align: center;
-}
+function App() {
+  const content = `
+# Flowchart Example
+
+\`\`\`mermaid
+flowchart TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Process A]
+    B -->|No| D[Process B]
+    C --> E[End]
+    D --> E
+\`\`\`
+`;
 
-/* Dark theme adaptation */
-[data-theme='dark'] .katex {
-  color: #e1e1e1;
+  return (
+    <ConfigProvider>
+      <Markdown plugins={[mermaidPlugin]}>{content}</Markdown>
+    </ConfigProvider>
+  );
 }
 ```
 
----
-
-## 🔌 Plugin System
+**Supported chart types:**
 
-### Built-in Plugins
+- 🔄 **Flowchart** - Display processes and decision paths
+- 📋 **Sequence Diagram** - Display interaction timing between objects
+- 📅 **Gantt Chart** - Project planning and timelines
+- 🏗️ **Class Diagram** - Object-oriented design
+- 🥧 **Pie Chart** - Data proportion display
+- 🔀 **State Diagram** - State transition processes
+- 📊 **Git Graph** - Code branch history
+- 🗺️ **User Journey** - User experience processes
 
-#### KaTeX Mathematical Formula Plugin
+**Configure Mermaid:**
 
 ```tsx
-import { katexPlugin } from 'ds-markdown/plugins';
+import { ConfigProvider } from 'ds-markdown';
 
-// Enable mathematical formula support
-<DsMarkdown plugins={[katexPlugin]}>Mathematical formula: $E = mc^2$</DsMarkdown>;
+const mermaidConfig = {
+  theme: 'default', // Themes: default, neutral, dark, forest
+  flowchart: {
+    useMaxWidth: true,
+    htmlLabels: true,
+  },
+  sequence: {
+    diagramMarginX: 50,
+    diagramMarginY: 10,
+  },
+};
+
+return (
+  <ConfigProvider mermaidConfig={mermaidConfig}>
+    <Markdown plugins={[mermaidPlugin]}>{chartContent}</Markdown>
+  </ConfigProvider>
+);
 ```
 
+**Related links:**
+
+- [ds-markdown-mermaid-plugin GitHub](https://github.com/onshinpei/ds-markdown-mermaid-plugin)
+- [Mermaid Official Documentation](https://mermaid.js.org/)
+
 ### Custom Plugins
 
 ```tsx
@@ -671,6 +542,10 @@ const customPlugin = createBuildInPlugin({
   remarkPlugin: yourRemarkPlugin,
   rehypePlugin: yourRehypePlugin,
   id: Symbol('custom-plugin'),
+  components: {
+    // Custom component mapping 🆕
+    CustomComponent: MyCustomComponent,
+  },
 });
 
 // Use custom plugin
@@ -679,50 +554,76 @@ const customPlugin = createBuildInPlugin({
 
 ---
 
-## 🎛️ Timer Mode Details
+## 🎨 UI Component System 🆕
 
-### `requestAnimationFrame` Mode 🌟 (Recommended)
+ds-markdown provides rich UI components that can be used independently or in combination with markdown components.
 
-```typescript
-// 🎯 Features
-- Time-driven: Calculates character count based on actual elapsed time
-- Batch processing: Can process multiple characters in a single frame
-- Frame-synchronized: Syncs with browser 60fps refresh rate
-- High-frequency optimized: Perfect support for interval < 16ms high-speed typing
+### Core Components
 
-// 🎯 Use Cases
-- Default choice for modern web applications
-- Pursuit of smooth animation effects
-- High-frequency typing (interval > 0 works)
-- AI real-time conversation scenarios
-```
+```tsx
+import {
+  Button,
+  IconButton,
+  ToolTip,
+  Segmented,
+  CopyButton,
+  DownloadButton
+} from 'ds-markdown';
+
+// Button component
+<Button icon={<span>📄</span>} onClick={() => {}}>
+  Click Button
+</Button>
+
+// Tooltip
+<ToolTip title="Tooltip information">
+  <IconButton icon={<span>📋</span>} onClick={() => {}} />
+</ToolTip>
+
+// Segmented controller
+<Segmented
+  Segmented={[
+    { label: 'Chart', value: 'diagram' },
+    { label: 'Code', value: 'code' }
+  ]}
+  value={value}
+  onChange={setValue}
+/>
 
-### `setTimeout` Mode 📟 (Compatible)
+// Code block operations
+<CopyButton codeContent="console.log('Hello')" />
+<DownloadButton codeContent="console.log('Hello')" language="javascript" />
+```
 
-```typescript
-// 🎯 Features
-- Single character: Precisely processes one character at a time
-- Fixed interval: Strictly executes at set time intervals
-- Rhythmic: Classic typewriter rhythm feel
-- Precise control: Suitable for specific timing requirements
+### Style Customization
 
-// 🎯 Use Cases
-- Need precise timing control
-- Creating retro typewriter effects
-- Scenarios with high compatibility requirements
+```css
+:root {
+  --ds-button-bg-color: #f5f5f5;
+  --ds-button-hover-color: #e0e0e0;
+  --ds-tooltip-bg-color: rgba(0, 0, 0, 0.8);
+}
 ```
 
-### 📊 Performance Comparison
+---
+
+## Internationalization Configuration
+
+```tsx
+import { ConfigProvider } from 'ds-markdown';
+import zhCN from 'ds-markdown/i18n/zh';
+import enUS from 'ds-markdown/i18n/en';
 
-| Feature                  | requestAnimationFrame               | setTimeout              |
-| ------------------------ | ----------------------------------- | ----------------------- |
-| **Character Processing** | Multiple characters per frame       | One character at a time |
-| **High Frequency**       | ✅ Excellent (5ms → 3 chars/frame)  | ❌ May lag              |
-| **Low Frequency**        | ✅ Normal (100ms → 1 char/6 frames) | ✅ Precise              |
-| **Visual Effect**        | 🎬 Smooth animation feel            | ⚡ Precise rhythm feel  |
-| **Performance Overhead** | 🟢 Low (frame-synced)               | 🟡 Medium (timer)       |
+// Chinese
+<ConfigProvider locale={zhCN}>
+  <DsMarkdown {...props} />
+</ConfigProvider>
 
-High frequency recommended `requestAnimationFrame`, low frequency recommended `setTimeout`
+// English
+<ConfigProvider locale={enUS}>
+  <DsMarkdown {...props} />
+</ConfigProvider>
+```
 
 ---
 
@@ -732,7 +633,7 @@ High frequency recommended `requestAnimationFrame`, low frequency recommended `s
 
 [DEMO: 🔧 StackBlitz Experience](https://stackblitz.com/edit/vitejs-vite-2ri8kex3?file=src%2FApp.tsx)
 
-````tsx
+```tsx
 import { useRef } from 'react';
 import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
 
@@ -756,19 +657,6 @@ function StreamingChat() {
       '- 🎯 **Automatic optimization**: No need for manual memo and useMemo\n',
       '- ⚡ **Performance boost**: Compile-time optimization, zero runtime overhead\n',
       '- 🔧 **Backward compatible**: Existing code needs no modification\n\n',
-      '## 📝 Actions Simplify Forms\n',
-      'The new Actions API makes form handling simpler:\n\n',
-      '```tsx\n',
-      'function ContactForm({ action }) {\n',
-      '  const [state, formAction] = useActionState(action, null);\n',
-      '  return (\n',
-      '    <form action={formAction}>\n',
-      '      <input name="email" type="email" />\n',
-      '      <button>Submit</button>\n',
-      '    </form>\n',
-      '  );\n',
-      '}\n',
-      '```\n\n',
       'Hope this answer helps you! 🎉',
     ];
 
@@ -778,273 +666,12 @@ function StreamingChat() {
     }
   };
 
+  const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
   return (
     <div className="chat-container">
       <button onClick={simulateAIResponse}>🤖 Ask about React 19 features</button>
-
-      <MarkdownCMD ref={markdownRef} interval={10} timerType="requestAnimationFrame" onEnd={(data) => console.log('Section complete:', data)} />
-    </div>
-  );
-}
-
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-````
-
-### 🧮 Mathematical Formula Streaming Rendering
-
-```tsx
-import { katexPlugin } from 'ds-markdown/plugins';
-
-function MathStreamingDemo() {
-  const markdownRef = useRef<MarkdownCMDRef>(null);
-
-  const simulateMathResponse = async () => {
-    markdownRef.current?.clear();
-
-    const mathChunks = [
-      '# Pythagorean Theorem Explained\n\n',
-      'In a right triangle, the square of the hypotenuse equals the sum of squares of the two legs:\n\n',
-      '$a^2 + b^2 = c^2$\n\n',
-      'Where:\n',
-      '- $a$ and $b$ are the legs\n',
-      '- $c$ is the hypotenuse\n\n',
-      'For the classic "3-4-5" triangle:\n',
-      '$c = \\sqrt{3^2 + 4^2} = \\sqrt{25} = 5$\n\n',
-      'This theorem has wide applications in geometry!',
-    ];
-
-    for (const chunk of mathChunks) {
-      await delay(150);
-      markdownRef.current?.push(chunk, 'answer');
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={simulateMathResponse}>📐 Explain Pythagorean Theorem</button>
-
-      <MarkdownCMD ref={markdownRef} interval={20} timerType="requestAnimationFrame" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }} />
-    </div>
-  );
-}
-```
-
-### 🎯 Advanced Callback Control
-
-```tsx
-import { useRef, useState } from 'react';
-import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
-
-function AdvancedCallbackDemo() {
-  const markdownRef = useRef<MarkdownCMDRef>(null);
-  const [typingStats, setTypingStats] = useState({ progress: 0, currentChar: '', totalChars: 0 });
-
-  const handleBeforeTypedChar = async (data) => {
-    // Perform async operations before character typing
-    console.log('About to type:', data.currentChar);
-
-    // Can perform network requests, data validation, etc.
-    if (data.currentChar === '!') {
-      await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate delay
-    }
-  };
-
-  const handleTypedChar = (data) => {
-    // Update typing statistics
-    setTypingStats({
-      progress: Math.round(data.percent),
-      currentChar: data.currentChar,
-      totalChars: data.currentIndex + 1,
-    });
-
-    // Can add sound effects, animations, etc.
-    if (data.currentChar === '.') {
-      // Play period sound effect
-      console.log('Play period sound effect');
-    }
-  };
-
-  const handleStart = (data) => {
-    console.log('Start typing:', data.currentChar);
-  };
-
-  const handleEnd = (data) => {
-    console.log('Typing complete:', data.str);
-  };
-
-  const startDemo = () => {
-    markdownRef.current?.clear();
-    markdownRef.current?.push(
-      '# Advanced Callback Demo\n\n' +
-        'This example shows how to use `onBeforeTypedChar` and `onTypedChar` callbacks:\n\n' +
-        '- 🎯 **Pre-typing callback**: Can perform async operations before character display\n' +
-        '- 📊 **Post-typing callback**: Can update progress in real-time and add effects\n' +
-        '- ⚡ **Performance optimization**: Supports async operations without affecting typing smoothness\n\n' +
-        'Current progress: ' +
-        typingStats.progress +
-        '%\n' +
-        'Characters typed: ' +
-        typingStats.totalChars +
-        '\n\n' +
-        'This is a very powerful feature!',
-      'answer',
-    );
-  };
-
-  return (
-    <div>
-      <button onClick={startDemo}>🚀 Start Advanced Demo</button>
-
-      <div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
-        <strong>Typing Stats:</strong> Progress {typingStats.progress}% | Current char: "{typingStats.currentChar}" | Total chars: {typingStats.totalChars}
-      </div>
-
-      <MarkdownCMD ref={markdownRef} interval={30} onBeforeTypedChar={handleBeforeTypedChar} onTypedChar={handleTypedChar} onStart={handleStart} onEnd={handleEnd} />
-    </div>
-  );
-}
-```
-
-### 🔄 Restart Animation Demo
-
-```tsx
-import { useRef, useState } from 'react';
-import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
-
-function RestartDemo() {
-  const markdownRef = useRef<MarkdownCMDRef>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [hasStarted, setHasStarted] = useState(false);
-
-  const startContent = () => {
-    markdownRef.current?.clear();
-    markdownRef.current?.push(
-      '# Restart Animation Demo\n\n' +
-        'This example shows how to use the `restart()` method:\n\n' +
-        '- 🔄 **Restart**: Play current content from the beginning\n' +
-        '- ⏸️ **Pause/Resume**: Can pause and resume at any time\n' +
-        '- 🎯 **Precise Control**: Complete control over animation playback state\n\n' +
-        'Current state: ' +
-        (isPlaying ? 'Playing' : 'Paused') +
-        '\n\n' +
-        'This is a very practical feature!',
-      'answer',
-    );
-    setIsPlaying(true);
-  };
-
-  const handleStart = () => {
-    if (hasStarted) {
-      // If already started, restart
-      markdownRef.current?.restart();
-    } else {
-      // First time start
-      markdownRef.current?.start();
-      setHasStarted(true);
-    }
-    setIsPlaying(true);
-  };
-
-  const handleStop = () => {
-    markdownRef.current?.stop();
-    setIsPlaying(false);
-  };
-
-  const handleResume = () => {
-    markdownRef.current?.resume();
-    setIsPlaying(true);
-  };
-
-  const handleRestart = () => {
-    markdownRef.current?.restart();
-    setIsPlaying(true);
-  };
-
-  const handleEnd = () => {
-    setIsPlaying(false);
-  };
-
-  return (
-    <div>
-      <div style={{ marginBottom: '10px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        <button onClick={startContent}>🚀 Start Content</button>
-        <button onClick={handleStart} disabled={isPlaying}>
-          {hasStarted ? '🔄 Restart' : '▶️ Start'}
-        </button>
-        <button onClick={handleStop} disabled={!isPlaying}>
-          ⏸️ Pause
-        </button>
-        <button onClick={handleResume} disabled={isPlaying}>
-          ▶️ Resume
-        </button>
-        <button onClick={handleRestart}>🔄 Restart</button>
-      </div>
-
-      <div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
-        <strong>Animation State:</strong> {isPlaying ? '🟢 Playing' : '🔴 Paused'}
-      </div>
-
-      <MarkdownCMD ref={markdownRef} interval={25} onEnd={handleEnd} />
-    </div>
-  );
-}
-```
-
-### ▶️ Manual Start Animation Demo
-
-```tsx
-import { useRef, useState } from 'react';
-import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
-
-function StartDemo() {
-  const markdownRef = useRef<MarkdownCMDRef>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [hasStarted, setHasStarted] = useState(false);
-
-  const loadContent = () => {
-    markdownRef.current?.clear();
-    markdownRef.current?.push(
-      '# Manual Start Animation Demo\n\n' +
-        'This example shows how to use the `start()` method:\n\n' +
-        '- 🎯 **Manual Control**: When `autoStartTyping=false`, need to manually call `start()`\n' +
-        '- ⏱️ **Delayed Start**: Can start animation after user interaction\n' +
-        '- 🎮 **Gamification**: Suitable for scenarios requiring user initiative\n\n' +
-        'Click the "Start Animation" button to manually trigger the typing effect!',
-      'answer',
-    );
-    setIsPlaying(false);
-  };
-
-  const handleStart = () => {
-    if (hasStarted) {
-      // If already started, restart
-      markdownRef.current?.restart();
-    } else {
-      // First time start
-      markdownRef.current?.start();
-      setHasStarted(true);
-    }
-    setIsPlaying(true);
-  };
-
-  const handleEnd = () => {
-    setIsPlaying(false);
-  };
-
-  return (
-    <div>
-      <div style={{ marginBottom: '10px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        <button onClick={loadContent}>📝 Load Content</button>
-        <button onClick={handleStart} disabled={isPlaying}>
-          {hasStarted ? '🔄 Restart' : '▶️ Start Animation'}
-        </button>
-      </div>
-
-      <div style={{ margin: '10px 0', padding: '10px', background: '#f5f5f5', borderRadius: '4px' }}>
-        <strong>State:</strong> {isPlaying ? '🟢 Animation Playing' : '🔴 Waiting to Start'}
-      </div>
-
-      <MarkdownCMD ref={markdownRef} interval={30} autoStartTyping={false} onEnd={handleEnd} />
+      <MarkdownCMD ref={markdownRef} interval={10} timerType="requestAnimationFrame" />
     </div>
   );
 }
@@ -1060,9 +687,6 @@ function StartDemo() {
   timerType="requestAnimationFrame"
   interval={15} // 15-30ms for best experience
 />
-
-// ❌ Avoid too small intervals
-<DsMarkdown interval={1} /> // May cause performance issues
 ```
 
 ### 2. Streaming Data Processing
@@ -1073,141 +697,31 @@ const ref = useRef<MarkdownCMDRef>(null);
 useEffect(() => {
   ref.current?.push(newChunk, 'answer');
 }, [newChunk]);
-
-// ❌ Avoid: Frequent children updates
-const [content, setContent] = useState('');
-// Each update re-parses the entire content
 ```
 
 ### 3. Mathematical Formula Optimization
 
 ```tsx
-// ✅ Recommended: Load math formula styles on demand
-import 'ds-markdown/style.css';
+// ✅ Recommended: Load on demand
+import { katexPlugin } from 'ds-markdown/plugins';
 import 'ds-markdown/katex.css'; // Only import when needed
 
-// ✅ Recommended: Use delimiters appropriately
-// For simple formulas, use $...$ for simplicity
-// For complex formulas, use $$...$$ for clarity
-
-// ✅ Recommended: Plugin configuration
-import { katexPlugin } from 'ds-markdown/plugins';
 <DsMarkdown plugins={[katexPlugin]}>Mathematical formula content</DsMarkdown>;
 ```
 
-### 4. Type Safety
+### 4. Mermaid Chart Best Practices 🆕
 
 ```tsx
-import { MarkdownCMDRef } from 'ds-markdown';
+// ✅ Recommended: Install plugin separately
+npm install ds-markdown-mermaid-plugin
 
-const ref = useRef<MarkdownCMDRef>(null);
-// Complete TypeScript type hints
-```
-
-## ConfigProvider Internationalization (i18n)
-
-ConfigProvider is a component provided by ds-markdown for managing internationalized text in your application.
-
-### Basic Usage
-
-```tsx
-import React from 'react';
-import { ConfigProvider } from 'ds-markdown';
-import zhCN from 'ds-markdown/i18n/zh';
-
-const App: React.FC = () => {
-  return (
-    <ConfigProvider locale={zhCN}>
-      <YourApp />
-    </ConfigProvider>
-  );
+// ✅ Recommended: Configure suitable theme
+const mermaidConfig = {
+  theme: 'default', // Choose based on application theme
+  flowchart: { useMaxWidth: true },
 };
-```
-
-### Available Locales
-
-#### Chinese (zhCN)
 
-```tsx
-import zhCN from 'ds-markdown/i18n/zh';
+<ConfigProvider mermaidConfig={mermaidConfig}>
+  <DsMarkdown plugins={[mermaidPlugin]} />
+</ConfigProvider>
 ```
-
-#### English (enUS)
-
-```tsx
-import enUS from 'ds-markdown/i18n/en';
-```
-
-### Using Locale in Components
-
-Use the `useLocale` hook to get the current locale:
-
-```tsx
-import React from 'react';
-import { useLocale } from 'ds-markdown';
-
-const MyComponent: React.FC = () => {
-  const locale = useLocale();
-
-  return (
-    <div>
-      <button>{locale.codeBlock.copy}</button>
-      <span>{locale.codeBlock.copied}</span>
-      <button>{locale.codeBlock.download}</button>
-    </div>
-  );
-};
-```
-
-### Locale Structure
-
-Currently supported locale fields:
-
-```typescript
-interface Locale {
-  codeBlock: {
-    copy: string;
-    copied: string;
-    download: string;
-  };
-  [key: string]: string;
-}
-```
-
-### Full Example
-
-```tsx
-import React from 'react';
-import { ConfigProvider, useLocale } from 'ds-markdown';
-import zhCN from 'ds-markdown/i18n/zh';
-
-const ExampleComponent: React.FC = () => {
-  const locale = useLocale();
-
-  return (
-    <div>
-      <h2>i18n Example</h2>
-      <p>Copy button: {locale.codeBlock.copy}</p>
-      <p>Copied tip: {locale.codeBlock.copied}</p>
-      <p>Download button: {locale.codeBlock.download}</p>
-    </div>
-  );
-};
-
-const App: React.FC = () => {
-  return (
-    <ConfigProvider locale={zhCN}>
-      <ExampleComponent />
-    </ConfigProvider>
-  );
-};
-
-export default App;
-```
-
-### Notes
-
-1. `ConfigProvider` must wrap components that use `useLocale`.
-2. The locale object is memoized to avoid unnecessary re-renders.
-3. You can extend the locale object with custom fields.
-4. If `ConfigProvider` is not provided, the default locale is Chinese.