Mermaid के साथ Markdown व्यूअर और एडिटर

Markdown दस्तावेज़

कोई Markdown फ़ाइल लिखें, पेस्ट करें या खोलें और GitHub की तरह तुरंत पूर्वावलोकन देखें: टेबल, टास्क लिस्ट, फ़ुटनोट, अलर्ट, Mermaid डायग्राम, LaTeX फ़ॉर्मूले और हाइलाइट किया गया कोड। इसके बाद आप इसे HTML के रूप में डाउनलोड कर सकते हैं या PDF में सहेज सकते हैं। सब कुछ आपके ब्राउज़र में प्रोसेस होता है।

विषय-सूची

सिंक्रोनाइज़्ड स्क्रॉल

लाइन ब्रेक बनाए रखें

---
title: "उदाहरण दस्तावेज़"
tags: [markdown, mermaid, katex]
---

# उदाहरण दस्तावेज़

इस टेक्स्ट को एडिट करें और नतीजा तुरंत देखें। यह **बोल्ड**, *इटैलिक*, ~~स्ट्राइकथ्रू~~, `कोड`, https://ittools.tech जैसे लिंक और फ़ुटनोट[^1] सपोर्ट करता है।

> [!NOTE]
> GitHub अलर्ट भी काम करते हैं: TIP, IMPORTANT, WARNING या CAUTION आज़माकर देखें।

## टास्क और टेबल

- [x] README लिखना
- [ ] एक डायग्राम जोड़ना

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

## डायग्राम और फ़ॉर्मूले

