Mermaid-க்கு அப்பால்: Vega-Lite மற்றும் Markdown கொண்டு செறிவான விளக்கப்படங்களை உருவாக்குதல்

ஆவணமாக்கலில் விளக்கப்படங்கள் ஏன் முக்கியம்

உங்கள் ஆவணங்களைப் படிக்கும் ஒருவருக்குத் தரவை விளக்கும்போது, ஆயிரம் வார்த்தைகளை விட ஒரு படம் சிறந்தது. விளக்கப்படங்கள் வாசகர்களுக்குப் போக்குகளைக் கண்டறியவும், பகிர்வுகளைப் புரிந்து கொள்ளவும், ஒரே பார்வையில் வடிவங்களைப் புரிந்துகொள்ளவும் உதவுகின்றன. ஜூன் 30, 2026 அன்று, மேலும் பல குழுக்கள் தங்கள் ஆவணமாக்கல் மற்றும் அறிவுத் தளங்களைத் தானியங்குபடுத்தும் போது, செறிவான காட்சிப்படுத்தல்களை நேரடியாக Markdown-இல் உட்பொதிக்கும் திறன் அவசியமாகி வருகிறது.

சவால் என்னவென்றால், பல விளக்கப்படக் கருவிகள் எளிமை அல்லது ஆற்றல் ஆகிய இரண்டில் ஒன்றிற்காகவே வடிவமைக்கப்பட்டன, அரிதாகவே இரண்டிற்கும் சேர்த்து வடிவமைக்கப்பட்டுள்ளன. உருவாக்க எளிதான, தொழில்முறையாகத் தோன்றும், மற்றும் உங்கள் ஆவணமாக்கல் பணிப்பாய்வுக்கு இயல்பாகப் பொருந்தக்கூடிய ஒன்று உங்களுக்குத் தேவை.

Mermaid எதைச் சிறப்பாகச் செய்கிறது (மற்றும் அது எங்கே நிற்கிறது)

Mermaid தான் செய்யும் காரியங்களில் சிறந்தது: பாய்வுப்படங்கள் (flowcharts), வரிசை வரைபடங்கள் (sequence diagrams), கேன்ட் விளக்கப்படங்கள் (Gantt charts), பை விளக்கப்படங்கள் (pie charts) மற்றும் அடிப்படை பட்டை விளக்கப்படங்கள் (bar charts). உங்கள் விளக்கப்படத் தேவைகள் எளிமையாக இருந்தால், Mermaid சரியான தேர்வாகும். இது பரவலாக ஆதரவு பெற்றது, எழுத எளிதானது, மற்றும் பெரும்பாலான Markdown சூழல்களில் ரெண்டர் ஆகிறது.

ஆனால் Mermaid புள்ளியியல் காட்சிப்படுத்தலுக்காக வடிவமைக்கப்படவில்லை. இரண்டு மாறிகளுக்கு இடையிலான தொடர்பைக் காட்டும் scatter plot-ஐ உருவாக்க முயற்சிக்கவும். வகைகளில் செறிவைக் காட்டும் heatmap-ஐ முயற்சிக்கவும். பகிர்வுகளை ஒப்பிடும் box plot-ஐ முயற்சிக்கவும். Mermaid இதைச் செய்ய முடியாது அல்லது மோசமாகச் செய்கிறது. Mermaid-இன் உள்ளமைக்கப்பட்ட விளக்கப்பட வகைகளுக்கு அப்பால் ஏதேனும் தேவைப்பட்டால், நீங்கள் தேங்கிவிடுவீர்கள்.

அந்த வரம்பு முக்கியமானது, ஏனெனில் தொழில்நுட்ப ஆவணங்களில் தரவு காட்சிப்படுத்தல் பெருகிய முறையில் பொதுவானதாகி வருகிறது. நீங்கள் API பதிலளிப்பு நேரங்கள், அம்ச ஏற்பு விகிதங்கள் (feature adoption rates) அல்லது பயனர் ஈடுபாட்டு முறைகளைக் காட்டினாலும், Mermaid வழங்கக்கூடியதை விட விரைவாக நீங்கள் வளர்ந்து விடுவீர்கள்.

Vega-Lite அறிமுகம்: ஒரு சக்திவாய்ந்த அணுகுமுறை

