4 điểm bởi GN⁺ 2025-08-20 | 1 bình luận | Chia sẻ qua WhatsApp
  • Phiên bản D2 0.7.1 bổ sung khả năng render sơ đồ văn bản sang ASCII
  • Có thể dùng sơ đồ ASCII đơn giản trong chú thích mã để giải thích luồng của hàm hoặc lớp
  • Mặc định sử dụng ký tự Unicode, nhưng có thể chọn dùng ASCII tiêu chuẩn bằng cờ tùy chọn
  • Tính năng này hiện ở giai đoạn alpha, chưa hỗ trợ một số kiểu dáng, ký tự đặc biệt và một số hình dạng nhất định
  • Có thể trải nghiệm trực tiếp render ASCII trong D2 Playground và tiện ích mở rộng Vim

Giới thiệu render ASCII trong D2

Từ bản phát hành mới nhất của D2 (phiên bản 0.7.1), tính năng xuất sơ đồ dạng ASCII cho sơ đồ văn bản đã được bổ sung.
Các tệp đầu ra có phần mở rộng .txt sẽ tự động được render bằng bộ render ASCII.
Có thể xem ví dụ trong tiện ích mở rộng D2 cho Vim; khi mở tệp .d2 và lưu qua cửa sổ preview, bạn có thể theo dõi trạng thái đầu ra sơ đồ ASCII theo thời gian thực.

Ứng dụng trong tài liệu hóa mã

Sơ đồ ASCII đặc biệt hữu ích khi được chèn vào chú thích mã nguồn

  • Nếu thêm một sơ đồ đơn giản bên cạnh một hàm hoặc lớp nhỏ, nó có thể giúp hiểu mã trực quan hơn so với chỉ mô tả luồng bằng văn bản
  • Trong tiện ích mở rộng Vim, có thể viết mã D2 rồi chuyển ngay vùng được chọn thành sơ đồ ASCII

Lựa chọn giữa Unicode và ASCII tiêu chuẩn

Chế độ render ASCII mặc định sử dụng ký tự vẽ khung Unicode để cho đầu ra đẹp mắt hơn

  • Nếu muốn tính di động tối đa, có thể render bằng ký tự ASCII thông thường thông qua cờ tùy chọn --ascii-mode=standard

Các giới hạn hiện tại

Tính năng render ASCII này hiện đang ở giai đoạn alpha

  • Có thể còn nhiều trường hợp biên, điểm cần cải thiện và lỗi
  • Nhóm phát triển khuyến khích gửi báo lỗi hoặc phản hồi trên website

Các hạn chế chính

  • Chưa hỗ trợ kiểu dáng
    • Animation, phông chữ và các yếu tố tương tự không có nhiều ý nghĩa trong ASCII
    • Trong tương lai có kế hoạch xem xét hỗ trợ một số kiểu dáng giới hạn như màu terminal
    • Theme cũng chưa được hỗ trợ
    • double-border, multiple và các kiểu tương tự nằm trong danh sách dự kiến cải thiện sau này
  • Khoảng cách không đồng đều
    • Trong quá trình chuyển sang ASCII, cách sắp xếp các hộp có thể kém đều hơn so với SVG
  • Đối tượng không thể render
    • Chưa triển khai hỗ trợ văn bản đặc biệt như Markdown, Latex, mã nguồn
    • Không thể render hình ảnh, biểu tượng, lớp UML, bảng SQL...
    • Với các mục này, việc loại bỏ hoặc hiển thị placeholder sẽ được quyết định sau
  • Một số hình dạng chưa được hỗ trợ
    • Các hình cong như đám mây, hình tròn khó thể hiện tốt bằng ASCII
    • Các hình này sẽ được thay bằng hình chữ nhật và thêm một biểu tượng nhỏ ở góc trên bên trái để phân biệt loại

Tự trải nghiệm

Tính năng này có thể dùng ngay trong D2 Playground

  • Có thể mở khối mã được cung cấp để trực tiếp trải nghiệm render ASCII

