MonoSketch - ASCII-आधारित डायग्राम बनाने का टूल

• केवल टेक्स्ट के ज़रिए आइडिया को विज़ुअल डिज़ाइन में बदलने वाला client-only web application
• Kotlin में लिखा गया और बाद में JS में compile किया गया open source प्रोजेक्ट। SASS/Tailwind का उपयोग
• rectangle, line, text box जैसे बेसिक शेप ब्लॉक्स को जोड़कर जटिल संरचनाएँ या सिस्टम डायग्राम व्यक्त किए जा सकते हैं
• formatting फीचर के ज़रिए साधारण ASCII characters को अलग-अलग स्टाइल के विज़ुअल elements में बदला जा सकता है
• PowerPoint या Google Slides के बिना भी presentation बनाना और विज़ुअल तरीके से समझाना संभव बनाने वाला टूल

---

परिचय

• MonoSketch एक ASCII sketch और diagram बनाने वाला ऐप है, जो आइडिया को विज़ुअली व्यक्त करने का टूल देता है
  • टेक्स्ट-आधारित इंटरफ़ेस के ज़रिए जटिल circuit diagram, system structure, network flow आदि को ASCII characters से बनाया जा सकता है
  • “Unleash your ideas with ASCII” स्लोगन के तहत, साधारण टेक्स्ट से भी विज़ुअल डिज़ाइन संभव बनाता है

बुनियादी घटक

• Rectangle, Line, Text box जैसी बुनियादी ड्रॉइंग सुविधाएँ उपलब्ध
  • अलग-अलग border styles, fill characters, arrow decorations का समर्थन
  • rounded corners से विज़ुअल गुणवत्ता बेहतर होती है
• editing फीचर्स पर केंद्रित interactive environment
  • infinite canvas के साथ स्वतंत्र scroll और zoom का समर्थन
  • auto-save और multiple project management फीचर उपलब्ध
  • copy, cut, paste, duplicate जैसे standard editing commands का समर्थन
  • layer management और smart snapping से सटीक shape alignment संभव
  • dark mode समर्थन
• export फीचर्स
  • चुने गए क्षेत्र या पूरे डायग्राम को तुरंत टेक्स्ट के रूप में copy किया जा सकता है
  • shortcut समर्थन: macOS Cmd + Shift + C, Windows/Linux Ctrl + Shift + C
• आगे का roadmap
  • grouping फीचर से जटिल संरचनाओं में shapes को मैनेज करना
  • paint tool के ज़रिए free-form curves और character-based drawing
  • GitHub Gist sharing और URL loading जैसी collaboration सुविधाओं का आगे विस्तार

एप्लिकेशन और UI

• app.monosketch.io के ज़रिए वेब पर उपलब्ध
  • search bar, button, workspace, panel जैसे UI elements को ASCII में दिखाने वाले mockup शामिल
  • login screen, signup form आदि भी ASCII रूप में विज़ुअलाइज़ किए गए हैं
• presentation creation फीचर के ज़रिए PowerPoint या Google Slides के बिना भी प्रस्तुति सामग्री तैयार की जा सकती है

टेक स्टैक और लाइसेंस

• पूरी application Kotlin/JS पर आधारित है (Kotlin में डेवलप करके JS में compile किया गया)
• SASS और Tailwind CSS से styling
• Gradle build system का उपयोग (hot reload development mode समर्थन)
• Python 3.11+ और Pipenv के ज़रिए वैकल्पिक development server option उपलब्ध
• Apache License 2.0 open source

[GN⁺]

Hacker News की राय

