让 DeepSeek 官网聊天界面支持内嵌渲染图表的浏览器扩展

综合介绍

DeepSeek Diagrams Extension是一款专为DeepSeek网站设计的Chrome浏览器扩展，旨在帮助用户在DeepSeek网站中内嵌渲染图表。该扩展基于Mermaid.js库，能够将文本描述的图表直接转换为可视化图表，提升用户在DeepSeek网站上的使用体验。通过这款扩展，用户可以轻松创建和查看流程图、序列图、甘特图等多种图表类型，极大地方便了数据的可视化和分析。

功能列表

• 图表渲染：支持在DeepSeek网站中内嵌渲染多种类型的图表，包括流程图、序列图、甘特图等。
• Mermaid.js集成：基于Mermaid.js库，支持使用Mermaid语法创建图表。
• 快速安装：简单的安装流程，用户可以快速上手使用。
• 实时预览：在DeepSeek网站中实时预览图表效果。
• 高兼容性：兼容最新版本的Chrome浏览器，确保稳定运行。

使用帮助

安装流程

1. 去 https://github.com/yan5xu/deepseek-diagrams-extension/releases

2. 下载最新的 zip 包

3. 打开 Chrome 扩展管理页面，在地址栏输入chrome://extensions/）

4. 右上角打开"开发者模式"

5. 点击“加载已解压的扩展程序”，选择项目的./dist文件夹。（把下载的 zip 拖进去就能用。）

使用方法

1. 安装完成后，访问DeepSeek网站。
2. 在需要渲染图表的地方，使用Mermaid语法编写图表描述。例如：

   sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>Alice: I am good thanks!

3. 图表描述完成后，点击“渲染图表”按钮，图表将自动生成并嵌入页面中。
4. 用户可以通过调整Mermaid语法，实时预览图表效果，直到满意为止。

主要功能操作流程

• 创建流程图：在DeepSeek网站的文本框中输入流程图的Mermaid语法描述，点击“渲染图表”按钮，即可生成流程图。
• 创建序列图：同样在文本框中输入序列图的Mermaid语法描述，点击“渲染图表”按钮，即可生成序列图。
• 创建甘特图：输入甘特图的Mermaid语法描述，点击“渲染图表”按钮，即可生成甘特图。

详细操作示例

1. 流程图示例：

   graph TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
B -->|No| D[Not OK]

输入上述代码后，点击“渲染图表”按钮，即可生成流程图。

2. 序列图示例：

   sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hello Bob, how are you?
Bob-->>Alice: I am good thanks!

输入上述代码后，点击“渲染图表”按钮，即可生成序列图。

3. 甘特图示例：

   gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d

输入上述代码后，点击“渲染图表”按钮，即可生成甘特图。

通过以上步骤，用户可以轻松在DeepSeek网站中创建和渲染各种图表，提升数据可视化效果。