Vega-Lite என்பது ஊடாடும் காட்சிப்படுத்தல்களை உருவாக்குவதற்கான ஓர் அறிவிப்புசார் இலக்கணம் (declarative grammar) ஆகும். உங்கள் விளக்கப்படத்தைக் கையால் வரைவதற்குப் பதிலாக, JSON-ஐப் பயன்படுத்தி அதை விவரிக்கிறீர்கள். உங்கள் தரவைக் குறிப்பிடுகிறீர்கள், நெடுவரிசைகளைக் காட்சிப் பண்புகளுக்கு (x-அச்சு, y-அச்சு, வண்ணம், அளவு) மேப் செய்கிறீர்கள், Vega-Lite உங்களுக்காகக் காட்சிப்படுத்தலை ரெண்டர் செய்கிறது.

இந்த அணுகுமுறையில் பல நன்மைகள் உள்ளன. முதலாவதாக, இது நெகிழ்வானது: Vega-Lite பட்டை விளக்கப்படங்கள், கோட்டு விளக்கப்படங்கள் (line charts), scatter plots, heatmaps, box plots, பரப்பு விளக்கப்படங்கள் (area charts) மற்றும் பல டஜன் வகைகளை ஆதரிக்கிறது. இரண்டாவதாக, இது தரவு சார்ந்தது: நீங்கள் அதற்கு ஒரு தரவுத்தொகுப்பைக் கொடுத்து, தரவைக் காட்சிப் பூர்வமாகக் குறியாக்கம் செய்வது எப்படி என்று கூறுகிறீர்கள். மூன்றாவதாக, இது Markdown-உடன் நன்றாக ஒருங்கிணைக்கிறது: Vega-Lite விவரக்குறிப்புகளை (specs) நேரடியாக உங்கள் ஆவணத்தில் உட்பொதிக்கலாம்.

Vega-Lite JSON விவரக்குறிப்புகளைப் புரிந்துகொள்வது

ஒரு Vega-Lite விவரக்குறிப்பு என்பது ஒரு விளக்கப்படத்தை விவரிக்கும் JSON பொருள் (object) ஆகும். scatter plot-ஐ உருவாக்கும் எளிய உதாரணம் இதோ:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "Product Sales vs Marketing Spend",
  "data": {
    "values": [
      {"spend": 1000, "sales": 5000},
      {"spend": 2000, "sales": 8000},
      {"spend": 3000, "sales": 12000}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "spend", "type": "quantitative"},
    "y": {"field": "sales", "type": "quantitative"}
  }
}

விவரக்குறிப்பு கூறுகிறது: வழங்கப்பட்ட தரவை எடுத்து, ஒவ்வொரு வரிசையையும் ஒரு புள்ளியாக வரைந்து, spend மதிப்பை x-அச்சிலும் மற்றும் sales மதிப்பை y-அச்சிலும் வைக்கவும். Vega-Lite ரெண்டரிங்கைக் கையாள்கிறது.

இதை நீங்கள் மிகவும் சிக்கலானதாக மாற்றலாம்: வண்ணங்கள், அளவுகள், பல அடுக்குகள் (layers), வடிகட்டுதல் அல்லது ஊடாடும் அம்சங்களைச் சேர்க்கலாம். ஆனால் இது போன்ற எளிய spec கூட Mermaid-ஆல் கையாள முடியாத பயன்பாட்டு நிகழ்வுகளை உள்ளடக்கியது.

Markdown-இல் Vega-Lite-ஐ உட்பொதித்தல்

Markdown-இல் Vega-Lite விளக்கப்படத்தை உட்பொதிக்க, நீங்கள் பொதுவாக ஒரு சிறப்பு ரெண்டரருடன் ஒரு குறியீட்டு வேலி (code fence)-ஐப் பயன்படுத்துகிறீர்கள். சில Markdown சூழல்கள் ஆதரவளிக்கின்றன vega-lite ஒரு மொழி அடையாளங்காட்டியாக (language identifier):

{"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"values": [{"x": 1, "y": 2}, {"x": 2, "y": 4}]}, "mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "y"}}}

மற்ற தளங்களுக்கு Vega-Lite specs-ஐ ரெண்டர் செய்யும் ஒரு சேவையைப் பயன்படுத்த வேண்டும். சில ஆவணமாக்கல் கருவிகள் Vega-Lite-ஐ இயல்பாகவே ஆதரிக்கின்றன; மற்றவைகளுக்கு செருகுநிரல் (plugin) அல்லது ரேப்பர் (wrapper) தேவை.

