Browser extension to enable DeepSeek official chat interface to support inline rendering charts

General Introduction

DeepSeek Diagrams Extension is a Chrome extension designed to help users render diagrams inline on the DeepSeek website. Based on the Mermaid.js library, the extension converts text-described diagrams directly into visual charts, enhancing the user experience on DeepSeek. With this extension, users can easily create and view flowcharts, sequence diagrams, Gantt charts and other chart types, greatly facilitating data visualization and analysis.

Function List

• Chart Rendering: Supports inline rendering of many types of charts in DeepSeek sites, including flowcharts, sequence charts, Gantt charts, etc.
• Mermaid.js Integration: Based on the Mermaid.js library , support for creating charts using Mermaid syntax .
• Quick Installation: A simple installation process that allows users to get up and running quickly.
• Real-time preview: Preview chart results in real time in the DeepSeek website.
• high compatibility: Compatible with the latest version of Chrome to ensure stable operation.

Using Help

Installation process

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

2. Download the latest zip package

3. Open the Chrome Extensions Management page and type chrome://extensions/ in the address bar.)

4. Turn on "Developer Mode" in the upper right corner.

5. Click "Load Extracted Extensions" and select the project's . /dist folder. (Drag the downloaded zip into it and it will work.)

Usage

1. Once the installation is complete, visit the DeepSeek website.
2. Where charts need to be rendered, use the Mermaid syntax to write chart descriptions. Example:

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

3. Once the chart description is complete, click the "Render Chart" button and the chart will be automatically generated and embedded in the page.
4. Users can preview chart results in real time by adjusting the Mermaid syntax until they are satisfied.

Main function operation flow

• Creating Flowcharts: Enter the Mermaid syntax description of the flowchart in the text box on the DeepSeek website and click the "Render Diagram" button to generate the flowchart.
• Creating Sequence Diagrams: Also enter the Mermaid syntax description of the sequence diagram in the text box and click the "Render Diagram" button to generate the sequence diagram.
• Creating a Gantt Chart: Enter the Mermaid syntax description of the Gantt chart and click the "Render Chart" button to generate the Gantt chart.

Detailed operation examples

1. Flowchart Example::

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

After entering the above code, click the "Render Diagram" button to generate the flowchart.

2. Sequence diagram example::

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

After entering the above code, click the "Render Chart" button to generate the sequence chart.

3. Gantt chart example::

   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

After entering the above code, click the "Render Chart" button to generate a Gantt chart.

With the above steps, users can easily create and render various charts in DeepSeek website to enhance data visualization.