अपने Obsidian थीम को बदले बिना Mermaid फ्लोचार्ट्स को स्टाइल करें

Mac पर Obsidian में पढ़ने योग्य, सुसंगत Mermaid फ्लोचार्ट्स के लिए, प्रत्येक डायग्राम के अंदर पुन: प्रयोज्य नोड स्टाइल्स परिभाषित करें। अपना ऐप थीम रखें, जांचें कि आपका इंस्टॉल किया गया संस्करण किस रेंडरर का उपयोग करता है, और केवल तब डायग्राम-स्कोप्ड CSS जोड़ें जब आपको साझा डिफॉल्ट्स की आवश्यकता हो।

यह वॉकथ्रू एक छोटा फ्लोचार्ट बनाता है जिसमें सुसंगत नोड फिल्स, पढ़ने योग्य लेबल्स, और एक स्पष्ट रूप से चिह्नित वैकल्पिक चरण होता है। सभी लेबल सिंथेटिक हैं। लक्ष्य सामान्य नोट्स के लिए एक पुन: प्रयोज्य स्टाइलिंग पैटर्न है, जिसमें अलग निर्देश हैं जहां Mermaid और Obsidian के नए Pele रेंडरर अलग व्यवहार करते हैं।

सेटिंग्स चुनने से पहले अपना इंस्टॉल किया गया रेंडरर जांचें

Settings → About → App → Current version के तहत अपना बिल्ड खोजें, वह स्थान जो Obsidian के Early access versions help में दस्तावेज़ीकृत है। स्टाइल्स का समस्या निवारण करने से पहले उस संस्करण को रिकॉर्ड करें।

एक महत्वपूर्ण सीमा है: Obsidian 1.15.0 Desktop, जिसे Early access चिह्नित किया गया है, के 22 अक्टूबर 2026 के रिलीज नोट्स, Mermaid डायग्राम्स को रेंडर करने के लिए Pele पेश करते हैं। नोट्स कहते हैं कि यह Mermaid 12.1.0 सिंटैक्स का समर्थन करता है, थीम रंगों और फोंट्स का उपयोग करता है, और अलग SVG क्लासेस उत्पन्न करता है। वे रिलीज नोट्स उस विशेष रिलीज का वर्णन करते हैं; वे यह स्थापित नहीं करते कि आपके Mac में कौन सा रेंडरर इंस्टॉल है। Obsidian 1.15.0 Desktop देखें।

किसी अन्य ट्यूटोरियल से कॉन्फिगरेशन कॉपी करने से पहले इस निर्णय तालिका का उपयोग करें:

आपका रेंडरिंग वातावरण	इसके साथ शुरू करें	याद रखने वाली सीमा
Mermaid का उपयोग करने वाला Obsidian	स्रोत-स्तर फ्लोचार्ट क्लासेस; वैकल्पिक रूप से डायग्राम फ्रंटमैटर	कॉन्फिगरेशन सुविधाएं इंस्टॉल किए गए Mermaid संस्करण पर निर्भर करती हैं।
Pele का उपयोग करने वाला Obsidian	स्रोत-स्तर स्टाइल्स; वैकल्पिक रूप से Pele CSS वेरिएबल्स	Mermaid थीम्स और `themeVariables` रंग लागू नहीं होते।
डायग्राम रेंडरिंग को बदलने वाला प्लगइन	प्लगइन का दस्तावेज़ीकृत रेंडरर और सेटिंग्स	बिल्ट-इन रेंडरर का व्यवहार संगतता स्थापित करने के लिए पर्याप्त नहीं है।

Pele स्पष्ट रूप से अपने स्वयं के लेआउट और उपस्थिति का दस्तावेज़ीकरण करता है, तब भी जब यह Mermaid सिंटैक्स स्वीकार करता है। इसका Compatibility documentation यह भी बताता है कि कॉन्फिगरेशन समर्थन डायग्राम प्रकार के अनुसार भिन्न होता है। सिंटैक्स संगतता और समान दृश्य आउटपुट को अलग प्रश्न मानें।

नोट के अंदर एक पुन: प्रयोज्य फ्लोचार्ट स्टाइल बनाएं

एक नया नोट बनाएं और नीचे दिए गए पूर्ण ब्लॉक को पेस्ट करें, जिसमें इसके प्रारंभिक और समापन फेंस शामिल हैं। Obsidian का Advanced formatting syntax documentation डायग्राम्स के लिए mermaid लेबल वाले एक फेंस्ड कोड ब्लॉक को निर्दिष्ट करता है।

