# Wie man Mermaid.js in NoteRich für Flussdiagramme verwendet – Kompletttutorial Das Visualisieren komplexer Prozesse, Systemarchitekturen oder Entscheidungsbäume kann allein mit Text schwierig sein. **Mermaid.js** ist ein leistungsfähiges JavaScript-basierendes Diagramm- und Grafikwerkzeug, mit dem Sie Diagramme mit einfachen Textdefinitionen erstellen können. In **NoteRich** haben wir Mermaid.js direkt in den Editor integriert, sodass Sie professionelle Flussdiagramme, Sequenzdiagramme und mehr ohne den Ausgangspunkt Ihrer Notizen erzeugen können. Dieser Leitfaden führt Sie durch alles, was Sie wissen müssen, um Mermaid-Diagramme in NoteRich zu beherrschen, einschließlich der Nutzung von AI und OCR, um Diagramme sofort zu generieren. --- ## 🚀 Warum Mermaid in NoteRich verwenden? * **Textbasierter Ansatz:** Definieren Sie Ihre Diagramme mit Code, was sie einfach für Versionkontrolle und Bearbeitung macht. * **Live-Vorschau:** Sehen Sie Ihre Änderungen sofort, während Sie tippen. * **Vielfältige Funktionen:** Unterstützt Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, Gantt-Charts und mehr. * **AI- und OCR-basierte Erstellung:** Erstellen Sie Diagramme aus natürlichen Sprachbeschreibungen oder durch Scannen von bestehenden Bildern. * **Lokaler Speicher:** Ihre Diagrammdefinitionen werden lokal in Ihren Notizen gespeichert, was Privatsphäre und Offline-Zugriff gewährleistet. --- ## 📝 Beginnen: Einfügen eines Mermaid-Diagramms Es gibt drei Hauptmethoden, um einen Mermaid-Diagramm in NoteRich einzufügen: ### Methode 1: Der Slash-Befehl (`/`) 1. Platzieren Sie den Cursor an der Stelle, an der Sie das Diagramm platzieren möchten. 2. Geben Sie `/` ein, um den Komponentenwähler zu öffnen. 3. Suchen Sie nach **"Mermaid"** oder **"Diagramm"**. 4. Wählen Sie **Mermaid Diagramm** aus der Liste aus. ### Methode 2: Die Toolbar 1. Klicken Sie auf die **Einfügen**-Schaltfläche in der Toolbar. 2. Navigieren Sie zur **Visualisierung** oder **Diagramme**-Sektion. 3. Klicken Sie auf **Mermaid**. ### Methode 3: Der AI-Assistent 1. Öffnen Sie den **AI-Assistent** (über `/ai` oder die Toolbar). 2. Beschreiben Sie das Diagramm, das Sie erstellen möchten (z. B. „Erstellen eines Flussdiagramms für einen Benutzeranmeldungsprozess“). 3. Der AI wird den Mermaid-Code für Sie generieren, den Sie dann direkt in Ihre Notiz einfügen können. Sobald das Diagramm eingefügt wurde, wird ein Konfigurationsfenster angezeigt, in dem ein Code-Editor und ein Live-Vorschaufenster angezeigt werden. --- ## 🛠️ Die Mermaid-Editor-Interfaz Der Mermaid-Editor in NoteRich ist für Effizienz konzipiert: * **Code-Area:** Ein monospaced Textbereich, in dem Sie Ihre Mermaid-Syntax schreiben. * **Live-Vorschau:** Eine Echtzeit-Visualisierung Ihres Diagramms. Falls es einen Syntaxfehler gibt, wird ein Fehlermarker angezeigt, um Ihnen zu helfen, den Fehler zu beheben. * **Hilfeselement:** Klicken Sie auf das `?`-Symbol neben „Diagrammcode“, um die offizielle [Mermaid.js-Dokumentation](https://mermaid.js.org/intro/)` zu öffnen und detaillierte Syntaxreferenzen einzusehen. * **Bestätigungsknopf:** Speichern Sie Ihr Diagramm und fügen Sie es in die Notiz ein. > **Tipp:** Sie können beliebares Mermaid-Diagramm in Ihrer Notiz doppelklicken, um den Editor wieder zu öffnen und Änderungen vorzunehmen. --- ## 📊 Grundlegende Flussdiagramm-Syntax Flussdiagramme sind der häufigste Einsatzbereich von Mermaid. Hier ist wie man sie erstellt. ### 1. Definition der Richtung Beginnen Sie damit, die Richtung des Flusses zu definieren: * `graph TD`: Oben-Denken * `graph LR`: Unten-Rechts * `graph BT`: Unten-Ober * `graph RL`: Rechts-Unter ### 2. Hinzufügen von Knoten Knoten werden durch eine ID und eine Beschriftung definiert. ```mermaid graph TD A[Start] --> B[Prozess] B --> C{Entscheidung] C -->|Ja| D[Ende] C -->|Nein| B ``` * `[Text]`: Rechteck-Knoten. * `(Text)`: Runde Rechteck. * `((Text))`: Kreis. * `{Text}`: Rhombus (Entscheidung). * `[[Text]]`: Subroutine. ### 3. Verbinden der Knoten * `-->`: Feststehende Pfeil. * `-.->`: Punktförmiger Pfeil. * `==>`: Dicke Pfeil. * `-- Text -->`: Pfeil mit Beschriftung. --- ## 🤖 AI-basierte Diagramm-Generierung Wollen Sie nicht Code schreiben? Lassen Sie NoteRichs AI das für Sie erledigen. 1. Öffnen Sie den **AI-Assistent**. 2. Geben Sie einen Befehl wie: *„Erstellen Sie ein Mermaid-Sequenzdiagramm für einen Kunden, der einen Online-Order platziert.“* 3. Der AI wird einen Codeblock wie diesen zurückgeben: ```mermaid sequenceDiagram participant Kunde participant Website participant Datenbank Kunde->>Website: Order Platzieren Website->>Datenbank: Bestellung überprüfen Datenbank-->>Website: Bestellung verfügbar Website-->>Kunde: Bestellung bestätigt ``` 4. Kopieren Sie den Code oder verwenden Sie die „Einfügen“-Schaltfläche, wenn sie in Ihrer AI-Interface vorhanden ist, um ihn in Ihre Notiz einzufügen. --- ## 📸 OCR: Scannen von handschriftlichen oder gedruckten Diagrammen Haben Sie ein Fotografie auf einem Whiteboard oder ein gedrucktes Flussdiagramm? NoteRichs **Note Scanner (OCR)** kann es in bearbeitbare Mermaid-Code umwandeln. 1. Öffnen Sie den **AI-Assistent** und wählen Sie **Note Scanner (OCR)** aus. 2. Laden Sie ein Bild Ihres handschriftlichen oder gedruckten Diagramms. 3. Geben Sie im Befehl an: *„Wandeln Sie dieses Bild in einen Mermaid.js-Flussdiagramm um.“* 4. Der AI analysiert die Bildstruktur und generiert die entsprechende Mermaid-Syntax. 5. Überprüfen Sie den generierten Code im Editor und korrigieren Sie eventuelle kleine Erkennungsfehler. > **Hinweis:** Für die besten Ergebnisse sollten Sie sicherstellen, dass das Bild klar ist und der Text lesbar ist. Komplexe handschriftliche Skizzen erfordern möglicherweise nach der Umwandlung noch einige manuelle Anpassungen. --- ## 🎨 Fortgeschrittene Funktionen ### Stilisierung von Knoten Sie können das Erscheinungsbild bestimmter Knoten mit CSS-Klassen oder Inline-Styles anpassen. ```mermaid graph LR A[Start] --> B[Prozess] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### Subgraphien Gruppieren Sie verwandte Knoten zusammen, um eine bessere Organisation zu erreichen. ```mermaid graph TD subgraph Frontend A[React App] --> B[UI-Komponenten] end subgraph Backend C[API-Server] --> D[Datenbank] end B --> C ``` ### Sequenzdiagramme Mermaid ist nicht nur für Flussdiagramme geeignet. Sie können auch Sequenzdiagramme erstellen, um Interaktionen zwischen Systemen zu visualisieren. ```mermaid sequenceDiagram participant Kunde participant NoteRich participant Server Kund: Bearbeiten der Notiz NoteRich: Speichern der Daten Server: Bestätigen des Speichervorgangs NoteRich: Aktualisieren der Benutzeroberfläche ``` --- ## 💡 Tipps für NoteRich-Nutzer 1. **Escape von Sonderzeichen:** Wenn der Text Ihres Knotens Sonderzeichen wie `[]` oder `()` enthält, umschließen Sie den Text mit Anführungszeichen. ```mermaid graph TD A["Knoten mit [Klammern]"] --> B["Knoten mit (Klammern)]" ``` 2. **Kopieren als Bild:** Sobald das Diagramm bereit ist, klicken Sie darauf, um die flottierende Toolbar zu zeigen. Verwenden Sie die **Kopieren-Bild**-Schaltfläche, um das Diagramm in andere Anwendungen wie Slack, Notion oder E-Mail zu übertippen. 3. **SVG herunterladen:** Profi-Nutzer können das Diagramm als hochwertiges SVG-Datei herunterladen, um es in Präsentationen oder Publikationen zu verwenden. --- ## ❓ Fehlerbehebung * **Diagramm wird nicht angezeigt?** Überprüfen Sie den Fehlermarker im Vorschaufenster. Häufige Probleme umfassen fehlende Schlussklammern `]` oder falsche Pfeil-Syntax. * **Syntaxfehler?** Stellen Sie sicher, dass Sie die richtige Mermaid-Syntax verwenden. NoteRich verwendet die neueste stabile Version von Mermaid.js. Wenn Sie unsicher sind, verweisen Sie auf die [offizielle Dokumentation](https://mermaid.js.org/intro/). * **OCR-Aufmerksamkeit?** Wenn die OCR-Ergebnisse nicht perfekt sind, verwenden Sie den AI-Assistent, um den Code zu verbessern. Sie können den unvollständigen OCR-Output übertippen und den AI bitten, die Mermaid-Syntax zu korrigieren. --- ## 🏁 Fazit Mermaid.js in NoteRich verändert die Art und Weise, wie Sie Prozesse und Systeme dokumentieren. Durch die Speicherung Ihrer Diagramme als Code bleiben sie immer aktuell, leicht zu bearbeiten und nahtlos in Ihre Wissensbasis integriert. Mit AI-Genierung und OCR-Scannen ist die Erstellung komplexer Visualisierungen nie einfacher gewesen. Fangen Sie heute an, Ihre Ideen zu visualisieren! --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Mermaid</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Flussdiagramm</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI-Assistent</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">OCR</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Visualisierung</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">NoteRich</span> </div>