TikZ Editor: LaTeX चित्रों के लिए WYSIWYG एडिटर

 (tikz.dev)
1 पॉइंट द्वारा GN⁺ 5 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • TikZ Editor v0.4.0 LaTeX के TikZ डायग्राम को सीधे मैनिपुलेट करके एडिट करने वाला मुफ़्त MIT लाइसेंस ओपन सोर्स ऐप है, जिसे वेब और डेस्कटॉप पर इस्तेमाल किया जा सकता है
  • मौजूदा TikZ चित्रों या पूरी .tex पेपर फ़ाइलों को खोलकर एलिमेंट ड्रैग करने पर TikZ कोड तुरंत अपडेट हो जाता है, और लाइन ब्रेक व whitespace जैसी मौजूदा formatting बनी रहती है
  • नोड, path, arrow, shape, matrix, \foreach loop, label, pin, edge label जैसे अक्सर इस्तेमाल होने वाले TikZ components को विज़ुअली एडिट किया जा सकता है
  • source editor syntax highlighting, folding, autocomplete, search, diagnostics, inline color swatch, color picker और number scrubbing देता है, और TeX compiler के बिना errors का विश्लेषण करता है
  • यह TypeScript और Tauri पर आधारित है, और पूरे TikZ कोड को दोबारा लिखने के बजाय छोटे patch लागू करके यूज़र की indentation और line breaks को सुरक्षित रखता है

TikZ चित्रों को सीधे मैनिपुलेट करने वाला एडिटर

  • TikZ Editor v0.4.0 LaTeX के लिए TikZ डायग्राम का WYSIWYG एडिटर है
  • आप नया चित्र शुरू से बना सकते हैं, या मौजूदा TikZ चित्र एडिट कर सकते हैं, और पूरी पेपर .tex फ़ाइल खोलकर उसके अंदर की इमेज भी बदल सकते हैं
  • एलिमेंट को मूव करते ही TikZ कोड तुरंत अपडेट हो जाता है, और मौजूदा कोड की line breaks और whitespace जैसी formatting बिगड़ती नहीं है
  • पोज़िशन को बारीकी से एडजस्ट करते समय दोबारा compile किए बिना नतीजा तुरंत देखा जा सकता है
  • ऐप मुफ़्त MIT लाइसेंस ओपन सोर्स के रूप में जारी किया गया है, और इसका कोड GitHub पर है
  • यह वेब पर उपलब्ध है, और कुछ अतिरिक्त फीचर्स वाला हल्का डेस्कटॉप ऐप भी देता है

विज़ुअल एडिटिंग और TikZ कोड का सिंक

  • coordinates को सीधे बदलने के बजाय path और node को मनचाही जगह ड्रैग करें, और कोड तुरंत अपडेट हो जाएगा
  • नए एलिमेंट जोड़ने वाले टूल से ये आइटम डाले जा सकते हैं
    • लाइन, arrow, कई segment वाले path
    • node, rectangle, circle
  • नए एलिमेंट कोड के अंत में डाले जाते हैं, और जोड़ने के बाद उन्हें तुरंत मूव या resize किया जा सकता है
  • rounded corners और path joins पर rounded corners लगाया जा सकता है, और rounded corners=2pt जैसे value के साथ भी इस्तेमाल किया जा सकता है

TikZ के लिए बना source editor

  • source panel हमेशा मौजूदा source दिखाता है और TikZ syntax highlighting देता है
  • scope की details छिपाने के लिए code folding को सपोर्ट करता है
  • mouse hover करने पर TikZ manual के संबंधित snippets देखे जा सकते हैं
  • errors को इस तरह highlight किया जाता है कि क्या गड़बड़ है, यह explanation के साथ समझ में आए
    • यह इसलिए संभव है क्योंकि ऐप TeX compiler के बिना कोड को समझता है
  • source view में सीधे टाइप किए बिना भी colors और numbers एडजस्ट किए जा सकते हैं
    • color picker support
    • number scrubbing support

alignment, grouping और कई चित्रों की एडिटिंग

  • snap फीचर से एलिमेंट्स को vertical या horizontal align किया जा सकता है, या बराबर दूरी पर रखा जा सकता है
  • ruler, custom guideline, zoom और magnifier tool दिए जाते हैं
  • कई objects चुनकर group किया जा सकता है, और grouping को TikZ scope के रूप में लागू किया जाता है
  • multi-select स्थिति में alignment और distribution जैसे layout tasks किए जा सकते हैं
  • पूरी .tex पेपर फ़ाइल खोलने पर ऐप के नीचे image preview के जरिए कई tikzpicture environments के बीच स्विच किया जा सकता है
  • ऐप यूज़र के कई custom macros को समझता है

