Mermaid destekli Markdown görüntüleyici ve düzenleyici

Markdown belgesi

Bir Markdown dosyası yazın, yapıştırın veya açın ve önizlemeyi GitHub'daki gibi anında görün: tablolar, görev listeleri, dipnotlar, uyarılar, Mermaid diyagramları, LaTeX formülleri ve vurgulanmış kod. Ardından HTML olarak indirebilir veya PDF olarak kaydedebilirsiniz. Her şey tarayıcınızda işlenir.

İçindekiler

Senkronize kaydırma

Satır sonlarını koru

---
title: "Örnek belge"
tags: [markdown, mermaid, katex]
---

# Örnek belge

Bu metni düzenleyin ve sonucu anında görün. **Kalın**, *italik*, ~~üstü çizili~~, `kod`, https://ittools.tech gibi bağlantılar ve dipnotlar[^1] desteklenir.

> [!NOTE]
> GitHub uyarıları da çalışır: TIP, IMPORTANT, WARNING veya CAUTION deneyin.

## Görevler ve tablolar

- [x] README'yi yaz
- [ ] Bir diyagram ekle

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

## Diyagramlar ve formüller

```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]: Her şey tarayıcınızda işlenir; belge hiçbir sunucuya gönderilmez.

0 kelime · 0 satır · 0 dk okuma

Nasıl çalışır

Markdown; README'lerin, teknik belgelerin, wikilerin ve neredeyse her geliştirme aracındaki notların biçimidir, ancak her platform ona kendi uzantılarını ekler. Bu görüntüleyici, en yaygın varyant olan GitHub Flavored Markdown'ı (GFM) izler: temel özelliklerin yanı sıra tabloları, görev listelerini, üstü çizili metni, otomatik bağlantıları, dipnotları ve NOTE, TIP, IMPORTANT, WARNING ve CAUTION uyarılarını işler.

mermaid olarak işaretlenmiş kod blokları diyagramlara dönüşür (akış, sıralama, sınıf, durum, varlık-ilişki, Gantt, Git ve daha fazlası), $ işaretleri arasındaki formüller KaTeX ile çizilir ve diğer kodlar belirtilen dile göre vurgulanır. Belge, Jekyll, Hugo veya Docusaurus'takiler gibi --- satırları arasında bir YAML bloğuyla başlıyorsa bu blok ayrı bir tablo olarak gösterilir.

Belge tarayıcınızdan çıkmaz. İçerdiği HTML görüntülenmeden önce temizlenir; bu nedenle üçüncü taraf bir README açmak betik çalıştırmaz. Diyagram ve formül kütüphaneleri de yalnızca belge bunları kullanıyorsa indirilir.

Örnekler

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

Commit → Build → DeployDili mermaid olan bir kod bloğu diyagram olarak çizilir. Sözdizimi hatası varsa kod görünür kalır ve altında Mermaid'in mesajı gösterilir.

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

#getting-started · #api-v20-beta · #getting-started-1Başlıklar, GitHub'ın verdiği id'nin aynısını alır: küçük harfler, tireyle değiştirilmiş boşluklar, noktalama işaretleri olmadan ve tekrarlanıyorsa sonunda bir numara. Böylece [metin](#getting-started) gibi bir bağlantı burada ve depoda aynı şekilde çalışır.

Line one
Line two

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

Standart Markdown'da tek bir satır sonu paragrafı bölmez; boş bir satır bırakmanız veya satırı iki boşlukla bitirmeniz gerekir. GitHub yorumları ve issue'ları ise satır sonlarını korur: metni böyle görmek için Satır sonlarını koru seçeneğini etkinleştirin.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.[!NOTE], [!TIP], [!IMPORTANT], [!WARNING] veya [!CAUTION] ile başlayan bir alıntı, GitHub'daki gibi renkli bir uyarı olarak gösterilir. Bunları desteklemeyen platformlarda normal bir alıntı olarak görünür.

Kullanım senaryoları

Bir README veya CHANGELOG'un depoya göndermeden önce nasıl görüneceğini kontrol etmek.
İndirilmiş bir .md dosyasını düzenleyici kurmadan okumak: düğmeyle veya sürükleyerek açılır.
Mimari, akış veya sıralama Mermaid diyagramlarını denemek ve sözdizimini canlı önizlemeyle düzeltmek.
Belgeleri, Git kullanmayanlarla paylaşmak için bağımsız bir HTML sayfasına veya PDF'e dönüştürmek.
LaTeX gösterimiyle matematiksel formüller içeren notlar veya teknik belgeler yazmak.
Bir yapay zekâ asistanının döndürdüğü Markdown metnini biçimlendirmesi, tabloları ve kod bloklarıyla birlikte görmek.

Sık sorulan sorular

Hangi Mermaid diyagram türleri çizilebilir?

Mermaid'in sunduğu türlerin tümü: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture, kanban ve diğerleri. Diyagramlar sitenin temasına göre açık veya koyu renkler kullanır ve katı modda çizilir: etiket metni HTML enjekte edemez veya tıklandığında kod çalıştıramaz.

Matematiksel bir formülü nasıl yazarım?

Satır içi formül için $ işaretleri arasına, örneğin $a^2 + b^2 = c^2$; kendi satırında ortalanmış bir formül için $$ arasına veya dili math olan bir kod bloğuna yazın. Sözdizimi, KaTeX'in desteklediği LaTeX'tir. Fiyatlardaki gibi düz bir $ işareti yazmak için önüne ters eğik çizgi koyun; yine de "$5 ve $10" formül olarak algılanmaz, çünkü ikinci $ işaretinden önce boşluk, sonra ise rakam gelir.

Markdown içinde HTML kullanabilir miyim?

Evet, GitHub'daki gibi: açılır bölümler için details ve summary, tuşlar için kbd, sub ve sup, boyutlu img veya align içeren p gibi etiketler. Görüntülemeden önce betikler, onclick gibi olay öznitelikleri, javascript: bağlantıları ve style ile form etiketleri kaldırılır; bu nedenle üçüncü taraf bir belge kod çalıştıramaz veya sayfanın geri kalanını değiştiremez.

PDF'e nasıl dönüştürürüm?

Dışa aktar menüsündeki Yazdır veya PDF olarak kaydet seçeneği, yazdırma iletişim kutusunu site arayüzü olmadan yalnızca belgeyle açar; orada PDF olarak kaydet seçeneğini seçin. Tabloların, kod bloklarının ve diyagramların sayfalar arasında bölünmesi önlenir. Yayınlamak için bir dosya tercih ederseniz .html indir, stilleri içeren bağımsız bir sayfa oluşturur.

Göreli yola sahip bir görsel neden görünmüyor?

Çünkü görüntüleyicinin deponun diğer klasörlerine erişimi yoktur: ./docs/logo.png gibi bir yol yalnızca diskinizde veya GitHub'da bulunur. https:// ile başlayan tam adresli görseller sorunsuz gösterilir.