```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]: सब कुछ आपके ब्राउज़र में प्रोसेस होता है; दस्तावेज़ किसी सर्वर पर नहीं भेजा जाता।

0 शब्द · 0 पंक्तियाँ · पढ़ने में 0 मिनट

यह कैसे काम करता है

Markdown README, तकनीकी डॉक्यूमेंटेशन, विकी और लगभग हर डेवलपमेंट टूल के नोट्स का फ़ॉर्मेट है, लेकिन हर प्लेटफ़ॉर्म इसमें अपने एक्सटेंशन जोड़ता है। यह व्यूअर GitHub Flavored Markdown (GFM) का पालन करता है, जो सबसे ज़्यादा इस्तेमाल होने वाला वैरिएंट है: बुनियादी चीज़ों के अलावा यह टेबल, टास्क लिस्ट, स्ट्राइकथ्रू, ऑटो-लिंक, फ़ुटनोट और NOTE, TIP, IMPORTANT, WARNING और CAUTION अलर्ट भी दिखाता है।

mermaid के रूप में चिह्नित कोड ब्लॉक डायग्राम में बदल जाते हैं (फ़्लो, सीक्वेंस, क्लास, स्टेट, एंटिटी-रिलेशनशिप, Gantt, Git और भी बहुत कुछ), $ चिह्नों के बीच के फ़ॉर्मूले KaTeX से बनाए जाते हैं और बाकी कोड बताई गई भाषा के अनुसार हाइलाइट होता है। अगर दस्तावेज़ --- लाइनों के बीच एक YAML ब्लॉक से शुरू होता है, जैसे Jekyll, Hugo या Docusaurus में, तो वह एक अलग टेबल के रूप में दिखाया जाता है।

दस्तावेज़ आपके ब्राउज़र से बाहर नहीं जाता। इसमें मौजूद HTML को दिखाने से पहले साफ़ किया जाता है, इसलिए किसी और का README खोलने पर कोई स्क्रिप्ट नहीं चलती, और डायग्राम व फ़ॉर्मूलों की लाइब्रेरी तभी डाउनलोड होती हैं जब दस्तावेज़ उनका इस्तेमाल करता है।

उदाहरण

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

Commit → Build → Deploymermaid भाषा वाला कोड ब्लॉक डायग्राम के रूप में बनाया जाता है। अगर उसमें सिंटैक्स की गलती हो, तो कोड दिखता रहता है और उसके नीचे Mermaid का संदेश आता है।

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

#getting-started · #api-v20-beta · #getting-started-1हेडिंग को वही id मिलती है जो GitHub देता है: छोटे अक्षर, स्पेस की जगह हाइफ़न, बिना विराम चिह्नों के और दोहराए जाने पर अंत में एक संख्या। इसलिए [टेक्स्ट](#getting-started) जैसा लिंक यहाँ और रिपॉज़िटरी में एक जैसा काम करता है।

Line one
Line two

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

स्टैंडर्ड Markdown में एक अकेला लाइन ब्रेक पैराग्राफ़ नहीं तोड़ता; इसके लिए एक खाली लाइन छोड़नी होती है या लाइन को दो स्पेस से ख़त्म करना होता है। GitHub के कमेंट और issues इसे बनाए रखते हैं: टेक्स्ट को इसी तरह देखने के लिए लाइन ब्रेक बनाए रखें चालू करें।

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.[!NOTE], [!TIP], [!IMPORTANT], [!WARNING] या [!CAUTION] से शुरू होने वाला उद्धरण GitHub की तरह रंगीन अलर्ट के रूप में दिखाया जाता है। जो प्लेटफ़ॉर्म इन्हें सपोर्ट नहीं करते, वहाँ यह सामान्य उद्धरण जैसा दिखता है।

उपयोग के मामले

README या CHANGELOG को रिपॉज़िटरी में अपलोड करने से पहले देखना कि वह कैसा दिखेगा।
डाउनलोड की गई .md फ़ाइल को बिना कोई एडिटर इंस्टॉल किए पढ़ना: इसे बटन से या ड्रैग करके खोला जा सकता है।
आर्किटेक्चर, फ़्लो या सीक्वेंस के Mermaid डायग्राम आज़माना और लाइव पूर्वावलोकन के साथ सिंटैक्स ठीक करना।
डॉक्यूमेंटेशन को एक स्वतंत्र HTML पेज या PDF में बदलना, ताकि उसे उन लोगों के साथ शेयर किया जा सके जो Git का इस्तेमाल नहीं करते।
LaTeX नोटेशन में गणितीय फ़ॉर्मूलों के साथ नोट्स या तकनीकी डॉक्यूमेंटेशन लिखना।
किसी AI असिस्टेंट से मिले Markdown टेक्स्ट को उसके फ़ॉर्मेट, टेबल और कोड ब्लॉक के साथ देखना।

अक्सर पूछे जाने वाले प्रश्न

Mermaid के कौन-कौन से डायग्राम बनाए जा सकते हैं?

Mermaid में मौजूद सभी: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture, kanban और भी कई। डायग्राम साइट की थीम के अनुसार हल्के या गहरे रंगों का इस्तेमाल करते हैं और स्ट्रिक्ट मोड में बनाए जाते हैं: लेबल का टेक्स्ट न तो HTML इंजेक्ट कर सकता है और न ही क्लिक करने पर कोड चला सकता है।

गणितीय फ़ॉर्मूला कैसे लिखूँ?

इनलाइन फ़ॉर्मूले के लिए $ चिह्नों के बीच, जैसे $a^2 + b^2 = c^2$, और अपनी अलग पंक्ति में बीच में दिखने वाले फ़ॉर्मूले के लिए $$ के बीच या math भाषा वाले कोड ब्लॉक में। सिंटैक्स वही LaTeX है जिसे KaTeX सपोर्ट करता है। कीमत की तरह शाब्दिक $ चिह्न लिखने के लिए उससे पहले बैकस्लैश लगाएँ; वैसे भी "$5 और $10" को फ़ॉर्मूला नहीं माना जाता, क्योंकि दूसरे $ से पहले स्पेस है और उसके बाद एक अंक।

क्या मैं Markdown के अंदर HTML इस्तेमाल कर सकता हूँ?

हाँ, GitHub की तरह: खुलने-बंद होने वाले सेक्शन के लिए details और summary, कुंजियों के लिए kbd, sub और sup, आकार के साथ img या align के साथ p जैसे टैग। दिखाने से पहले स्क्रिप्ट, onclick जैसे इवेंट एट्रिब्यूट, javascript: लिंक और style व form टैग हटा दिए जाते हैं, इसलिए किसी और का दस्तावेज़ न तो कोड चला सकता है और न ही पेज के बाकी हिस्से को बदल सकता है।

इसे PDF में कैसे बदलूँ?

एक्सपोर्ट करें में प्रिंट करें या PDF में सहेजें चुनने पर साइट के इंटरफ़ेस के बिना, केवल दस्तावेज़ के साथ प्रिंट डायलॉग खुलता है; वहाँ PDF के रूप में सहेजें चुनें। टेबल, कोड ब्लॉक और डायग्राम को पेजों के बीच कटने से बचाया जाता है। अगर आप प्रकाशित करने के लिए फ़ाइल चाहते हैं, तो .html डाउनलोड करें स्टाइल सहित एक स्वतंत्र पेज बनाता है।

रिलेटिव पाथ वाली इमेज क्यों नहीं दिखती?

क्योंकि व्यूअर के पास रिपॉज़िटरी के दूसरे फ़ोल्डरों तक पहुँच नहीं है: ./docs/logo.png जैसा पाथ केवल आपकी डिस्क पर या GitHub पर मौजूद होता है। https:// से शुरू होने वाले पूरे पते वाली इमेज बिना किसी दिक्कत के दिखती हैं।