நிலையான படங்களை விட இதன் நன்மை: இந்த விளக்கப்படங்கள் ஊடாடும் தன்மை கொண்டவை. வாசகர்கள் துல்லியமான மதிப்புகளைப் பார்க்க மவுஸைக் கொண்டு செல்லலாம் (hover), விவரங்களைப் பெரிதாக்கிப் பார்க்கலாம் (zoom in), அல்லது தரவுத் தொடர்களை ஆன் மற்றும் ஆஃப் செய்யலாம்.

AI மற்றும் தானியங்கிமயமாக்கலுடன் ஒருங்கிணைப்பு

AI-இயக்கப்படும் ஆவணமாக்கலுக்கு Vega-Lite நன்றாக வேலை செய்வதற்கான ஒரு காரணம் என்னவென்றால், மொழி மாதிரிகள் (language models) உருவாக்குவதற்கு JSON வடிவம் எளிதானது. "இந்தத் தரவைக் காட்டும் விளக்கப்படத்தை உருவாக்கு" என்று நீங்கள் ஒரு AI முகவரிடம் கேட்கும்போது, அது தெளிவின்மை இல்லாமல் செல்லுபடியாகும் Vega-Lite spec-ஐ வெளியிட முடியும்.

இது புதிய பணிப்பாய்வுகளைத் திறக்கிறது. மூலத் தரவை எடுத்து, பொருத்தமான காட்சிப்படுத்தல்களைத் தானாக உருவாக்கி, பின்னர் அவற்றை Markdown-இல் உட்பொதிக்கும் ஓர் ஆவணமாக்கல்-உருவாக்கத் திறனைக் கற்பனை செய்து பாருங்கள். அல்லது புதிய தரவுத்தொகுப்புகளை ஏற்றுக்கொண்டு, தேவைக்கேற்ப விளக்கப்படங்களை மீண்டும் உருவாக்கும் ஆவணப் பைப்லைனைக் கற்பனை செய்து பாருங்கள்.

AI முகவர்கள் உங்கள் தரவுக்குச் சரியான விளக்கப்பட வகையையும் தேர்ந்தெடுக்கலாம். ஒரு மொழி மாதிரி உங்கள் தரவுத்தொகுப்பைப் பார்த்துத் தீர்மானிக்கலாம்: "இது ஒரு பகிர்வு போல் தெரிகிறது — நான் ஒரு histogram-ஐப் பயன்படுத்துவேன்." அல்லது "இது நேரத் தொடர் தரவு — நான் கோட்டு விளக்கப்படத்தைப் பயன்படுத்துவேன்." எந்த விளக்கப்படத்தைப் பயன்படுத்துவது என்பதைத் தீர்மானிக்கும் கையேடு படியை இது நீக்குகிறது.

விளக்கப்பட உருவாக்கப் பணிப்பாய்வைக் கட்டமைத்தல்

படி 1: உங்கள் தரவை ஆயத்தப்படுத்தவும்

உங்கள் தரவை அமைக்கப்பட்ட வடிவத்தில் சேகரிக்கவும். JSON வரிசைகள் (arrays) நன்றாக வேலை செய்கின்றன, ஆனால் CSV அல்லது பிற வடிவங்களும் சரியே. ஒவ்வொரு பதிவிலும் தெளிவான புலப் பெயர்கள் இருப்பதை உறுதிசெய்யவும்.

[
  {"month": "January", "revenue": 45000, "expenses": 32000},
  {"month": "February", "revenue": 52000, "expenses": 35000},
  {"month": "March", "revenue": 58000, "expenses": 38000}
]

படி 2: உங்கள் காட்சிப்படுத்தலை வடிவமைக்கவும்

உங்கள் தரவு என்ன கதையைச் சொல்கிறது என்பதைப் பற்றி யோசியுங்கள். நீங்கள் ஒரு போக்கைக் காட்டுகிறீர்களா? ஒரு ஒப்பீடா? ஒரு பகிர்வா? இது உங்கள் விளக்கப்பட வகையைத் தீர்மானிக்கிறது.

படி 3: Vega-Lite Spec-ஐ உருவாக்கவும்

