Mermaid-Editor online (Diagramme per Text)
Füge den Mermaid-Code ein oder schreibe ihn. Die Vorschau aktualisiert sich beim Tippen, und die Beispiele zeigen die Diagrammtypen.
So geht’sSchreibe das Diagramm, sieh die Zeichnung
flowchart LR
A[Ideia] --> B{Vale a pena?}
B -- sim --> C[Planejar]
B -- não --> D[Arquivar]
C --> E[Executar] --> F((Pronto))sequenceDiagram
Cliente->>Loja: Faz o pedido
Loja-->>Cliente: Confirma por e-mailpie title Wohin das Budget fließt
"Aluguel" : 35
"Equipe" : 40
"Marketing" : 15
"Outros" : 10journey
title Kauf auf der Website
section Entdeckung
Findet den Shop bei Google: 4: Kunde
Sieht die Produkte: 5: Kunde
section Kauf
Füllt die Adresse aus: 2: Kunde
Bezahlt: 3: KundequadrantChart
title Priorität der Aufgaben
x-axis Pouco esforço --> Muito esforço
y-axis Pouco impacto --> Muito impacto
quadrant-1 Planen
quadrant-2 Sofort tun
quadrant-3 Später erledigen
quadrant-4 Überdenken
Neue Website: [0.7, 0.85]
Instagram-Beitrag: [0.2, 0.6]
Logo tauschen: [0.6, 0.3]gitGraph
commit
branch nova-tela
checkout nova-tela
commit
commit
checkout main
merge nova-tela
commit
Verfügbar auf: 
Mermaid-Editor online (Diagramme per Text): wofür es gut ist
Schreibe oder füge Mermaid-Code ein und sieh das Diagramm beim Tippen aktualisiert. Die Beispiel-Schaltflächen zeigen Flussdiagramm, Sequenz, Kreisdiagramm, User Journey, Quadrant und Git-Graph, und der Editor akzeptiert die anderen Typen von Mermaid, wie Klassen, Zustände, ER, Gantt, Mindmap und Zeitleiste.
So geht’s
- Schreibe den Mermaid-Code oder wähle ein Beispiel.
- Passe den Text an und sieh die Vorschau.
- Lade als PNG oder SVG herunter oder kopiere den Code.
Wann nutzen
- Ein Diagramm testen, bevor es auf GitHub kommt.
- Technische Dokumentation.
- Schnelle Grafiken für eine Präsentation erstellen.
Häufige Fragen
Was ist Mermaid?
Es ist eine offene Sprache, um Diagramme in Text zu beschreiben. GitHub, GitLab, Notion und viele Dokumentationseditoren zeichnen Mermaid-Blöcke automatisch, deshalb taugt derselbe Code für die Projektdokumentation.
Welche Arten von Diagrammen kann man erstellen?
Flussdiagramm (flowchart), Sequenz, Klassen, Zustände, Entity-Relationship, Gantt, Kreis, User Journey, Quadrant, Git-Graph, Mindmap, Zeitleiste und andere. Jeder Typ beginnt mit einem Wort in der ersten Zeile, wie flowchart, sequenceDiagram oder pie.
Wird der Code gespeichert?
Ja, er wird gespeichert und ist wieder da, wenn du zurückkommst. Beim Zurückkehren erscheint das letzte Diagramm erneut.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.