```mermaid
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
    B --> D[Option D]

    classDef standard fill:#edf2f7,stroke:#475569,color:#172033,stroke-width:2px;
    classDef alternate fill:#e0f2fe,stroke:#0369a1,color:#172033,stroke-width:2px;
    class A,B,C standard;
    class D alternate;
```

Mermaid का दस्तावेज़ीकृत classDef सिंटैक्स एक पुन: प्रयोज्य उपस्थिति को परिभाषित करता है; class इसे नामित नोड्स को असाइन करता है। यहां, तीन नोड्स standard साझा करते हैं, और एक alternate का उपयोग करता है। नोड पहचानकर्ताओं को दृश्यमान लेबल्स से अलग रखें ताकि शब्द परिवर्तन का पालन करना आसान हो। ये तंत्र Flowcharts — Basic Syntax में वर्णित हैं।

पैलेट एक दृष्टांत डिज़ाइन विकल्प है। यह गहरे टेक्स्ट और मजबूत बॉर्डर्स के साथ हल्के फिल्स को जोड़ता है। लेबल Option D वैकल्पिक चरण की पहचान भी करता है, इसलिए इसका अर्थ केवल नीले फिल पर निर्भर नहीं करता।

नोट का पूर्वावलोकन करें और अपने सामान्य पढ़ने के आकार में लेबल्स की जांच करें। इच्छित परिणाम तीन मिलते-जुलते ग्रे नोड्स और एक नीला नोड है। तीरों को शुरू में उनके रेंडरर डिफॉल्ट्स पर छोड़ दें; इससे एक समय में एक परिवर्तन को आंकना आसान हो जाता है।

पैटर्न का पुन: उपयोग करने के लिए, पूरे ब्लॉक को दूसरे नोट में कॉपी करें, लेबल्स और कनेक्शन बदलें, और अंतिम दो पंक्तियों में नोड सूचियों को अपडेट करें। पैलेट की एक संदर्भ प्रति रखें। यह एक मैनुअल कन्वेंशन है: संदर्भ को संपादित करने से पहले से कॉपी किए गए डायग्राम्स स्वचालित रूप से अपडेट नहीं होते।

Pele डायग्राम-परिभाषित स्टाइलिंग का भी समर्थन करता है, और इसका दस्तावेज़ीकरण बताता है कि जब थीम बदलती है तो स्रोत-परिभाषित रंग निश्चित रहते हैं। यह दृष्टिकोण तब उपयोगी होता है जब आप अपने Obsidian थीम को बनाए रखते हुए एक सुसंगत पैलेट चाहते हैं। Pele Theming देखें।

डायग्राम फ्रंटमैटर का उपयोग केवल तब करें जब Mermaid डायग्राम को रेंडर करता हो

यदि आपका इंस्टॉल किया गया वातावरण Mermaid का उपयोग करता है और डायग्राम फ्रंटमैटर का समर्थन करता है, तो आप एक डायग्राम के समग्र पैलेट और टाइपोग्राफी को एक साथ सेट कर सकते हैं। Mermaid संस्करण 10.5.0 से आगे फ्रंटमैटर कॉन्फिगरेशन को दस्तावेज़ीकृत करता है। इसकी साइट-स्तरीय इनिशियलाइज़ेशन एकीकृत एप्लिकेशन से संबंधित है; एक नोट लेखक डायग्राम-स्थानीय कॉन्फिगरेशन का उपयोग कर सकता है। Mermaid Configuration देखें।

