Kann ich Mermaid Chart vibecoden?

JA · in einem Durchgang

Preis 8,00 €/MonatBauzeit ein DurchgangKategorie 📐 diagrammeersetzt von 0 Personen

Preis für Deutschland

8,00 € pro Monat

Tarif Plus, 8 Euro pro Nutzer und Monat bei jährlicher Zahlung; einen Preis für monatliche Zahlung zeigt die Seite nicht. Im Browser geprüft.

Die Preisseite macht keine Angabe zur MwSt.

geprüft am 31.08.2026 · Quelle ↗

Der Solo-Kern ist kompakt: ein Diagramm-als-Code-Editor im Browser mit Ziehen, Verbinden, Kurzbefehlen, Autospeichern und SVG- oder PNG-Export, machbar in einer Sitzung. Das bezahlte Produkt gewinnt bei Interaktions-Politur und Zusammenarbeit. Die Mermaid-Bibliothek selbst ist Open Source.

der Prompt

Baue mir einen Diagramm-als-Code-Editor im Browser als Ersatz für Mermaid Chart. Anforderungen:

- Nimm genau diesen Stack: React, TypeScript, Vite, IndexedDB.
- Der Kern: ein Diagramm-als-Code-Editor im Browser mit Ziehen, Größe ändern, Verbinden, Kurzbefehlen, Autospeichern und SVG- oder PNG-Export. Nutze die Open-Source-Bibliothek mermaid fürs Rendern, statt sie nachzubauen.
- Deutsch sind Oberfläche, Kommentare und README; Komponenten, Dateien und Variablen bleiben englisch (diagrams, editor).
- Starte in einem leeren Ordner und erstelle das komplette lauffähige Projekt.
- Standardmäßig eine Person, privat. Alle Daten lokal in IndexedDB.
- Keine Analytik, keine Telemetrie, keine Werbung, keine fremden Konten.
- Geheimnisse in die .env, .env.example liegt bei.
- Realistische Beispiel-Diagramme, klar beschriftet und leicht zu löschen.
- Baue die kleinste polierte Oberfläche, die den Kern-Kreislauf komplett schafft: Code links, Live-Vorschau rechts, Fehler mit Zeilennummer.
- Saubere Zustände für leer, ladend, Validierung, Erfolg und Fehler.
- Import und Export, damit ich in der App nicht gefangen bin.
- Tastaturnavigation, Beschriftungen, Fokus-Zustände und vernünftiger Kontrast.
- Validiere fremde Eingaben und protokolliere nie private Inhalte.
- Wo eine externe API optional ist, bleibt die App ohne sie nutzbar; erkläre den eingeschränkten Modus.
- Gezielte Unit-Tests für das Datenmodell und den wichtigsten Workflow, dazu ein End-to-End-Rauchtest.
- README mit Einrichtung, Architektur, Speicherort der Daten, Backup und Grenzen.
- Skripte für Installation, Entwicklung, Test, Build und einen produktionsnahen lokalen Lauf.
- Lass Tests und Build vor dem Abschluss laufen und behebe Fehler, statt sie nur zu beschreiben.

Bewusst weglassen:

- Hochtreue Import- und Export-Formate.
- Präsentations- und Firmenfunktionen.
- Mehrspieler-Cursor und Kommentare.

$ im Agenten öffnen (Prompt ist vorausgefüllt, du drückst Enter) oder direkt kopieren · dieser Prompt wurde aus dem Bauplan erzeugt · Verbesserung einreichen

warum Menschen weiterhin bezahlen

Bezahlt wird nicht für die Formen, sondern für reibungsarmes Bearbeiten, verlässliche Exporte, Zusammenarbeit und eine Zeichenfläche, die nie gegen einen arbeitet.

was du verlierst

xImport und Export in hoher Treue

xPräsentations- und Firmenfunktionen

xMehrspieler-Cursor und Kommentare

xGroße Vorlagenbibliotheken

Vorarbeit · nutze diese Projekte, wenn du nicht selbst bauen willstMermaid↗

auf X teilen ↗„Ich habe Mermaid Chart mit einem Prompt ersetzt.“