सपोर्ट किए गए TikZ फीचर्स और टूल्स

  • ऐप को idiomatic TikZ चित्र बनाने के लिए डिज़ाइन किया गया है
  • path को node anchors से जुड़ने के लिए आसानी से खींचा जा सकता है
  • node label, pin और edge label editing सपोर्ट करता है
  • दिए गए टूल्स ये हैं
    • Select: object move, resize, rotate, path edit, multi-select edit
    • Magnify: TeXstudio जैसा virtual magnifier
    • Node: TikZ \node से text जोड़ना
    • Shape: shape library आधारित node जोड़ना, diamond, polygon, star, cloud, arrow आदि सपोर्ट
    • Matrix: row और column count देकर node matrix insert करना
    • Line, Arrow, Bezier, Path, Freehand: straight line, arrow, curve, multi-segment path, smoothed free curve बनाना
    • Grid, Rectangle, Ellipse, Circle: grid और basic shape path बनाना
    • Bucket: मौजूदा बंद क्षेत्र पर fill color लागू करना

फ़ाइल, export और panel फीचर्स

  • फ़ाइल और export फीचर्स में ये शामिल हैं
    • .tex और .tikz फ़ाइल खोलना और एडिट करना
    • SVG, Ipe .ipe, PowerPoint .pptx से चित्र import करना
    • SVG, PNG, PDF, standalone LaTeX में export करना
    • tabs के जरिए एक साथ कई documents पर काम करना
  • पेपर और चित्र एडिटिंग फीचर्स में ये शामिल हैं
    • कई चित्रों वाली पूरी पेपर खोलना
    • thumbnail preview से चित्रों के बीच जाना
    • node, shape, matrix, arrow, path, curve, grid, rectangle, ellipse, circle बनाना
    • चित्र के अंदर text और equations को सीधे एडिट करना
  • direct editing फीचर्स में ये शामिल हैं
    • move, resize, rotate, duplicate, group, align, distribute, flip, reorder
    • point handles से path editing
    • split/join, reverse, open/close, corner, smooth point commands
    • grid, guides, object points, object spacing पर snap
  • panel फीचर्स में ये शामिल हैं
    • Inspector में line, fill, arrow, text, transform, shape, style editing
    • Objects panel में object visibility, groups, rename, layer order management
    • Styles panel में browser developer tools की CSS editing जैसा TikZ style editing

loop, structure और AI सहायता

  • Repeat dialog से चुने गए क्षेत्र को कई rows और columns में कॉपी करने के लिए \foreach loop जोड़ा जा सकता है
  • जो चित्र पहले से \foreach इस्तेमाल करते हैं, उन्हें भी खोला और एडिट किया जा सकता है, nested loops सहित
  • tree diagrams को child जोड़ने के तरीके से एडिट किया जा सकता है
  • matrix को row/column commands और transpose command से बदला जा सकता है
  • अगर desktop version में OpenAI Codex इंस्टॉल है, तो ऐप के अंदर चित्र एडिट करने का अनुरोध किया जा सकता है
    • assistant को कई TikZ-विशेष टूल्स तक access मिलता है
    • उपयोग का हिसाब यूज़र के ChatGPT खाते से काटा जाता है
    • image attachment के साथ editing help भी सपोर्ट होती है

अंदरूनी implementation तरीका

  • ऐप TypeScript में लिखा गया है
  • desktop version Tauri का इस्तेमाल करता है, जिसमें हल्का Rust backend शामिल है
  • शुरुआती codebase को Codex ने 3 महीनों में लिखा था, और इस्तेमाल किए गए models gpt-5-3-codex, gpt-5-4, gpt-5-4-mini, gpt-5-5 थे
  • इसमें Claude का कुछ योगदान भी शामिल है
  • TeX कोड parsing बहुत कठिन है, लेकिन TikZ Editor पूरे arbitrary TeX के बजाय केवल वे commands parse करता है जो TikZ चित्र बनाने में अक्सर इस्तेमाल होते हैं
    • बहुत ज़्यादा “hacky” कोड सही तरह से interpret न हो पाए, ऐसी संभावना है
    • support coverage काफ़ी अच्छी है और समय के साथ बढ़ रही है
  • ऐप TikZ कोड parse करके internal representation बनाता है, और इसी representation से coordinates, styles, transforms, loops, nodes, paths, text को editable scene elements के रूप में समझता है
  • internal representation line और character range tags के जरिए syntax input से क़रीब से जुड़ी रहती है
  • पूरे कोड को standard format में दोबारा लिखने के बजाय छोटे patch से सिर्फ़ कुछ हिस्से बदले जाते हैं, इसलिए यूज़र की indentation और line breaks को भरोसेमंद ढंग से सुरक्षित रखा जा सकता है
  • scene को SVG में render किया जाता है