JSON விவரக்குறிப்பை எழுதவும், அல்லது அதை உருவாக்க ஓர் AI கருவியைப் பயன்படுத்தவும். தரவு மூலம், விளக்கப்பட வகை மற்றும் நெடுவரிசைகள் காட்சிப் பண்புகளுக்கு எவ்வாறு மேப் செய்யப்படுகின்றன என்பதைக் குறிப்பிடவும்.

படி 4: Markdown-இல் உட்பொதிக்கவும்

உங்கள் Markdown ஆவணத்தில் உள்ள ஒரு குறியீட்டு வேலியில் (code fence) spec-ஐச் செருகவும். அது சரியாக ரெண்டர் ஆகிறதா என்பதைச் சரிபார்க்கவும்.

படி 5: விளக்கப்படத்தை ஆவணப்படுத்தவும்

விளக்கப்படம் என்ன காட்டுகிறது மற்றும் அது ஏன் முக்கியமானது என்பதற்கான குறுகிய விளக்கத்தை எழுதவும். சூழலே ஒரு காட்சிப்படுத்தலைத் தகவலாக மாற்றுகிறது.

பொதுவான விளக்கப்பட வகைகள் மற்றும் அவற்றை எப்போது பயன்படுத்த வேண்டும்

இரண்டு தொடர்ச்சியான மாறிகளுக்கு இடையிலான தொடர்புகளைக் காட்டுவதற்கு Scatter plots நன்றாக வேலை செய்கின்றன. இரண்டு பரிமாணங்களில் செறிவைக் காட்டுவதில் Heatmaps சிறந்து விளங்குகின்றன. Box plots குழுக்களிடையே பகிர்வுகளை ஒப்பிடுகின்றன. கோட்டு விளக்கப்படங்கள் காலப்போக்கில் ஏற்படும் மாற்றங்களைக் கண்காணிக்கின்றன. பட்டை விளக்கப்படங்கள் வகைகளிலான மதிப்புகளை ஒப்பிடுகின்றன. சரியான தேர்வு உங்கள் தரவு மற்றும் நீங்கள் பதிலளிக்கும் கேள்வியைப் பொறுத்தது.

வரம்புகள் மற்றும் பரிமாற்றங்கள் (Tradeoffs)

Vega-Lite சக்தி வாய்ந்தது, ஆனால் அது ஒவ்வொரு பயன்பாட்டு நிகழ்வுக்கும் சரியானதல்ல. மிகப்பெரிய தரவுத்தொகுப்புகள் (மில்லியன் கணக்கான வரிசைகள்) ரெண்டரிங்கை மெதுவாக்கும். சில சிறப்பு விளக்கப்பட வகைகள் Vega-Lite-இன் வரம்பிற்கு வெளியே விழுகின்றன. மேலும் சிக்கலான காட்சிப்படுத்தல்களுக்கு Vega-Lite specs நீளமாக (verbose) மாறக்கூடும்.

மேலும், அனைத்து Markdown பார்வையாளர்களும் Vega-Lite-ஐ ஆதரிப்பதில்லை. GitHub-இன் Markdown ரெண்டரர் இயல்பாகவே இதை ஆதரிக்காது, இருப்பினும் GitHub-Flavored Markdown விக்கிகள் மற்றும் சில ஆவணத் தளங்கள் ஆதரிக்கின்றன. Vega-Lite ஆதரவு இல்லாத தளங்களில் உங்கள் பார்வையாளர்கள் உங்கள் ஆவணங்களைப் படித்தால், விளக்கப்படங்கள் ரெண்டர் ஆகாது.

முடிவுரை

ஆவணமாக்கல் கருவித்தொகுதியில் Vega-Lite ஒரு முக்கியமான இடைவெளியை நிரப்புகிறது. இது புள்ளியியல் காட்சிப்படுத்தலைக் கையாளுவதுடன், Markdown-உடன் ஒருங்கிணைக்கிறது, AI-இயக்கப்படும் தானியங்கிமயமாக்கலுடன் நன்றாக வேலை செய்கிறது, மற்றும் ஊடாடும் விளக்கப்படங்களை உருவாக்குகிறது. நீங்கள் Mermaid-ஐ விட வளர்ந்துவிட்டீர்கள் என்றால், இது இயல்பான அடுத்த படியாகும்.

நன்மைகள்

