Markdown-Viewer und -Editor mit Mermaid

Markdown-Dokument

Schreibe, füge ein oder öffne eine Markdown-Datei und sieh sofort die Vorschau, wie auf GitHub: Tabellen, Aufgabenlisten, Fußnoten, Hinweise, Mermaid-Diagramme, LaTeX-Formeln und hervorgehobener Code. Danach kannst du sie als HTML herunterladen oder als PDF speichern. Alles wird in deinem Browser verarbeitet.

Inhaltsverzeichnis

Synchrones Scrollen

Zeilenumbrüche beibehalten

---
title: "Beispieldokument"
tags: [markdown, mermaid, katex]
---

# Beispieldokument

Bearbeite diesen Text und sieh dir das Ergebnis sofort an. Unterstützt werden **fett**, *kursiv*, ~~durchgestrichen~~, `Code`, Links wie https://ittools.tech und Fußnoten[^1].

> [!NOTE]
> Auch GitHub-Hinweise funktionieren: Probier TIP, IMPORTANT, WARNING oder CAUTION aus.

## Aufgaben und Tabellen

- [x] README schreiben
- [ ] Ein Diagramm hinzufügen

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## Diagramme und Formeln

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: Alles wird in deinem Browser verarbeitet; das Dokument wird an keinen Server gesendet.

0 Wörter · 0 Zeilen · 0 Min. Lesezeit

So funktioniert es

Markdown ist das Format von READMEs, technischer Dokumentation, Wikis und Notizen in fast jedem Entwicklerwerkzeug, aber jede Plattform ergänzt es um eigene Erweiterungen. Dieser Viewer folgt GitHub Flavored Markdown (GFM), der am weitesten verbreiteten Variante: Neben den Grundlagen stellt er Tabellen, Aufgabenlisten, Durchstreichungen, automatische Links, Fußnoten und die Hinweise NOTE, TIP, IMPORTANT, WARNING und CAUTION dar.

Codeblöcke mit der Sprache mermaid werden zu Diagrammen (Flussdiagramm, Sequenz, Klassen, Zustände, Entity-Relationship, Gantt, Git und mehr), Formeln zwischen $-Zeichen werden mit KaTeX gesetzt, und der übrige Code wird je nach angegebener Sprache hervorgehoben. Beginnt das Dokument mit einem YAML-Block zwischen Zeilen mit ---, wie bei Jekyll, Hugo oder Docusaurus, wird er als separate Tabelle angezeigt.

Das Dokument verlässt deinen Browser nicht. Enthaltenes HTML wird vor der Anzeige bereinigt, sodass das Öffnen einer fremden README keine Skripte ausführt, und die Bibliotheken für Diagramme und Formeln werden nur geladen, wenn das Dokument sie verwendet.

Beispiele

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → DeployEin Codeblock mit der Sprache mermaid wird als Diagramm gezeichnet. Enthält er einen Syntaxfehler, bleibt der Code sichtbar und darunter erscheint die Meldung von Mermaid.

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1Überschriften erhalten dieselbe ID wie auf GitHub: Kleinbuchstaben, Leerzeichen durch Bindestriche ersetzt, ohne Satzzeichen und mit einer Zahl am Ende, wenn sie sich wiederholen. So funktioniert ein Link [Text](#getting-started) hier genauso wie im Repository.

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

In Standard-Markdown beendet ein einfacher Zeilenumbruch den Absatz nicht; dafür braucht es eine Leerzeile oder zwei Leerzeichen am Zeilenende. Kommentare und Issues auf GitHub berücksichtigen ihn dagegen: Um es so zu sehen, aktiviere Zeilenumbrüche beibehalten.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.Ein Zitat, das mit [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] oder [!CAUTION] beginnt, wird wie auf GitHub als farbiger Hinweis angezeigt. Auf Plattformen, die das nicht unterstützen, erscheint es als normales Zitat.

Anwendungsfälle

Prüfen, wie eine README oder ein CHANGELOG aussehen wird, bevor du sie ins Repository hochlädst.
Eine heruntergeladene .md-Datei lesen, ohne einen Editor zu installieren: Öffne sie über die Schaltfläche oder zieh sie hinein.
Mermaid-Diagramme für Architektur, Abläufe oder Sequenzen ausprobieren und die Syntax mit der Live-Vorschau korrigieren.
Dokumentation in eine eigenständige HTML-Seite oder ein PDF umwandeln, um sie mit Leuten zu teilen, die kein Git nutzen.
Notizen oder technische Dokumentation mit mathematischen Formeln in LaTeX-Notation schreiben.
Den Markdown-Text, den ein KI-Assistent zurückgibt, mit Formatierung, Tabellen und Codeblöcken ansehen.

Häufige Fragen

Welche Mermaid-Diagrammtypen lassen sich zeichnen?

Alle, die Mermaid mitbringt: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture und kanban, unter anderem. Die Diagramme verwenden je nach Design der Website helle oder dunkle Farben und werden im strikten Modus gezeichnet: Der Text der Beschriftungen kann weder HTML einschleusen noch beim Klicken Code ausführen.

Wie schreibe ich eine mathematische Formel?

Zwischen $-Zeichen für eine Inline-Formel, etwa $a^2 + b^2 = c^2$, und zwischen $$ oder in einem Codeblock mit der Sprache math für eine zentrierte Formel in einer eigenen Zeile. Die Syntax ist das LaTeX, das KaTeX unterstützt. Für ein wörtliches $-Zeichen, etwa bei einem Preis, stellst du einen Backslash davor; trotzdem wird „$5 und $10“ nicht als Formel erkannt, weil vor dem zweiten $ ein Leerzeichen und danach eine Ziffer steht.

Kann ich HTML im Markdown verwenden?

Ja, wie auf GitHub: Tags wie details und summary für ausklappbare Abschnitte, kbd für Tasten, sub und sup, img mit Größenangabe oder p mit align. Vor der Anzeige werden Skripte, Event-Attribute wie onclick, javascript:-Links sowie style- und form-Tags entfernt, sodass ein fremdes Dokument weder Code ausführen noch den Rest der Seite verändern kann.

Wie wandle ich es in PDF um?

Über Exportieren und Drucken oder als PDF speichern öffnet sich der Druckdialog nur mit dem Dokument, ohne die Oberfläche der Website, und dort wählst du Als PDF speichern. Tabellen, Codeblöcke und Diagramme werden möglichst nicht über Seitengrenzen hinweg getrennt. Wenn du lieber eine Datei zum Veröffentlichen möchtest, erzeugt .html herunterladen eine eigenständige Seite mit eingebetteten Styles.

Warum wird ein Bild mit relativem Pfad nicht angezeigt?

Weil der Viewer keinen Zugriff auf die anderen Ordner des Repositorys hat: Ein Pfad wie ./docs/logo.png existiert nur auf deiner Festplatte oder auf GitHub. Bilder mit vollständiger Adresse, die mit https:// beginnen, werden problemlos angezeigt.