rendering और converters

  • text और equations की rendering MathJax से की जाती है
  • multi-line text को सपोर्ट करने के लिए TeX का hyphenation algorithm और Knuth-Plass line-breaking algorithm दोबारा implement किया गया है
  • इस implementation की वजह से ऐप में दिखने वाला multi-line text आम तौर पर उसी तरह render होता है जैसा TeX वही text render करता है
  • custom color picker RGB colors को ऐसे सबसे नज़दीकी रंग में बदलता है जिसे छोटे xcolor string से व्यक्त किया जा सके
    • उदाहरण: #409a40 को violet!88!white!45!green में बदला जाता है
    • संबंधित कोड npm package xcolor-rgb-convert के रूप में उपलब्ध है
  • अलग-अलग फ़ाइल फ़ॉर्मैट import करना अलग से विकसित converters पर आधारित है
  • desktop app PowerPoint और Keynote से objects को सीधे paste कर सकता है
    • Keynote paste keynote clipboard format interpreter का इस्तेमाल करता है, जो keynote-clipboard npm package के रूप में उपलब्ध है
  • desktop app की AI support Codex App Server के जरिए दी जाती है
  • source editor CodeMirror पर बनाया गया है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 5 시간 전
Hacker News की राय

  • मैंने इसे थोड़ा इस्तेमाल किया, और UI बहुत शानदार है और प्रोजेक्ट खुद भी अच्छा है। बधाई
    लेकिन मुझे लगता है कि जो TikZ code यह बनाता है, वह खास अच्छा नहीं है। हर चीज़ में absolute coordinates का इस्तेमाल हो रहा है, जबकि TikZ में इसकी शायद ही कभी ज़रूरत होती है
    उदाहरण के लिए, सिर्फ एक node रखने पर भी absolute coordinate बन जाता है, जबकि सिर्फ \node {Hello}; लिखने पर TikZ उसे bounding box के center में रख देता है। इसे ज़बरदस्ती (0.5,2.91) पर होने जैसा बताने की ज़रूरत नहीं है
    कई nodes चुनकर “नीचे align” जैसी सुविधा इस्तेमाल करते समय भी absolute coordinates को बदलने के बजाय TikZ की alignment सुविधाओं, यानी anchor वगैरह, का इस्तेमाल होना चाहिए। मैं समझता हूँ कि इस तरह का code generation ज़्यादा मुश्किल है, लेकिन अगली version में इस दिशा पर विचार किया जा सकता है

    • यह अच्छा feedback है। मुश्किल हिस्सा code generation से ज़्यादा user किस व्यवहार की उम्मीद करता है यह समझना है
      जब कोई “नीचे align” बटन दबाता है
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      जैसे code का अचानक किसी मनमाने नाम वाले \coordinate और relative coordinate notation में बदल जाना शायद चौंकाने वाला लगेगा
      उल्टा, अगर शुरुआत से ही “सुंदर” code से शुरू करें, तो app बहुत-से मामलों में dragging की अनुमति नहीं दे पाएगा। क्योंकि drag का मतलब क्या है, यह पता नहीं चलेगा, या कई बार वास्तव में पता चल ही नहीं सकता। जैसे यह कि named coordinate बदला जा रहा है या उस coordinate के offset को बदला जा रहा है
      इस चर्चा में दूसरी जगह “right of” जैसी placement शैली की भी बात हुई, और कुछ अच्छे सुझाव आए: https://news.ycombinator.com/item?id=48647683
    • ऐसी सुविधाओं के लिए CAD scripting languages यह कैसे करती हैं, उससे सीखना उपयोगी हो सकता है

  • जिसे दिलचस्पी हो, उसके लिए बता दूँ कि इस प्रोजेक्ट पर फ़रवरी 2026 से काफ़ी नियमित रूप से काम हो रहा है
    इस दौरान मैंने Codex के ज़रिए इस प्रोजेक्ट पर लगभग 70 करोड़ tokens खर्च किए हैं, और इसमें cache reads शामिल नहीं हैं। API शुल्क के हिसाब से यह लगभग 15,000 डॉलर होता, लेकिन वास्तव में मैंने ChatGPT subscription पर सिर्फ लगभग 500 डॉलर दिए

  • मुझे CircuitiTikZ बहुत पसंद है। साधारण text-based circuit diagrams बनाने का यह लगभग इकलौता तरीका है
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    कुछ साल पहले मैंने इसे asciidoctor-diagram से जोड़ा था ताकि Asciidoc maintenance manuals में simple circuits डाले जा सकें। field technicians को यह बहुत पसंद आया, और वे PDM/ERP के थोपे हुए बेहूदा tools के बजाय Git version-control ecosystem के भीतर सहयोग कर पाए
    यह पहले से ही शानदार WireViz का बहुत अच्छा पूरक भी है: https://github.com/wireviz/WireViz

  • बढ़िया। https://q.uiver.app/ भी अच्छा था, लेकिन यह https://github.com/varkor द्वारा बनाया गया एक ज़्यादा specialized tool है

  • बहुत शानदार, लेकिन वह सवाल पूछना पड़ेगा जो आखिरकार आना ही था: cetz support देना कितना मुश्किल होगा?
    अगर बच सकूँ तो मैं LaTeX को हाथ नहीं लगाना चाहता, और Typst मैं हमेशा इस्तेमाल करता हूँ

    • coding agent के साथ यह काफ़ी संभव लगता है
      Typst-आधारित पूरा का पूरा WYSIWYG, यानी vibe coding से बना presentation software पहले से मौजूद है, और उनमें से कुछ ठीक ऐसी ही functionality लागू करते हैं
      https://codeberg.org/presenst/presenst

  • छात्र जीवन में मुझे सच में ऐसी चीज़ चाहिए थी। इसे open source बनाने के लिए धन्यवाद
    मेरे theoretical computer science के प्रोफेसर संयोग से वही Till Tantau थे जिन्होंने TikZ बनाया था। वे समझाने में भी बहुत अच्छे थे

    • Schleswig-Holstein के लोग हर जगह मिल जाते हैं :) Till Tantau ने LaTeX presentation slides बनाने वाला beamer package भी शुरू किया था
      beamer और TikZ दोनों scientific communication में बहुत महत्वपूर्ण योगदान हैं

  • शानदार
    मुझे पता है लोगों को यह पसंद है, लेकिन मुझे सीधे TikZ इस्तेमाल करना सच में नापसंद है, इसलिए मैं ज़्यादातर technical drawings को draw.io/diagrams.net में ले जाकर PNG के रूप में export कर देता हूँ। यह बहुत elegant नहीं है, लेकिन काफ़ी अच्छा काम करता है और ठीक-ठाक दिखने वाले नतीजे आसानी से मिल जाते हैं। आम तौर पर मैं text-defined चीज़ों को ज़्यादा पसंद करता हूँ
    जो diagrams Markdown के अंदर रहने वाले थे, उनमें से कुछ को मैंने Mermaid में बदला, लेकिन TeX में चलाने की कोशिश नहीं की
    फिर भी, क्योंकि LaTeX में diagrams बनाने का idiomatic तरीका TikZ के काफ़ी करीब है, इसलिए WYSIWYG editor उपयोगी लगती है
    एक सुझाव यह होगा कि arrows boxes से “attach” हो सकें। यानी box को हिलाने पर arrow endpoints भी साथ चलें। draw.io ऐसे ही काम करता है

    • text nodes में anchors होते हैं, इसलिए attach करना काम करता है। नई line खींचते समय या मौजूदा line को हिलाते समय आपको हरे connection points दिखने चाहिए
      अगर आप draw.io इस्तेमाल करते हैं, तो PNG की जगह PDF में export करने की सलाह दूँगा। इससे वह vector graphics बनी रहती है
    • क्या draw.io files को .drawio.svg के रूप में save नहीं किया जा सकता?
      मैंने कुछ diagrams ऐसे बनाए हैं, और Computer Modern इस्तेमाल किया ताकि figures मुख्य पाठ जैसी दिखें। मेरे लिए वह काफ़ी था

  • यह सच में बहुत अच्छा दिखता है। शुरुआत आसान बनाने के लिए कुछ presets जोड़ना अच्छा होगा। जैसे आम neural network architectures या TikZ के दूसरे सामान्य use cases

    • अच्छा विचार है। File > Open Example पहले से है, लेकिन विस्तार की गुंजाइश ज़रूर है। desktop पर तो arXiv papers सीधे खोले भी जा सकते हैं

  • वाह, यह सच में प्रभावशाली है। मैं TikZ diagrams बनाने के लिए ChatGPT का इस्तेमाल करता रहा हूँ, लेकिन सच कहूँ तो TikZ diagrams बनाना आसान नहीं है, और जब अच्छे बनते हैं तो नतीजे बहुत सुंदर होते हैं
    लेकिन ChatGPT से diagram को बारीकी से edit करवाना मुश्किल होता है। TikZ syntax और उसके व्यवहार के बारे में मेरी समझ हमेशा इतनी सटीक नहीं होती कि मनचाहा परिणाम मिल सके। इसलिए यह tool उस समस्या का जवाब लगता है। इसे आज़माने का इंतज़ार है
    संदर्भ के लिए, मैं ब्लॉग के लिए LaTeX documents भी ChatGPT से बनवाता हूँ और उन्हें server side पर render करता हूँ। वह workflow मेरे लिए बहुत अच्छा काम करता है