• मैं Monodraw इस्तेमाल कर रहा हूँ
  अब तक की मेरी सबसे संतोषजनक खरीद रही है

  • मैं भी Monodraw इस्तेमाल करता हूँ, लेकिन एक कमी खलती है
    टेक्स्ट एडिटिंग popup को ESC key से बंद करने का फीचर अभी तक नहीं है
    मैं हर बार ESC दबा देता हूँ, लेकिन कोई प्रतिक्रिया नहीं मिलती, तो झुंझलाहट होती है
    मैंने binary को खुद patch करने की कोशिश की थी, लेकिन update mechanism टूट गया, इसलिए छोड़ दिया
  • Mac से Windows पर आने के बाद जिस app की सबसे ज़्यादा कमी महसूस हुई, वह Monodraw था
    लेकिन इस बार आया यह नया tool काफ़ी अच्छा विकल्प लग रहा है, इसलिए इसे ज़रूर आज़माने का सोच रहा हूँ
  • diagram, doodle, या config file header सजाने के लिए fig, boxes, shadows वगैरह को मिलाकर इस्तेमाल करना सच में बहुत सुविधाजनक था
  • Mac छोड़ने के बाद भी यह अब भी उन apps में से एक है जिसकी कमी महसूस होती है
  • पहले मैं Mac पर Monodraw को सच में बहुत पसंद करता था
    अब Linux को main के रूप में इस्तेमाल कर रहा हूँ, इसलिए कोई alternative app ढूँढ़ रहा था, और अभी जो यह tool देखा है, वह अब तक देखे गए विकल्पों में सबसे क़रीबी विकल्प लगता है

• मिलते-जुलते tools में TextPaint, Archetype (archive), Textik, Asciiflow, Fsymbols Draw आदि हैं

  • और JavE को भी नहीं भूलना चाहिए

• हेडर में बना circuit diagram इतना ढीला-ढाला है कि वह मानो AI द्वारा ग़लत generate किया गया circuit लग रहा है
  symbol style एक जैसे नहीं हैं, pin labels भी नहीं हैं, और ऊपर बाईं ओर का capacitor shorted है

  • समस्या यह नहीं कि experts ऐसी ग़लतियाँ तुरंत पहचान लेते हैं, बल्कि यह है कि शुरुआती लोग ग़लत सीख लेते हैं
    अगर वे इसी हालत में सीखेंगे, तो भविष्य के experts ग़लत नींव पर आगे बढ़ेंगे
  • मैंने capacitor के shorted होने पर ध्यान नहीं दिया था, लेकिन यह देखकर ज़रूर चौंक गया कि छोटी लाइन (आमतौर पर negative) को “+” से दिखाया गया है और सीधे GND से जोड़ा गया है

• जो लोग ‘ASCII’ शब्द इस्तेमाल करते हैं, उनसे एक बात कहना चाहूँगा
  Monosketch वास्तव में सिर्फ ASCII का इस्तेमाल नहीं करता
  उदाहरण के लिए यह “◎”(U+25CE) जैसे Unicode characters इस्तेमाल करता है

  • फिर भी landing page पर बड़े अक्षरों में “Unleash your ideas with ASCII” लिखा है, यह थोड़ा मज़ेदार लगा :-)
  • ऐतिहासिक रूप से देखें तो line या box drawing characters IBM PC दौर के Code page 437 में जोड़े गए थे, वे असली ASCII नहीं थे
    सचमुच के ASCII से boxes बनाने हों, तो सिर्फ | और - का इस्तेमाल करना होगा

• अगर आप Emacs इस्तेमाल करते हैं, तो uniline package काफ़ी उपयोगी है

• Markdeep से भी ASCII art में diagram बनाए जा सकते हैं
  यह काफ़ी परिपक्व tool है

• HTML में spellcheck attribute को false पर सेट करने की सिफारिश करता हूँ
  नहीं तो “GND”, “uF” जैसे हर label के नीचे लाल रेखा आ जाती है, जो देखने में असुविधाजनक है

• Graph-Easy मूल रूप से ASCII generate करता है, लेकिन box characters, SVG, PNG जैसे कई output formats भी support करता है
  यह WYSIWYG शैली का नहीं है; इसमें diagram को text के रूप में describe करने पर result generate होता है

• मैंने अभी इस tool से कुछ simple diagrams बनाकर देखे, और इसे इस्तेमाल करना आसान था तथा export quality भी अच्छी थी
  हालांकि कुछ सुधार अच्छे रहेंगे

  1. छोटे rectangle को move करते समय zoom होने के बजाय move हो रहा है, यह UI feedback और स्पष्ट होना चाहिए
  2. किसी दूसरे tab में Monosketch खोलने पर एक साथ नया diagram नहीं बनाया जा सकता — लगता है tabs के बीच context share हो रहा है

• macOS के लिए native app के रूप में Monodraw भी है

  • लेकिन Monodraw अभी maintenance mode में है और paid है
    नाम से तो Monosketch उसका स्पष्ट विकल्प लगता है