Mermaid के कस्टम SVG आइकन: अपनी कलाकृति रजिस्टर करें

Mermaid में अपना SVG आइकन इस्तेमाल करने के लिए उसकी चित्र सामग्री और निर्देशांक आयाम Iconify आइकन सेट में रखें, mermaid.registerIconPacks() बुलाएँ और आरेख में रजिस्टर नाम का संदर्भ दें। केवल SVG फ़ाइल नाम देने से आइकन रजिस्टर नहीं होता।

यह प्रक्रिया उस पेज या ऐप के लिए है जहाँ Mermaid JavaScript आपके नियंत्रण में हो। होस्टेड Markdown संपादक केवल आरेख का टेक्स्ट उपलब्ध करा सकता है, इसलिए पूरा आइकन संग्रह तैयार करने से पहले उसके एकीकरण विकल्प देखें। एक सरल चित्रचिह्न और एक जोड़ने वाली रेखा से शुरू करें। आरेख के लेबल Mermaid में रखें, ताकि वे कलाकृति से अलग रहें।

देखें कि पैक कहाँ रजिस्टर कर सकते हैं

Mermaid का रजिस्ट्रेशन API सीधे आइकन सेट या उसे लौटाने वाला लोडर स्वीकार करता है। रजिस्टर name आरेख में इस्तेमाल उपसर्ग बनता है। इस उदाहरण में पैक garden और आइकन leaf है, जिससे संदर्भ garden:leaf बनता है।

रजिस्ट्रेशन रेंडरर तैयार करने वाली JavaScript में होता है। वह JavaScript Mermaid कोड ब्लॉक में पेस्ट करना वही काम नहीं है। प्रकाशन प्लेटफ़ॉर्म रेंडरर कॉन्फ़िगर न करने दे तो उसके समर्थित आइकन सेट इस्तेमाल करें या अपने नियंत्रण वाली प्रक्रिया में आरेख रेंडर करके एक्सपोर्ट परिणाम डालें। बाद के संपादन के लिए उस परिणाम के साथ Mermaid मूल फ़ाइल रखें।

इस लेख के लिए स्थानीय HTTP से उपलब्ध सामान्य HTML पेज इस्तेमाल करें। यह CDN से निश्चित Mermaid 12.0.0 मॉड्यूल लोड करता है, इसलिए नेटवर्क चाहिए। प्रोडक्शन ऐप इसके बजाय अपना चुना Mermaid संस्करण साथ पैक कर सकता है। उदाहरण अपनाने से पहले वह संस्करण और होस्ट की सामग्री सुरक्षा नीति जाँचें।

SVG के चित्र निर्देशांक बचाएँ

हमारे परीक्षण की मूल पत्ती यह है। कलाकृति अलग जाँचनी हो तो leaf.svg के रूप में सेव करें:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24">
  <path fill="#167c72"
    d="M3 19C1 5 14 2 29 3C29 17 17 25 3 19Z"/>
  <path fill="none" stroke="#d7f1ca" stroke-width="1.8"
    d="M5 18L23 7"/>
</svg>

Iconify का body फ़ील्ड बाहरी <svg> तत्व के बिना SVG रूट के भीतर की सामग्री रखता है। निर्देशांक आयत अलग left, top, width और height में जाता है। इस फ़ाइल में शुरुआत शून्य है और आयाम 32 गुणा 24 हैं।

इसके बजाय रेंडर किया CSS आकार कॉपी न करें। 64 पिक्सेल पर दिखाई गई फ़ाइल का viewBox फिर भी 0 0 32 24 हो सकता है। उसके पाथ उस viewBox के निर्देशांक तंत्र में बने हैं। शुरुआत शून्य न हो तो संबंधित left और top मान भी बचाएँ, या पैक करने से पहले जानबूझकर कलाकृति शून्य से शुरू कैनवस पर खिसकाएँ।

Iconify सेट में prefix और icons ऑब्जेक्ट होता है। हर आइकन कुंजी उसके चित्र का नाम है। यहाँ स्पष्ट आयाम उपयोगी हैं: आइकन और सेट दोनों में वे न हों तो Iconify की डिफ़ॉल्ट चौड़ाई तथा ऊँचाई 16 हैं। इससे बड़े कैनवस की कलाकृति कट सकती है।

