Eingabe
Ausgabe

Warte auf Eingabe

Zeilen: 6Zeichen: 108
Warte auf EingabeZoom: 100%

Was ist der Mermaid-Diagrammeditor?

Mermaid ist ein JavaScript-basiertes Diagrammerstellungstool, das eine Markdown-ähnliche Textsyntax verwendet, um verschiedene Diagramme zu generieren. Ohne manuelles Ziehen von Formen genügt das Schreiben einfacher Textbeschreibungen, um automatisch Flussdiagramme, Sequenzdiagramme, Klassendiagramme und mehr zu erstellen.

Dieses Tool bietet eine Online-Mermaid-Bearbeitungsumgebung mit Echtzeitvorschau, Ziehen und Zoomen sowie Exportfunktionen und hilft Entwicklern, Diagramme schnell zu erstellen und zu teilen.

Verwendung

Grundlegende Verwendung

  1. Geben Sie die Mermaid-Syntax in den Editor links ein
  2. Das Diagramm wird rechts in Echtzeit gerendert
  3. Verwenden Sie die Maus zum Ziehen und Verschieben des Diagramms, das Mausrad zum Zoomen
  4. Klicken Sie auf die Schaltfläche Exportieren, um als PNG oder SVG zu speichern

Unterstützte Diagrammtypen

Flussdiagrammgraph/flowchart, zeigt Prozesse und Entscheidungswege
SequenzdiagrammsequenceDiagram, zeigt die zeitliche Interaktion zwischen Objekten
KlassendiagrammclassDiagram, zeigt Attribute und Beziehungen von Klassen
ZustandsdiagrammstateDiagram, zeigt Zustandsübergänge
ER-DiagrammerDiagram, zeigt Entitätsbeziehungen
Gantt-Diagrammgantt, zeigt die Projektzeitleiste
Kreisdiagrammpie, zeigt Datenanteile
Mindmapmindmap, zeigt Denkstrukturen
Customer-Journey-Diagrammjourney, zeigt den Benutzererlebnis-Workflow

Beispiele

Flussdiagramm

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action A]
    B -->|No| D[Action B]
    C --> E[End]
    D --> E

Sequenzdiagramm

sequenceDiagram
    participant Client
    participant Server
    participant Database
    Client->>Server: Send Request
    Server->>Database: Query Data
    Database-->>Server: Return Results
    Server-->>Client: Send Response

Klassendiagramm

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    class Cat {
        +purr()
    }
    Animal <|-- Dog
    Animal <|-- Cat

Häufig gestellte Fragen

Welche Diagrammtypen werden unterstützt?

Es werden 9 Diagrammtypen unterstützt: Flussdiagramm (graph/flowchart), Sequenzdiagramm (sequenceDiagram), Klassendiagramm (classDiagram), Zustandsdiagramm (stateDiagram), ER-Diagramm (erDiagram), Gantt-Diagramm (gantt), Kreisdiagramm (pie), Mindmap (mindmap) und Customer-Journey-Diagramm (journey).

Wie exportiere ich ein Diagramm?

Klicken Sie auf die Schaltfläche «PNG exportieren» oder «SVG exportieren» im rechten Bereich, um das Diagramm herunterzuladen. Das PNG-Format eignet sich zum Einfügen in Dokumente, das SVG-Format für Vektorbearbeitung und Druck.

Kann das Diagramm gezoomt und verschoben werden?

Ja. Verwenden Sie das Mausrad zum Zoomen des Diagramms, halten Sie die linke Maustaste gedrückt und ziehen Sie, um die Position des Diagramms zu ändern. Doppelklicken Sie auf den Vorschaubereich, um die Ansicht auf den Anfangszustand zurückzusetzen.

Werden die Daten auf den Server hochgeladen?

Nein. Die Analyse der Mermaid-Syntax und das Rendering der Diagramme erfolgen vollständig lokal im Browser. Ihre Daten verlassen niemals Ihr Gerät, was einen vollständigen Schutz der Privatsphäre gewährleistet.