1 bình luận

 
GN⁺ 2025-08-20
Ý kiến Hacker News
  • Chào mọi người, tôi muốn chia sẻ một tính năng mới vừa được thêm vào sáng nay. Nó vẫn đang ở giai đoạn alpha và đã có một issue trên GitHub được mở. Nếu muốn bỏ qua bài blog và xem ngay thì có thể xem ở đây. Một ví dụ lớn hơn cũng có ở liên kết này

    • Trong playground nó được render thành chữ đen trên nền đen nên lúc đầu tôi tưởng là không chạy. Chắc là vì tôi đang bật dark mode. Các renderer khác thì vẫn ổn, nhưng ASCII thì không nhìn thấy
    • Tôi thắc mắc trong bài viết gốc có phải ý là chỉ đơn giản được downscale từ ELK hay không. Muốn dùng tính năng này thì có cần cấu hình ELK một cách tường minh không, hay chỉ cần xuất ra .txt là tự động bật? Tôi vốn đã dùng ELK cho hầu hết các sơ đồ D2 của mình
  • Tôi tò mò không biết so với mermaid thì giá trị nằm ở đâu. Tôi thích thiết kế và cách nó hoạt động, nhưng muốn hỏi liệu có lý do thực tế nào để chuyển từ mermaid sang không. Ngoài ra, tôi thấy các công cụ kiểu này thường thiếu khả năng chỉnh tay vị trí và kích thước của các hộp bằng các giá trị x/y trong kết quả được tạo tự động

    • Còn tùy bạn coi trọng giá trị nào. Có người chỉ cần hai điểm bạn vừa nêu là đủ, còn với người như chúng tôi thì việc render SVG từ CLI mà không cần trình duyệt chromium là điều quan trọng (xem trường hợp liên quan). Nó không cho thấy toàn bộ khác biệt, nhưng cũng có một trang so sánh ngắn gọn. Ngoài ra, tôi không muốn quảng bá sản phẩm trả phí, nhưng nếu bạn cần tính năng chỉnh tay để cố định vị trí và kích thước thì IDE có cung cấp
  • Dù cú pháp D2 rất hấp dẫn, từ trước đến nay tôi vẫn dùng Mermaid nhiều hơn vì hệ sinh thái công cụ của Mermaid. Nhưng tính năng này là thứ mới mẻ ở mức lớn, và tôi chưa từng thấy trong Mermaid. Nó cũng tạo ra mối liên kết rất hay với asciiflow.com

  • Tính năng chuyển đổi từ ASCII rất hay. Nhưng tôi thắc mắc khi cần cập nhật sơ đồ thì làm sao lấy lại source D2 gốc

  • Tôi lúc nào cũng thích D2 hơn mermaid, nhưng theo tôi thì grid layout gần như vô dụng vì issue sau (issue liên quan). Nếu vẫn phải tự căn chỉnh theo đơn vị pixel thì gần như đánh mất mục đích của loại công cụ này

    • Cảm ơn! Rất vui vì bạn đã báo. Chúng tôi dự kiến đưa vào 0.7.2 (bản phát hành tiếp theo)
  • Tôi từng quản lý và chia sẻ nhiều lần một danh sách các công cụ text-to-diagram chạy trên trình duyệt. Điều tôi mới biết gần đây là bản D2 online không thực sự chạy hoàn toàn trong trình duyệt, mà máy chủ backend tạo sơ đồ. Tôi muốn hỏi liệu D2 có thể chạy độc lập chỉ ở phía client (trình duyệt) hay không, và phần mở rộng được nhắc đến trong bài này có hoạt động offline không

    • Giờ thì được rồi! (từ một tuần trước) Nếu mở network tab của d2 playground, bạn sẽ thấy nó chạy bằng d2.js, một wrapper bao quanh bản port wasm của D2. Nó vẫn chưa phát hành chính thức, nhưng sẽ sớm có thông báo tách riêng
    • ~~Tôi định hỏi có thể xem danh sách đó không~~ Chỉnh sửa: tôi tìm thấy rồi! Cảm ơn
  • Mong có repository Python chính thức. Tôi muốn dùng trong notebook, nhưng hiện tại hơi bất tiện vì gần như bị ép phải dùng databricks

  • Trông thật sự rất đẹp. Tôi cũng đã xem bài viết trước đây về hỗ trợ C4! Sắp tới tôi cần làm C4 modeling nên sẽ thử xem

  • Tính năng thật sự rất tuyệt. Đây là lần đầu tôi nghe về D2, nhưng tôi cực kỳ thích việc có thể tạo biểu đồ ngay trong terminal rồi cũng có thể render đẹp mắt. Tôi sẽ thử dùng sớm

    • D2 đã hỗ trợ cả tính năng live update .svg thông qua máy chủ HTTP thời gian thực. Nếu mở trình duyệt và vim cạnh nhau thì bạn cũng có thể xem cập nhật theo thời gian thực. Tôi phát hiện ra D2 từ một năm trước, và từ đó dùng nó cho mọi sơ đồ
    • Bình thường tôi dùng Moondraw cho sơ đồ ASCII, nhưng nếu đã ở sẵn trong môi trường vim thì công cụ này tốt hơn nhiều
  • extension vim đúng là tính năng đỉnh thật

    • Nhưng việc nó được viết bằng vimscript thì hơi lạ và cũng hơi đáng tiếc