चित्रचिह्नों का समूह बना रहे हों तो पहले आउटलाइन, खाली जगह और दृश्य मोटाई तय करें। हमारी SVG UI-किट तैयारी मार्गदर्शिका मूल कलाकृति के उन निर्णयों को समझाती है। आइकन पैक करने से उसकी बाहरी आकृति बेहतर नहीं होती।

दो नोड वाला पूरा उदाहरण चलाएँ

इसे नए फ़ोल्डर में index.html के रूप में सेव करें। Python उपलब्ध हो तो उस फ़ोल्डर में python3 -m http.server 8000 चलाएँ, फिर ब्राउज़र में http://localhost:8000 खोलें।

<!doctype html>
<meta charset="utf-8">
<title>Custom Mermaid leaf icon</title>
<div id="diagram"></div>
 
<script type="module">
import mermaid from
  'https://cdn.jsdelivr.net/npm/mermaid@12.0.0/dist/mermaid.esm.min.mjs';
 
const icons = {
  prefix: 'garden',
  icons: {
    leaf: {
      width: 32,
      height: 24,
      body: '<path fill="#167c72" d="M3 19C1 5 14 2 29 3C29 17 17 25 3 19Z"/>' +
        '<path fill="none" stroke="#d7f1ca" stroke-width="1.8" d="M5 18L23 7"/>'
    }
  }
};
 
mermaid.registerIconPacks([{ name: 'garden', icons }]);
mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
 
const definition = `architecture-beta
  service source(garden:leaf)[Source]
  service library(database)[Library]
  source:R --> L:library`;
 
const { svg } = await mermaid.render('garden-diagram', definition);
document.querySelector('#diagram').innerHTML = svg;
</script>

आपको डेटाबेस प्रतीक के पास पत्ती और Source से Library को जोड़ती रेखा दिखनी चाहिए। पत्ती रजिस्टर पैक से आती है; database Mermaid के अंतर्निहित आर्किटेक्चर आइकन में से है। आर्किटेक्चर लिखने का संदर्भ गोल कोष्ठक में आइकन नाम, चौकोर कोष्ठक में लेबल और रेखाओं के लिए सेवा के किनारे बताता है।

यह उदाहरण अपने-आप रेंडर करना बंद करता है और रजिस्ट्रेशन के बाद एक स्पष्ट render() कॉल करता है। इससे परीक्षण के दौरान क्रम दिखाई देता है। मौजूदा साइट में जोड़ते समय सुनिश्चित करें कि रजिस्ट्रेशन और रेंडर कॉल एक ही Mermaid इंस्टेंस इस्तेमाल करें।

यह उदाहरण के लिए बनाया छोटा, भरोसेमंद चित्र है। बड़े आइकन संग्रह में Iconify के इंपोर्ट और सफ़ाई टूल इस्तेमाल करें; यह न मानें कि हर एक्सपोर्ट SVG बिना अतिरिक्त काम पाथ स्ट्रिंग में घटाया जा सकता है। फ़ॉन्ट, बाहरी इमेज, शैलियाँ और संदर्भित परिभाषाएँ अलग जाँच माँगती हैं।

गायब रजिस्ट्रेशन और गायब आयाम की तुलना करें

हमने Mermaid 12.0.0 से अलग ब्राउज़र दस्तावेज़ों में इस आरेख की तीन प्रतियाँ रेंडर कीं। पहली में रजिस्ट्रेशन छोड़ा। दूसरी में पत्ती के दोनों पाथ रजिस्टर किए लेकिन आयाम छोड़े। तीसरी में वही पाथ width: 32 और height: 24 के साथ रजिस्टर किए।

पहली रेंडरिंग में Mermaid ने कस्टम पत्ती की जगह प्रश्नचिह्न दिखाया। आउटपुट में पत्ती का पाथ नहीं था। दूसरी में आउटपुट के viewBox="0 0 16 16" वाले SVG में पाथ था और पत्ती स्पष्ट रूप से कटी थी। तीसरी में आइकन का viewBox="0 0 32 24" था और पूरी पत्ती दिखी।

