Markdown-viewer en -editor met Mermaid

Markdown-document

Schrijf, plak of open een Markdown-bestand en bekijk direct de preview, zoals op GitHub: tabellen, takenlijsten, voetnoten, meldingen, Mermaid-diagrammen, LaTeX-formules en gemarkeerde code. Daarna kun je het downloaden als HTML of opslaan als PDF. Alles wordt in je browser verwerkt.

Inhoudsopgave

Gesynchroniseerd scrollen

Regeleinden behouden

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

# Voorbeelddocument

Bewerk deze tekst en zie het resultaat direct. Ondersteunt **vet**, *cursief*, ~~doorgehaald~~, `code`, links zoals https://ittools.tech en voetnoten[^1].

> [!NOTE]
> GitHub-meldingen werken ook: probeer TIP, IMPORTANT, WARNING of CAUTION.

## Taken en tabellen

- [x] README schrijven
- [ ] Een diagram toevoegen

| 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();
}
```

## Diagrammen en formules

```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 wordt in je browser verwerkt; het document wordt naar geen enkele server verzonden.

0 woorden · 0 regels · 0 min leestijd

Hoe het werkt

Markdown is het formaat van README's, technische documentatie, wiki's en notities in bijna elke ontwikkeltool, maar elk platform voegt er zijn eigen extensies aan toe. Deze viewer volgt GitHub Flavored Markdown (GFM), de meest gebruikte variant: naast de basis toont hij tabellen, takenlijsten, doorgehaalde tekst, automatische links, voetnoten en de meldingen NOTE, TIP, IMPORTANT, WARNING en CAUTION.

Codeblokken met de taal mermaid worden diagrammen (stroomdiagram, sequentie, klassen, toestanden, entiteit-relatie, Gantt, Git en meer), formules tussen $-tekens worden met KaTeX weergegeven en de rest van de code wordt gemarkeerd volgens de opgegeven taal. Begint het document met een YAML-blok tussen regels met ---, zoals bij Jekyll, Hugo of Docusaurus, dan wordt het als aparte tabel getoond.

Het document verlaat je browser niet. HTML erin wordt opgeschoond voordat het wordt getoond, dus een README van derden openen voert geen scripts uit, en de bibliotheken voor diagrammen en formules worden alleen gedownload als het document ze gebruikt.

Voorbeelden

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

Commit → Build → DeployEen codeblok met de taal mermaid wordt als diagram getekend. Bevat het een syntaxfout, dan blijft de code zichtbaar met de melding van Mermaid eronder.

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

#getting-started · #api-v20-beta · #getting-started-1Koppen krijgen dezelfde id als op GitHub: kleine letters, spaties vervangen door koppeltekens, zonder leestekens en met een nummer aan het eind als ze herhaald worden. Zo werkt een link [tekst](#getting-started) hier net zo als in de repository.

Line one
Line two

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

In standaard Markdown breekt een enkele regeleinde de alinea niet af; je moet een lege regel laten of de regel met twee spaties afsluiten. Reacties en issues op GitHub respecteren het wel: om het zo te zien, zet je Regeleinden behouden aan.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.Een citaat dat begint met [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] of [!CAUTION] wordt net als op GitHub als gekleurde melding weergegeven. Op platforms die dit niet ondersteunen, verschijnt het als een gewoon citaat.

Gebruiksscenario's

Controleren hoe een README of CHANGELOG eruitziet voordat je hem naar de repository uploadt.
Een gedownload .md-bestand lezen zonder een editor te installeren: open het met de knop of sleep het erin.
Mermaid-diagrammen voor architectuur, stromen of sequenties uitproberen en de syntax corrigeren met de live preview.
Documentatie omzetten naar een zelfstandige HTML-pagina of een PDF om te delen met mensen die geen Git gebruiken.
Aantekeningen of technische documentatie schrijven met wiskundige formules in LaTeX-notatie.
De Markdown-tekst die een AI-assistent teruggeeft bekijken met opmaak, tabellen en codeblokken.

Veelgestelde vragen

Welke soorten Mermaid-diagrammen kun je tekenen?

Alle die Mermaid meelevert: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture en kanban, onder andere. De diagrammen gebruiken lichte of donkere kleuren afhankelijk van het thema van de site en worden in strikte modus getekend: de tekst van labels kan geen HTML injecteren of bij een klik code uitvoeren.

Hoe schrijf ik een wiskundige formule?

Tussen $-tekens voor een inline formule, zoals $a^2 + b^2 = c^2$, en tussen $$ of in een codeblok met de taal math voor een gecentreerde formule op een eigen regel. De syntax is de LaTeX die KaTeX ondersteunt. Om een letterlijk $-teken te schrijven, zoals in een prijs, zet je er een backslash voor; toch wordt "$5 en $10" niet als formule gezien, omdat de tweede $ een spatie ervoor en een cijfer erna heeft.

Kan ik HTML in Markdown gebruiken?

Ja, net als op GitHub: tags zoals details en summary voor uitklapbare secties, kbd voor toetsen, sub en sup, img met afmetingen of p met align. Voordat het wordt getoond, worden scripts, event-attributen zoals onclick, javascript:-links en style- en form-tags verwijderd, zodat een document van derden geen code kan uitvoeren of de rest van de pagina kan wijzigen.

Hoe zet ik het om naar PDF?

Met Exporteren en Afdrukken of opslaan als PDF opent het afdrukvenster met alleen het document, zonder de interface van de site, en daar kies je Opslaan als PDF. Tabellen, codeblokken en diagrammen worden zo veel mogelijk niet over pagina's verdeeld. Wil je liever een bestand om te publiceren, dan maakt .html downloaden een zelfstandige pagina met ingesloten stijlen.

Waarom wordt een afbeelding met een relatief pad niet getoond?

Omdat de viewer geen toegang heeft tot de andere mappen van de repository: een pad als ./docs/logo.png bestaat alleen op je schijf of op GitHub. Afbeeldingen met een volledig adres, die beginnen met https://, worden zonder problemen getoond.