Diagramm als Code
Diagram as Code
Rendert Mermaid-Flussdiagramme, Sequenzdiagramme und Kreisdiagramme beim Tippen mit eigenem Parser und Layout, listet genau auf, welche Syntax unterstützt wird, und exportiert SVG oder PNG.
Mermaid-Text links, das Bild rechts, beim Tippen aktualisiert. Parser, Layout und Renderer sind die eigenen dieser Site und nicht die Mermaid-Bibliothek, und deshalb steht die unterstützte Grammatik vollständig auf der Seite – drei Diagrammtypen und für jeden genau die Konstrukte, die gelesen werden.
Mermaid-Code
Vorschau
Unterstützte Grammatik (alles andere wird als Fehler mit Zeilennummer gemeldet)
Flussdiagramm — graph / flowchart
- Richtungen TD, TB, LR, RL, BT
- Formen [ ], ( ), ([ ]), [[ ]], [( )], (( )), > ], { }, {{ }}
- Linien -->, ---, -.->, -.-, ==>, ===
- Beschriftungen -->|Text|, -- Text -->, -. Text .->, == Text ==>
- A --> B --> C, A & B --> C
- subgraph Name [Titel] … end (Verschachtelung erlaubt)
- style, classDef, class, :::Klassenname
- %% Kommentare, ; Trenner
Nicht unterstützt: click, linkStyle, direction, die Pfeile <-->, --o und --x, Markdown-Zeichenketten
Sequenz — sequenceDiagram
- participant A as Name, actor B
- ->>, -->>, ->, -->, -x, --x, -), --)
- ->>+B / ->>-B, activate / deactivate
- Note left of · right of · over A,B
- loop, alt / else, opt … end
- autonumber
Nicht unterstützt: par, critical, break, rect, box, create/destroy, links
Tortendiagramm — pie
- pie [showData] [title Irgendwas]
- "Name" : Wert
Klassen-, Zustands-, ER-, Gantt- und Mindmap-Diagramme und die übrigen Typen werden noch nicht gezeichnet. Für Gantt-Diagramme gibt es ein eigenes Werkzeug.
So funktioniert es
Beginnen Sie mit einem Beispiel
Flussdiagramm, Sequenz und Kreis haben je ein Muster, das das meiste verwendet, was der Parser versteht. Eines zu bearbeiten geht schneller, als aus der Syntaxliste zu schreiben.
Lesen Sie den Fehler nach Zeilennummer
Alles außerhalb der unterstützten Grammatik wird mit Zeile und Fehlerbeschreibung abgewiesen, statt Ihnen eine leere Fläche zum Halbieren zu hinterlassen.
Exportieren oder drucken Sie
SVG hält den Text auswählbar und skaliert sauber; PNG mit 2× ist die sichere Wahl für eine Folienpräsentation oder eine Chatnachricht.
Häufige Fragen
Welche Diagrammtypen funktionieren?
Flussdiagramm (graph / flowchart), sequenceDiagram und pie. Klasse, Zustand, ER, gantt, gitGraph, mindmap und die übrigen werden im Fehler benannt, statt vage zu scheitern – für ein Gantt-Diagramm gibt es auf dieser Site ein eigenes Werkzeug.
Mein Diagramm funktioniert auf mermaid.live, aber nicht hier
Wahrscheinlich ein Konstrukt außerhalb der Liste auf der Seite – `click`, `linkStyle`, `direction` in einem Subgraph, die Pfeile `<-->`, `--o` und `--x`, YAML-Front-Matter oder Markdown-Zeichenketten. Der Fehler nennt, welches, und die Liste ist der ganze Vertrag.
Werden Umlaute und CJK-Text richtig gesetzt?
Ja. Kastenbreiten werden mit CJK-Zeichen in voller Breite und jedem lateinischen Buchstaben, mit oder ohne Umlaut, in einfacher Breite gemessen, eine koreanische Beschriftung läuft also nicht so über ihren Knoten hinaus wie in Renderern, die jedes Zeichen als halbbreit annehmen.
Wird mein Diagramm irgendwohin gesendet?
Nein. Parsen und Rendern passieren in der Seite, und der Entwurf wird in diesem Browser aufbewahrt. Nichts wird hochgeladen, was zählt, wenn das Diagramm Ihre interne Architektur ist.
Eingabe aus
Gantt-Diagramm erstellen
Gantt Chart Builder
Macht aus einer Aufgabentabelle – eingetippt oder als CSV eingefügt – ein Gantt-Diagramm auf Tages-, Wochen- oder Monatsskala mit Abhängigkeitspfeilen, Meilensteinen, Heute-Linie und Wochenendschattierung, exportiert als SVG oder PNG oder gedruckt.
To-do-Liste
Todo List
Führt eine Checkliste mit Fälligkeiten, Tags und tastaturzentrierter Bearbeitung, exportierbar als Markdown – ohne Upload, komplett im Browser.
Notizblock
Scratch Notepad
Ein Nur-Text-Notizblock, der beim Tippen speichert, ein Neuladen übersteht und die Wörter zählt.
Sprite-Sheet-Packer
Sprite Sheet Packer
Packt viele Bilder in einen Atlas und gibt dazu die CSS- oder JSON-Frame-Map aus.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Gantt-Diagramm erstellen
Gantt Chart Builder
Macht aus einer Aufgabentabelle – eingetippt oder als CSV eingefügt – ein Gantt-Diagramm auf Tages-, Wochen- oder Monatsskala mit Abhängigkeitspfeilen, Meilensteinen, Heute-Linie und Wochenendschattierung, exportiert als SVG oder PNG oder gedruckt.
Markdown-Editor
Markdown Editor
Bearbeitet Markdown mit Live-Vorschau und exportiert das gerenderte HTML, mit GFM-Tabellen und Aufgabenlisten.
SVG-Optimierer
SVG Optimiser
Entfernt Editor-Ballast, fasst Transformationen zusammen und rundet die Pfadgenauigkeit, mit gerendertem Vorher-nachher-Vergleich.
To-do-Liste
Todo List
Führt eine Checkliste mit Fälligkeiten, Tags und tastaturzentrierter Bearbeitung, exportierbar als Markdown – ohne Upload, komplett im Browser.
Base64 kodieren und dekodieren
Base64 Encoder & Decoder
Kodiert und dekodiert Base64 und Base64URL für Text oder Dateien und behandelt UTF-8 korrekt.
Hintergrund entfernen
Background Remover
Stellt ein Motiv vor einfarbigem Hintergrund per OKLab-Keying frei – ohne Upload, komplett im Browser – und liefert ein transparentes PNG samt Pinsel zum Nachbessern der Kanten.