🛠️ Multi-Viewer
📝 Markdown
📊 Mermaid
🔷 PlantUML
📊 BPMN
📝 HTML
📝 HTML Editor & Preview
💾 Export HTML
Editor
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 20px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; } .card { background: white; color: #333; padding: 30px; border-radius: 15px; } h1 { color: #667eea; } button { padding: 12px 25px; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer; } </style> </head> <body> <div class="card"> <h1>Willkommen! 🎉</h1> <p>Live-Vorschau deines HTML-Codes.</p> <button onclick="alert('Hallo! 👋')">Klick mich</button> </div> </body> </html>
HTML Vorschau
Automatische Vorschau-Aktualisierung
🔄 Aktualisieren
🗑️ Leeren
📋 Beispiel
📝 Markdown Editor & Preview
💾 Export .md
🌐 Export .html
📄 Export .doc
Markdown Editor
# Willkommen beim Markdown-Viewer! ## Text-Formatierung **Fett**, *kursiv*, ~~durchgestrichen~~, `inline code` ## Listen - Punkt 1 - Punkt 2 - Unterpunkt 1. Erster 2. Zweiter ## Code-Blöcke ```python def greet(name): return f"Hallo, {name}!" ``` ## Tabellen | Spalte A | Spalte B | |----------|----------| | Wert 1 | Wert 2 | | Wert 3 | Wert 4 | ## Zitate > Dies ist ein Blockzitat. ## Links [GitHub](https://github.com) **Probiere es aus!** ✨
Markdown Vorschau
Wird geladen...
Automatische Vorschau-Aktualisierung
📝 Rendern
🗑️ Leeren
📋 Beispiel
📊 Mermaid Viewer
📄 SVG
🖼️ PNG
Mermaid Code
graph TD A[Start] --> B{Bedingung?} B -->|Ja| C[Aktion] B -->|Nein| D[Alternative] C --> E[Ende] D --> E
Mermaid Vorschau
🔄 Wird geladen...
📊 Render
🗑️ Leeren
🔷 PlantUML Viewer
📄 SVG
🖼️ PNG
PlantUML Code
@startuml class User { +String name +login() } class Order { +int orderId +createOrder() } User --> Order : places @enduml
PlantUML Vorschau
🔄 Wird geladen...
🔷 Render
🗑️ Leeren
📊 BPMN Editor
Unbenannt
📂 Öffnen
💾 Speichern
📐 SVG
🖼️ PNG
📝 XML
↩️ Undo
↪️ Redo
🔍+
🔍-
📏 Fit
🆕 Neu
✅ BPMN Editor bereit
100%
📝 BPMN XML
✕
Lade...