ข้ามไปยังเนื้อหาหลัก

ตัวสร้างแผนผัง ASCII ฟรี

แปลงรายการแบบเยื้องเป็นแผนผังโฟลเดอร์ที่สวยงาม (├── └──) สำหรับ README และเอกสาร รองรับ Unicode หรือ ASCII ธรรมดา ทำงานในเบราว์เซอร์ทั้งหมด

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว
ตัวเลือกการนำเข้า
ค่าเริ่มต้นจะข้าม node_modules, .git, ผลลัพธ์บิลด์ และแคช

ใช้ช่องว่างหรือแท็บเพื่อซ้อนรายการ การย่อหน้าแต่ละระดับจะกลายเป็นรายการลูก เพิ่มหมายเหตุหลัง ' # ', ' // ', ' - ' หรือ ' <- ' แล้วจะถูกจัดแนวเป็นคอมเมนต์ในผลลัพธ์ วางรายการพาธ (git ls-files, find, dir /s /b) เพื่อจัดเป็นลำดับชั้น และปิดท้ายชื่อด้วย / เพื่อระบุโฟลเดอร์ว่าง การนำเข้าหรือวางโฟลเดอร์หรือ .zip จะอ่านเฉพาะชื่อไฟล์ ไม่อ่านเนื้อหา และข้าม node_modules, .git และโฟลเดอร์บิลด์อื่นๆ (ดูตัวเลือกการนำเข้า)

แผนผัง
รูปแบบคอมเมนต์
my-project
├── src
│   ├── components
│   │   ├── Button.tsx
│   │   └── Modal.tsx
│   ├── lib
│   │   └── utils.ts
│   └── index.ts  # entry point
├── public
│   └── favicon.ico
├── package.json
└── README.md

💡 วางโครงสร้างโฟลเดอร์ (หรือโครงร่างแบบซ้อน) แล้วรับแผนผังที่เรียบร้อยสำหรับใส่ใน README ความคิดเห็น หรือเอกสาร ใช้สไตล์ ASCII สำหรับสภาพแวดล้อมที่ไม่รองรับอักขระวาดกรอบ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ

การใช้งานทั่วไป

  • เพิ่มต้นไม้โฟลเดอร์ไปยัง READMEสร้างต้นไม้โครงสร้างโครงการที่สะอาดเพื่อจัดทำเอกสารรีโปซิทอรี่ของคุณ
  • จัดทำเอกสารโครงสร้างโครงการสร้างต้นไม้ไดเรกทอรี่สำหรับเอกสารทางเทคนิคและ wiki
  • สร้างต้นไม้สำหรับความเห็นของโค้ดสร้างแผนภาพโครงสร้างเพื่อแทรกในความเห็นของรหัสต้นทาง
  • แสดงต้นไม้ไฟล์ในการพูดคุยสร้างแผนภาพไดเรกทอรี่ที่สะอาดสำหรับสไลด์และบทเรียน
  • เปลี่ยนโครงร่างเป็นต้นไม้มองเห็นโครงร่างที่ซ้อนกัน ไม่ใช่แค่ไฟล์ เป็นต้นไม้

วิธีการทำงาน

การเขียนโครงสร้างโฟลเดอร์ใน README มักหมายถึงต้องวาดเส้น ├── และ └── ด้วยมือ เครื่องมือนี้สร้างเส้นเหล่านั้นให้จากรายการแบบย่อหน้าง่ายๆ

  1. 1
    คุณพิมพ์โครงร่างแบบย่อหน้า
    หนึ่งรายการต่อบรรทัด ใช้ช่องว่างหรือแท็บย่อหน้าเพื่อซ้อนรายการ ความลึกของการย่อหน้ากำหนดลำดับชั้น
  2. 2
    ระบบแยกวิเคราะห์เป็นโครงสร้างแบบต้นไม้
    ตัวแยกวิเคราะห์แบบสแตกแปลงการย่อหน้าเป็นโครงสร้างซ้อนกัน ทั้งหมดในเบราว์เซอร์ของคุณ
  3. 3
    วาดเส้นเชื่อมของต้นไม้
    สร้างเส้นนำสายตา ├──, └── และ │ ที่ถูกต้อง พร้อมเส้นแนวตั้งที่ต่อเนื่องลงไปตามกิ่งที่ซ้อนกันอย่างถูกต้อง
  4. 4
    คัดลอกผลลัพธ์
    เลือกเส้นเชื่อมแบบ Unicode หรือ ASCII ธรรมดา แล้วคัดลอกแผนผังไปใส่ใน README เอกสาร หรือคอมเมนต์ในโค้ด

ยูทิลิตี้ข้อความที่เรียบง่ายที่รันทั้งหมดบนอุปกรณ์ของคุณ ไม่มีการอัปโหลด

เครื่องมือที่เกี่ยวข้อง

คำถามที่พบบ่อย