Browser-Erweiterung zur Unterstützung von Inline-Rendering-Diagrammen in der offiziellen Chat-Schnittstelle von DeepSeek

Allgemeine Einführung

DeepSeek Diagrams Extension ist eine Chrome-Erweiterung, die Benutzern helfen soll, Diagramme auf der DeepSeek-Website inline darzustellen. Basierend auf der Mermaid.js-Bibliothek wandelt die Erweiterung textbeschriebene Diagramme direkt in visuelle Diagramme um und verbessert so die Benutzererfahrung auf DeepSeek. Mit dieser Erweiterung können Nutzer auf einfache Weise Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme und andere Diagrammtypen erstellen und anzeigen, was die Visualisierung und Analyse von Daten erheblich erleichtert.

Funktionsliste

• Grafisches RenderingUnterstützt das Inline-Rendering vieler Arten von Diagrammen in DeepSeek-Seiten, einschließlich Flussdiagrammen, Sequenzdiagrammen, Gantt-Diagrammen usw.
• Mermaid.js-IntegrationBasierend auf der Mermaid.js-Bibliothek, Unterstützung für die Erstellung von Diagrammen mit der Mermaid-Syntax.
• Schnelle InstallationEinfacher Installationsprozess, der es den Nutzern ermöglicht, schnell mit der Arbeit zu beginnen.
• Vorschau in EchtzeitVorschau der Kartenergebnisse in Echtzeit auf der DeepSeek-Website.
• hohe KompatibilitätKompatibel mit der neuesten Version von Chrome, um einen stabilen Betrieb zu gewährleisten.

Hilfe verwenden

Einbauverfahren

1. gehen Sie auf https://github.com/yan5xu/deepseek-diagrams-extension/releases

2. das neueste Zip-Paket herunterladen

3. öffnen Sie die Seite zur Verwaltung der Chrome-Erweiterungen und geben Sie chrome://extensions/ in die Adressleiste ein).

4. aktivieren Sie den "Entwicklermodus" in der oberen rechten Ecke.

5 Klicken Sie auf "Extrahierte Erweiterungen laden" und wählen Sie den Projektordner . /dist-Ordner. (Ziehen Sie die heruntergeladene ZIP-Datei in den Ordner und es wird funktionieren).

Verwendung

1. Sobald die Installation abgeschlossen ist, besuchen Sie die DeepSeek-Website.
2. Wenn Diagramme gerendert werden müssen, verwenden Sie die Mermaid-Syntax, um Diagrammbeschreibungen zu schreiben. Beispiel:

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

3. Sobald die Beschreibung des Diagramms vollständig ist, klicken Sie auf die Schaltfläche "Diagramm rendern", und das Diagramm wird automatisch erstellt und in die Seite eingebettet.
4. Die Benutzer können die Diagrammergebnisse in Echtzeit anzeigen, indem sie die Mermaid-Syntax anpassen, bis sie zufrieden sind.

Hauptfunktionen

• Flussdiagramme erstellenGeben Sie die Mermaid-Syntaxbeschreibung des Flussdiagramms in das Textfeld auf der DeepSeek-Website ein und klicken Sie auf die Schaltfläche "Diagramm rendern", um das Flussdiagramm zu erstellen.
• Erstellen von SequenzdiagrammenGeben Sie auch die Mermaid-Syntaxbeschreibung des Sequenzdiagramms in das Textfeld ein und klicken Sie auf die Schaltfläche "Diagramm rendern", um das Sequenzdiagramm zu erstellen.
• Erstellen eines Gantt-DiagrammsGeben Sie die Mermaid-Syntaxbeschreibung des Gantt-Diagramms ein und klicken Sie auf die Schaltfläche "Render Chart", um das Gantt-Diagramm zu erstellen.

Ausführliches Betriebsbeispiel

1. Beispiel eines Flussdiagramms::

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

Nachdem Sie den obigen Code eingegeben haben, klicken Sie auf die Schaltfläche "Diagramm rendern", um das Flussdiagramm zu erstellen.

2. Beispiel für ein Sequenzdiagramm::

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

Nachdem Sie den obigen Code eingegeben haben, klicken Sie auf die Schaltfläche "Render Chart", um das Sequenzdiagramm zu erstellen.

3. Beispiel für ein Gantt-Diagramm::

   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

Nachdem Sie den obigen Code eingegeben haben, klicken Sie auf die Schaltfläche "Render Chart", um ein Gantt-Diagramm zu erstellen.

Mit den oben genannten Schritten können Benutzer leicht verschiedene Diagramme auf der DeepSeek-Website erstellen und rendern, um die Datenvisualisierung zu verbessern.