• Mermaid வழங்குவதற்கு மேலாகப் பல டஜன் விளக்கப்பட வகைகளை ஆதரிக்கிறது
• அறிவிப்புசார் JSON வடிவம் நேரடியானது மற்றும் AI-க்கு உகந்தது
• Hover tooltips மற்றும் zooming போன்ற ஊடாடும் அம்சங்கள் வாசிப்புத்தன்மையை மேம்படுத்துகின்றன
• வெளிப்புறப் படக் கோப்புகள் இல்லாமல் Markdown-இல் துல்லியமாக உட்பொதிகிறது
• இலவச மற்றும் திறந்த மூல மென்பொருள்
• பேக்கெண்ட் ரெண்டரிங் தேவையில்லாமல் உலாவிகளிலேயே இயங்குகிறது

குறைபாடுகள்

• அனைத்து Markdown ரெண்டரர்களாலும் இயல்பாக ஆதரிக்கப்படவில்லை (குறிப்பாக GitHub)
• சிக்கலான விளக்கப்படங்களுக்கு Mermaid-ஐ விடக் செங்குத்தான கற்றல் வளைவு
• பெரிய தரவுத்தொகுப்புகள் ரெண்டரிங் செயல்திறனைப் பாதிக்கலாம்
• மற்ற அறிவிப்புசார் விளக்கப்பட மொழிகளுடன் ஒப்பிடும்போது விரிவான (verbose) JSON specs
• ரெண்டர் செய்வதற்குத் தள ஆதரவு தேவை; இல்லையெனில் ரெண்டர் செய்யப்படாத குறியீட்டுத் தொகுதிகளாக மாறுகிறது

எச்சரிக்கை

இந்தக் கட்டுரையில் உள்ள தரவு, புலப் பெயர்கள் மற்றும் மாதிரி மதிப்புகள் விளக்கப் பயன்படும் இடப் பிடிப்பான்கள் (placeholders) மட்டுமே. உற்பத்தி ஆவணமாக்கலில் (production documentation) Vega-Lite-ஐப் பயன்படுத்துவதற்கு முன்பு, உங்கள் பார்வையாளர்கள் பார்க்கும் தளங்களில் உங்கள் விளக்கப்படங்களைச் சோதிக்கவும். Vega-Lite-ஐ ரெண்டர் செய்ய சில சூழல்களுக்குக் கூடுதல் கட்டமைப்பு அல்லது செருகுநிரல்கள் (plugins) தேவைப்படுகின்றன. Zoom மற்றும் வடிகட்டுதல் போன்ற ஊடாடும் அம்சங்கள் எதிர்பார்த்தபடி செயல்படுகின்றனவா என்பதை எப்போதும் சரிபார்க்கவும். உங்கள் சொந்த ஆபத்தில் தொடரவும், மேலும் உங்கள் குறிப்பிட்ட ஆவணத் தளம் மற்றும் பார்வையாளர்களுக்கு ஏற்ப அணுகுமுறையை மாற்றியமைக்கவும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

• ஏற்கனவே உள்ள Mermaid விளக்கப்படத்தை Vega-Lite-க்கு மாற்றுவது எப்படி?
• Vega-Lite-ஆல் நிகழ்நேர (real-time) அல்லது ஸ்ட்ரீமிங் தரவைக் கையாள முடியுமா?
• ஒரு பக்கத்தில் பல Vega-Lite விளக்கப்படங்களை உட்பொதிப்பதன் செயல்திறன் தாக்கம் என்ன?
• எனது ஆவணமாக்கல் தீமிற்கு ஏற்ப Vega-Lite விளக்கப்படங்களை எவ்வாறு வடிவமைப்பது?
• Vega-Lite மற்றும் Vega இரண்டும் ஒன்றா, மேலும் அவற்றுக்கு என்ன வித்தியாசம்?
• Vega-Lite-ஆல் PDFs-க்கான அச்சிடக்கூடிய விளக்கப்படங்களை உருவாக்க முடியுமா?
• மொபைல் சாதனங்களில் Vega-Lite விளக்கப்படங்களை எவ்வாறு ரெஸ்பான்சிவ் ஆக மாற்றுவது?
• குழுக்களை ஒப்பிடுவதற்கு Vega-Lite-இல் உள்ள எந்த விளக்கப்பட வகைகள் சிறந்தவை?

குறிச்சொற்கள்

#dataviz #vega-lite #markdown #documentation #charts #visualization #json #webdev #tutorial #analytics