Was du siehst
Links steht ein Ablauf in einfacher Textform, rechts erscheint sofort das Diagramm mit Kästen, Rauten und Pfeilen. Jede Änderung zeichnet es neu, die Richtung lässt sich von oben nach unten oder von links nach rechts umstellen.
Darunter zeigen Besucherzahlen, beliebte Seiten und eine Aktivitätskarte dieselben Daten in zwei Formaten: als Grafik auf der Website und als reinen Text aus Schriftzeichen, den man kopieren und überall einfügen kann.
So ist es gebaut
Ein kleiner Übersetzer liest die Mermaid-Schreibweise und baut daraus Knoten und Verbindungen. Ein Layout-Verfahren verteilt sie in Ebenen und führt Rückwege seitlich herum. Die Textdiagramme nutzen Blockzeichen wie ▁▂▃▅▇ und ░▒▓█.
Woher die Idee kommt
Pele zeichnet Mermaid-Diagramme blitzschnell als SVG, mdxcn baut Diagramme aus Textzeichen. Wir haben beide Ideen auf einer Seite zusammengeführt.
Darauf achten wir
- Diagramme als echtes SVG, scharf und durchsuchbar
- Farben über CSS-Variablen
- Textfassung zum Kopieren für E-Mail und Chat