यह पूर्ण विकल्प सभी तीन नोड्स के लिए एक साझा उपस्थिति सेट करता है। पहले इसे एक अलग टेस्ट ब्लॉक में उपयोग करें:

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#edf2f7"
    primaryTextColor: "#172033"
    primaryBorderColor: "#475569"
    lineColor: "#64748b"
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"
---
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
```

YAML mermaid फेंस के अंदर आता है, flowchart TD से पहले। यह डायग्राम कॉन्फिगरेशन है, जो Markdown फ़ाइल के शीर्ष पर नोट के गुणों से अलग है।

Mermaid base को अनुकूलन योग्य थीम के रूप में निर्दिष्ट करता है और इसके थीमिंग इंजन के लिए हेक्साडेसिमल रंगों की आवश्यकता होती है। इसका Theme Configuration documentation ऊपर उपयोग किए गए टेक्स्ट, फिल, बॉर्डर, लाइन, और फ़ॉन्ट वेरिएबल्स को सूचीबद्ध करता है। ये सेटिंग्स एक अलग Obsidian ऐप थीम का चयन किए बिना डायग्राम की उपस्थिति का वर्णन करती हैं।

Pele पर, इस उदाहरण के themeVariables रंगों को बदलने से वही परिणाम नहीं मिलेगा: वे रंग स्पष्ट रूप से असमर्थित हैं। निश्चित नोड रंगों के लिए स्रोत-परिभाषित क्लासेस का उपयोग करें, या साझा रेंडरर डिफॉल्ट्स के लिए नीचे दिए गए CSS-वेरिएबल दृष्टिकोण का उपयोग करें। अनदेखी Mermaid थीम सेटिंग्स को हेक्साडेसिमल मानों को समायोजित करते रहने का कारण न मानें। Pele Compatibility देखें।

एक छोटे CSS स्निपेट के साथ साझा Pele डिफॉल्ट्स जोड़ें

Pele-आधारित इंस्टॉलेशन के लिए, CSS वेरिएबल्स एक अन्य समर्थित मार्ग प्रदान करते हैं। यह तब उपयोगी होता है जब कई डायग्राम्स को डिफॉल्ट्स साझा करने चाहिए और आप हर ब्लॉक को संपादित करने के बजाय एक स्टाइलशीट बदलना पसंद करते हैं।

निम्नलिखित पूर्ण स्निपेट Pele फ्लोचार्ट्स को लक्षित करता है। यह टेक्स्ट, फिल्स, बॉर्डर्स, और कनेक्टर रंगों को सेट करता है जबकि आसपास के नोट और एप्लिकेशन थीम को अकेला छोड़ देता है। सेलेक्टर और वेरिएबल्स Pele Theming में दस्तावेज़ीकृत हैं।

.pele-flowchart {
  --pele-bg: #ffffff;
  --pele-fg: #172033;
  --pele-line: #64748b;
  --pele-surface: #edf2f7;
  --pele-surface-alt: #e2e8f0;
  --pele-border: #475569;
}

इसे Obsidian के दस्तावेज़ीकृत डेस्कटॉप वर्कफ़्लो के माध्यम से इंस्टॉल करें:

Settings खोलें।
Appearance → CSS snippets के तहत, Open snippets folder चुनें।
उस फ़ोल्डर में diagram-defaults.css नाम से एक प्लेन-टेक्स्ट फ़ाइल बनाएं और CSS को इसमें पेस्ट करें।
Appearance → CSS snippets पर लौटें और Reload snippets चुनें।
diagram-defaults सक्षम करें।

ये नियंत्रण और सहेजे गए स्निपेट परिवर्तनों का स्वचालित अनुप्रयोग CSS snippets — Obsidian Help में दस्तावेज़ीकृत हैं। Mac पर, जांचें कि आपके एडिटर ने फ़ाइलनाम को .css एक्सटेंशन के साथ सहेजा है।

पिछले अनुभाग से तीन-नोड डायग्राम का उपयोग करके साझा डिफॉल्ट्स का परीक्षण करें, इसका डायग्राम फ्रंटमैटर हटा दें। स्रोत-परिभाषित रंग रेंडरर डिफॉल्ट्स को ओवरराइड कर सकते हैं, इसलिए पहले उदाहरण की स्पष्ट नोड क्लासेस यह आंकने के लिए अनुपयुक्त हैं कि साझा फिल वेरिएबल्स ने प्रभाव डाला या नहीं।

यह स्निपेट जानबूझकर एक निश्चित लाइट पैलेट का उपयोग करता है। यदि आपके पसंदीदा पढ़ने के सेटअप को एक अलग पैलेट की आवश्यकता है, तो टेक्स्ट, सरफेस, बॉर्डर्स, और लाइन्स को एक साथ बदलें, फिर परिणाम का निरीक्षण करें। --pele-bg वेरिएबल पृष्ठभूमि तत्वों की सेवा करता है; यह पूरे डायग्राम के पीछे एक अपारदर्शी पैनल का वादा नहीं करता।

इस स्निपेट को विशेष रूप से Pele के लिए रखें। Mermaid का अपना फ्लोचार्ट दस्तावेज़ीकरण नोड स्टाइलिंग के लिए classDef की सिफारिश करता है और चेतावनी देता है कि बाहरी CSS Mermaid के आंतरिक स्टाइल्स से हार सकता है। एक रेंडरर को लक्षित करने वाली स्टाइलशीट को दूसरे के साथ काम करने वाला नहीं मानना चाहिए। Mermaid's CSS classes guidance देखें।

एक दोहराने योग्य क्रम में अपठनीय डायग्राम्स का निदान करें

जब एक डायग्राम रेंडर होता है लेकिन उसकी उपस्थिति असंगत होती है, तो निम्नलिखित क्रम का उपयोग करें। यह सिंटैक्स, स्टाइलिंग स्कोप, और उपलब्ध स्थान को आपके ऐप थीम को बदले बिना अलग करता है।

टेस्ट को कम करें। नोट के डायग्राम को एक अस्थायी नोट में कॉपी करें और तीन छोटे लेबल्स रखें। यदि छोटा उदाहरण भी विफल होता है, तो रंगों को परिष्कृत करने से पहले सिंटैक्स या रेंडरर समर्थन की जांच करें।
एक स्टाइलिंग तंत्र चुनें। अकेले स्रोत क्लासेस, अकेले Mermaid फ्रंटमैटर, या अकेले Pele वेरिएबल्स का परीक्षण करें। उन्हें तुरंत संयोजित करने से ओवरराइड्स की पहचान करना कठिन हो जाता है।
जोड़े गए रंगों की जांच करें। अपने नोड फिल के विरुद्ध टेक्स्ट का निरीक्षण करें, फिर आसपास के नोट के विरुद्ध बॉर्डर्स और तीरों का। दूसरा एक्सेंट जोड़ने से पहले अपठनीय जोड़ी को ठीक करें।
पढ़ने की चौड़ाई जांचें। उस पेन चौड़ाई में डायग्राम का पूर्वावलोकन करें जिसका आप सामान्य रूप से उपयोग करते हैं। यदि चार्ट बहुत चौड़ा हो जाए तो लेबल्स छोटे करें या ऊर्ध्वाधर व्यवस्था का प्रयास करें।
जटिलता को धीरे-धीरे पुन: पेश करें। शेष नोड्स, वैकल्पिक स्टाइल्स, और एज लेबल्स को छोटे समूहों में जोड़ें। तुलना के लिए अंतिम पठनीय संस्करण उपलब्ध रखें।

दिशा जांच के लिए, Mermaid TD को ऊपर से नीचे और LR को बाएं से दाएं दस्तावेज़ीकृत करता है। डायग्राम को फिर से लिखने से पहले केवल उस घोषणा को बदलने का प्रयास करें। Flowchart direction देखें।

अपने इंस्टॉल किए गए Obsidian रेंडरर में अंतिम परिणाम का निर्णय लें। एक बाहरी एडिटर सिंटैक्स की जांच में मदद कर सकता है, लेकिन Pele Mermaid से अलग नोड पोजिशन, स्पेसिंग, और एज पथ दस्तावेज़ीकृत करता है। मिलते-जुलते स्रोत के लिए मिलती-जुलती ज्यामिति की आवश्यकता नहीं होती।

अपने पुन: प्रयोज्य पैलेट के साथ एक छोटा संदर्भ डायग्राम रखें। एक बार जब इसके लेबल्स, नोड्स, और कनेक्टर आपके सामान्य पेन चौड़ाई पर स्पष्ट रूप से पढ़े जाते हैं, तो उसी कन्वेंशन को अपने कार्यरत नोट्स पर लागू करें। सुसंगतता एक दोहराने योग्य स्टाइल और एक ज्ञात रेंडरर सीमा से आती है; आपका Obsidian थीम जैसा है वैसा रह सकता है।

स्रोत

Advanced formatting syntax — Obsidian
CSS snippets — Obsidian
Early access versions — Obsidian
Obsidian 1.15.0 Desktop (Early access) — Obsidian
Flowcharts — Basic Syntax — Mermaid
Configuration — Mermaid
Theme Configuration — Mermaid
Theming — Pele
Compatibility — Pele

सेटिंग्स चुनने से पहले अपना इंस्टॉल किया गया रेंडरर जांचें

नोट के अंदर एक पुन: प्रयोज्य फ्लोचार्ट स्टाइल बनाएं

डायग्राम फ्रंटमैटर का उपयोग केवल तब करें जब Mermaid डायग्राम को रेंडर करता हो

एक छोटे CSS स्निपेट के साथ साझा Pele डिफॉल्ट्स जोड़ें

एक दोहराने योग्य क्रम में अपठनीय डायग्राम्स का निदान करें

स्रोत

स्रोत

आगे पढ़ें