Przeglądarka i edytor Markdown z Mermaid

Dokument Markdown

Napisz, wklej lub otwórz plik Markdown i od razu zobacz podgląd, tak jak na GitHubie: tabele, listy zadań, przypisy, alerty, diagramy Mermaid, wzory LaTeX i podświetlany kod. Potem możesz pobrać go jako HTML lub zapisać do PDF. Wszystko jest przetwarzane w przeglądarce.

Spis treści

Synchroniczne przewijanie

Zachowaj podziały wierszy

---
title: "Przykładowy dokument"
tags: [markdown, mermaid, katex]
---

# Przykładowy dokument

Edytuj ten tekst i od razu zobacz wynik. Obsługuje **pogrubienie**, *kursywę*, ~~przekreślenie~~, `kod`, linki takie jak https://ittools.tech i przypisy[^1].

> [!NOTE]
> Alerty GitHub też działają: wypróbuj TIP, IMPORTANT, WARNING lub CAUTION.

## Zadania i tabele

- [x] Napisać README
- [ ] Dodać diagram

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

## Diagramy i wzory

```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]: Wszystko jest przetwarzane w przeglądarce; dokument nie jest wysyłany na żaden serwer.

Słowa: 0 · wiersze: 0 · czas czytania: 0 min

Jak to działa

Markdown to format plików README, dokumentacji technicznej, wiki i notatek w niemal każdym narzędziu programistycznym, ale każda platforma dodaje do niego własne rozszerzenia. Ta przeglądarka stosuje GitHub Flavored Markdown (GFM), najpopularniejszy wariant: oprócz podstaw renderuje tabele, listy zadań, przekreślenie, automatyczne linki, przypisy oraz alerty NOTE, TIP, IMPORTANT, WARNING i CAUTION.

Bloki kodu oznaczone jako mermaid zamieniają się w diagramy (przepływu, sekwencji, klas, stanów, encja-relacja, Gantta, Git i inne), wzory między znakami $ są rysowane za pomocą KaTeX, a pozostały kod jest podświetlany zgodnie ze wskazanym językiem. Jeśli dokument zaczyna się blokiem YAML między liniami ---, jak w Jekyll, Hugo czy Docusaurus, jest on wyświetlany jako osobna tabela.

Dokument nie opuszcza twojej przeglądarki. Zawarty w nim HTML jest oczyszczany przed wyświetleniem, więc otwarcie cudzego README nie uruchamia skryptów, a biblioteki diagramów i wzorów są pobierane tylko wtedy, gdy dokument z nich korzysta.

Przykłady

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

Commit → Build → DeployBlok kodu z językiem mermaid jest rysowany jako diagram. Jeśli zawiera błąd składni, kod pozostaje widoczny, a pod nim pojawia się komunikat Mermaid.

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

#getting-started · #api-v20-beta · #getting-started-1Nagłówki otrzymują taki sam id jak na GitHubie: małe litery, spacje zamienione na myślniki, bez znaków interpunkcyjnych i z numerem na końcu, jeśli się powtarzają. Dzięki temu link [tekst](#getting-started) działa tak samo tutaj i w repozytorium.

Line one
Line two

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

W standardowym Markdown pojedynczy podział wiersza nie przerywa akapitu; trzeba zostawić pustą linię albo zakończyć wiersz dwiema spacjami. Komentarze i issues na GitHubie je zachowują: aby zobaczyć tekst w ten sposób, włącz Zachowaj podziały wierszy.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.Cytat zaczynający się od [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] lub [!CAUTION] jest wyświetlany jako kolorowy alert, tak jak na GitHubie. Na platformach, które ich nie obsługują, wygląda jak zwykły cytat.

Przypadki użycia

Sprawdzenie, jak będzie wyglądać README lub CHANGELOG, zanim wyślesz go do repozytorium.
Przeczytanie pobranego pliku .md bez instalowania edytora: otwierasz go przyciskiem lub przeciągając.
Testowanie diagramów Mermaid architektury, przepływów lub sekwencji i poprawianie składni z podglądem na żywo.
Konwersja dokumentacji na samodzielną stronę HTML lub PDF, aby udostępnić ją osobom, które nie korzystają z Gita.
Pisanie notatek lub dokumentacji technicznej ze wzorami matematycznymi w notacji LaTeX.
Wyświetlenie tekstu Markdown zwróconego przez asystenta AI z formatowaniem, tabelami i blokami kodu.

Najczęstsze pytania

Jakie typy diagramów Mermaid można narysować?

Wszystkie, które oferuje Mermaid: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture, kanban i inne. Diagramy używają jasnych lub ciemnych kolorów zgodnie z motywem strony i są rysowane w trybie ścisłym: tekst etykiet nie może wstrzyknąć HTML ani uruchomić kodu po kliknięciu.

Jak napisać wzór matematyczny?

Między znakami $ dla wzoru w linii, np. $a^2 + b^2 = c^2$, a między $$ lub w bloku kodu z językiem math dla wzoru wyśrodkowanego w osobnym wierszu. Składnia to LaTeX obsługiwany przez KaTeX. Aby wpisać dosłowny znak $, np. w cenie, poprzedź go ukośnikiem odwrotnym; zresztą "$5 i $10" nie jest traktowane jako wzór, bo drugi $ ma przed sobą spację, a po sobie cyfrę.

Czy mogę używać HTML w Markdown?

Tak, tak jak na GitHubie: znaczniki takie jak details i summary dla rozwijanych sekcji, kbd dla klawiszy, sub i sup, img z rozmiarem czy p z align. Przed wyświetleniem usuwane są skrypty, atrybuty zdarzeń takie jak onclick, linki javascript: oraz znaczniki style i form, więc cudzy dokument nie może uruchomić kodu ani zmienić reszty strony.

Jak zapisać go jako PDF?

Opcja Drukuj lub zapisz do PDF w menu Eksportuj otwiera okno drukowania tylko z dokumentem, bez interfejsu strony, i tam wybierasz Zapisz jako PDF. Tabele, bloki kodu i diagramy nie są dzielone między strony. Jeśli wolisz plik do opublikowania, Pobierz .html generuje samodzielną stronę z dołączonymi stylami.

Dlaczego obraz ze ścieżką względną się nie wyświetla?

Ponieważ przeglądarka nie ma dostępu do pozostałych folderów repozytorium: ścieżka taka jak ./docs/logo.png istnieje tylko na twoim dysku lub na GitHubie. Obrazy z pełnym adresem, zaczynającym się od https://, wyświetlają się bez problemu.