ये परिणाम इसी नमूने और संस्करण के हैं। ये नहीं बताते कि हर होस्ट अनुपलब्ध आइकन को इसी तरह दिखाता है। उदाहरण में हाथ से बनाए SVG पाथ भी हैं; यह PerfectVector रूपांतरण परिणाम नहीं है।

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

ज़रूरत हो तो रास्टर कलाकृति प्रक्रिया में लाएँ

कस्टम चित्रचिह्न केवल PNG या JPG में बचा हो तो PerfectVector की क्लिपआर्ट से SVG प्रक्रिया संपादन योग्य सीमाएँ वापस प्राप्त करने में मदद कर सकती है। प्रति को चित्रचिह्न तक क्रॉप करें, वेक्टर परिणाम देखें और बाहरी आकृति, भीतर के अंतर तथा अवांछित बैकग्राउंड आकृतियाँ जाँचें। फिर संपादक में SVG खोलें और आरेख के लिए अपना इच्छित छोटा रूप तैयार करें।

उस संपादन योग्य SVG मूल प्रति को रखें। इच्छित आइकन आकार पर स्पष्ट दिखने के बाद ही उसकी चित्र सामग्री और निर्देशांक पैक करें। सरल ज्यामितीय प्रतीक दोबारा बनाना तेज़ हो सकता है; फ़ोटोग्राफ़ अलग इमेज में अधिक स्पष्ट हो सकता है। उपयुक्त SVG कलाकृति पहले से हो तो पैकिंग चरण से शुरू करें।

वेक्टराइज़ेशन आरेख की सेवा के नाम, संबंध या रेखाओं की दिशा वापस नहीं लाता। वे Mermaid मूल फ़ाइल में रखें। अलग आकृति व्यवहार वाले कैनवस संपादक के लिए draw.io में कस्टम SVG आकृतियाँ देखें। सामान्य वेबपेज में दोबारा इस्तेमाल होने वाले आइकन के लिए SVG symbol स्प्राइट एक और पैकिंग तरीका है। DOT आधारित आरेखों के लिए Graphviz SVG नोड इमेज वितरण देखें कि एक्सपोर्ट ग्राफ़ के साथ कस्टम कलाकृति जाती है या नहीं।

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

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

क्या Mermaid आइकन संदर्भ में SVG फ़ाइल नाम रख सकता हूँ? रजिस्टर आइकन पैक प्रक्रिया में garden:leaf जैसा पैक नाम और आइकन कुंजी इस्तेमाल करें। SVG चित्र को आइकन डेटा बनाएँ और रेंडरर की JavaScript में वह पैक रजिस्टर करें।

मेरा कस्टम Mermaid आइकन क्यों कट रहा है? स्रोत viewBox की आइकन डेटा के निर्देशांक गुणों से तुलना करें। आइकन और सेट दोनों के आयाम गायब हों तो डिफ़ॉल्ट चौड़ाई तथा ऊँचाई 16 होती हैं, जो चित्र के लिए कम हो सकती हैं।

क्या यह हर होस्टेड Markdown संपादक में चलता है? नहीं। होस्ट को आरेख लिखावट का समर्थन और ज़रूरी पैक रजिस्टर करने का तरीका देना होगा, या पैक पहले से होना चाहिए। स्थानीय सेटअप समान मानने के बजाय वास्तविक प्रकाशन गंतव्य परखें।

स्रोत

1. Mermaid — आइकन पैक रजिस्टर करना — सीधे आइकन डेटा, लोडर और रजिस्ट्रेशन नाम बताता है।
2. Mermaid — आर्किटेक्चर आरेख — सेवा आइकन, आरेख के अपने लेबल, अंतर्निहित आइकन और रेखा लिखावट परिभाषित करता है।
3. Iconify — IconifyIcon — SVG आवरण के बिना चित्र सामग्री और निर्देशांक गुण परिभाषित करता है।
4. Iconify — IconifyJSON — पैक संरचना और आइकन को मिलने वाले डिफ़ॉल्ट आयाम परिभाषित करता है।

आरेख के लिए केवल रास्टर चित्रचिह्न है? PerfectVector से SVG का संभावित रूप तैयार करें, उसकी आकृति और अंतर जाँचें, फिर एक आइकन रजिस्टर करके अंतिम Mermaid रेंडरर में उसकी सीमाएँ तथा लेबल देखें।