Oh MyUtils

ASCII डायग्राम एडिटर - टेक्स्ट डायग्राम ऑनलाइन बनाएं

कोड कमेंट्स और डॉक्यूमेंटेशन के लिए ASCII या यूनिकोड टेक्स्ट में बॉक्स, एरो और लाइन बनाएं — 100% क्लाइंट-साइड, सर्वर को कोई डेटा नहीं भेजा जाता।

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

ASCII डायग्राम एडिटर क्या है?

ASCII डायग्राम एडिटर एक ऑनलाइन टूल है जो आपको ग्रिड-आधारित कैनवास पर ASCII या यूनिकोड कैरेक्टर्स का उपयोग करके बॉक्स, लाइन, एरो और टेक्स्ट विज़ुअली ड्रॉ करने देता है। यह एडिटर शुद्ध टेक्स्ट आउटपुट देता है जिसे सोर्स कोड कमेंट्स, README फाइल्स, ईमेल और प्लेन-टेक्स्ट डॉक्यूमेंटेशन में सीधे एम्बेड किया जा सकता है।

इस ASCII डायग्राम एडिटर का उपयोग कैसे करें?

टूलबार से ड्रॉइंग टूल चुनें: बॉक्स, लाइन, एरो, टेक्स्ट, मिटाना या फ्रीफॉर्म। कैनवास पर क्लिक और ड्रैग करके ड्रॉ करें। ASCII मोड (+, -, |) और यूनिकोड मोड (┌, ─, │) के बीच स्विच करें। डायग्राम पूरा होने पर कॉपी बटन से क्लिपबोर्ड पर कॉपी करें या .txt फाइल डाउनलोड करें।

क्या मेरा डायग्राम डेटा सुरक्षित है?

सभी ड्रॉइंग और एडिटिंग ऑपरेशन 100% क्लाइंट-साइड पर आपके ब्राउज़र में होते हैं। कोई भी डेटा किसी सर्वर को नहीं भेजा जाता। आपके डायग्राम केवल ब्राउज़र मेमोरी और ऑटो-सेव के लिए localStorage में मौजूद रहते हैं।

ASCII और यूनिकोड कैरेक्टर मोड में क्या अंतर है?

ASCII मोड बेसिक कैरेक्टर्स का उपयोग करता है: कोनों के लिए +, हॉरिज़ॉन्टल लाइन्स के लिए -, वर्टिकल लाइन्स के लिए |। यूनिकोड मोड ┌, ─, │ जैसे बॉक्स-ड्रॉइंग कैरेक्टर्स का उपयोग करता है जो अधिक प्रोफेशनल डायग्राम बनाते हैं। यूनिकोड मोड में 5 लाइन स्टाइल भी उपलब्ध हैं।

क्या मैं मौजूदा ASCII डायग्राम इम्पोर्ट कर सकता हूँ?

हाँ। इम्पोर्ट बटन पर क्लिक करें और अपना मौजूदा ASCII डायग्राम पेस्ट करें। आप .txt फाइल भी अपलोड कर सकते हैं। इम्पोर्ट के बाद सभी ड्रॉइंग टूल्स से एडिट कर सकते हैं।

कैनवास साइज़ की सीमाएँ क्या हैं?

डिफ़ॉल्ट कैनवास 200 कॉलम x 100 रो (20,000 सेल) है। अधिकतम 500 कॉलम x 300 रो (150,000 सेल) सपोर्टेड है। अधिकांश डायग्राम के लिए डिफ़ॉल्ट साइज़ पर्याप्त है।

क्या एडिटर ऑटो-सेव करता है?

हाँ। कैनवास स्टेट हर एडिट के बाद localStorage में ऑटो-सेव होता है। पेज पर वापस आने पर आखिरी डायग्राम रिस्टोर हो जाता है। स्थायी स्टोरेज के लिए .txt फाइल एक्सपोर्ट करें।

ASCII डायग्राम के सामान्य उपयोग क्या हैं?

ASCII डायग्राम इनमें व्यापक रूप से उपयोग होते हैं: सोर्स कोड कमेंट्स, README फाइल्स, तकनीकी स्पेसिफिकेशन और RFC, टर्मिनल/CLI टूल्स, ईमेल और चैट, git कमिट्स और PR, और प्लेन-टेक्स्ट डॉक्यूमेंटेशन।

कोड उदाहरण

// ASCII Diagram Drawing Primitives

function createGrid(width, height) {
  return Array.from({ length: height }, () =>
    Array.from({ length: width }, () => ' ')
  );
}

function drawBox(grid, x, y, w, h, mode = 'ascii') {
  const c = mode === 'unicode'
    ? { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' }
    : { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' };

  grid[y][x] = c.tl;
  grid[y][x + w - 1] = c.tr;
  grid[y + h - 1][x] = c.bl;
  grid[y + h - 1][x + w - 1] = c.br;

  for (let i = x + 1; i < x + w - 1; i++) {
    grid[y][i] = c.h;
    grid[y + h - 1][i] = c.h;
  }
  for (let j = y + 1; j < y + h - 1; j++) {
    grid[j][x] = c.v;
    grid[j][x + w - 1] = c.v;
  }
}

function drawArrow(grid, x1, y1, x2, y2) {
  if (y1 === y2) {
    const [s, e] = x1 < x2 ? [x1, x2] : [x2, x1];
    for (let i = s; i <= e; i++) grid[y1][i] = '-';
    grid[y1][x2] = x2 > x1 ? '>' : '<';
  } else if (x1 === x2) {
    const [s, e] = y1 < y2 ? [y1, y2] : [y2, y1];
    for (let j = s; j <= e; j++) grid[j][x1] = '|';
    grid[y2][x1] = y2 > y1 ? 'v' : '^';
  }
}

function exportText(grid) {
  return grid.map(row => row.join('').trimEnd())
    .join('\n').replace(/\n+$/, '');
}

// Example: Simple flowchart
const grid = createGrid(30, 12);
drawBox(grid, 5, 0, 12, 3);
for (let i = 6; i < 16; i++) grid[1][i] = ' ';
grid[1][8] = 'S'; grid[1][9] = 't'; grid[1][10] = 'a';
grid[1][11] = 'r'; grid[1][12] = 't';
drawArrow(grid, 10, 3, 10, 4);
drawBox(grid, 3, 5, 16, 3);
drawArrow(grid, 10, 8, 10, 9);
drawBox(grid, 5, 10, 12, 3);
console.log(exportText(grid));

संबंधित उपकरण