MonoSketch - Công cụ tạo sơ đồ dựa trên ASCII

• Ứng dụng web chỉ chạy phía client cho phép chuyển ý tưởng thành thiết kế trực quan chỉ bằng văn bản
• Dự án mã nguồn mở được viết bằng Kotlin rồi biên dịch sang JS. Sử dụng SASS/Tailwind
• Có thể biểu diễn các cấu trúc phức tạp hoặc sơ đồ hệ thống bằng cách kết hợp các khối hình cơ bản như hình chữ nhật, đường thẳng, hộp văn bản
• Thông qua tính năng định dạng, các ký tự ASCII đơn giản có thể được chuyển thành những yếu tố trực quan với nhiều kiểu khác nhau
• Công cụ cho phép tạo bài thuyết trình và diễn giải trực quan mà không cần PowerPoint hay Google Slides

---

Tổng quan

• MonoSketch là ứng dụng tạo phác thảo và sơ đồ ASCII, một công cụ giúp thể hiện ý tưởng theo cách trực quan
  • Thông qua giao diện dựa trên văn bản, có thể tạo các sơ đồ mạch, cấu trúc hệ thống, luồng mạng phức tạp bằng ký tự ASCII
  • Với khẩu hiệu “Unleash your ideas with ASCII”, công cụ này cho phép thiết kế trực quan chỉ bằng văn bản đơn giản

Thành phần cơ bản

• Cung cấp các chức năng vẽ cơ bản như Rectangle, Line, Text box
  • Hỗ trợ nhiều kiểu đường viền, ký tự tô nền, trang trí mũi tên
  • Tăng độ hoàn thiện trực quan nhờ xử lý góc bo tròn
• Môi trường tương tác tập trung vào chức năng chỉnh sửa
  • Canvas vô hạn hỗ trợ cuộn tự do và phóng to/thu nhỏ
  • Cung cấp tự động lưu và quản lý nhiều dự án
  • Hỗ trợ các lệnh chỉnh sửa tiêu chuẩn như sao chép, cắt, dán, nhân bản
  • Có thể căn chỉnh hình chính xác nhờ quản lý layer và smart snapping
  • Hỗ trợ dark mode
• Tính năng xuất
  • Có thể sao chép ngay dưới dạng văn bản vùng được chọn hoặc toàn bộ sơ đồ
  • Hỗ trợ phím tắt: macOS Cmd + Shift + C, Windows/Linux Ctrl + Shift + C
• Lộ trình sắp tới
  • Tính năng nhóm để quản lý các hình trong cấu trúc phức tạp
  • Công cụ vẽ để tạo đường cong tự do và bản vẽ dựa trên ký tự
  • Dự kiến mở rộng các tính năng cộng tác như chia sẻ GitHub Gist và tải bằng URL

Ứng dụng và UI

• Có thể sử dụng trên web qua app.monosketch.io
  • Bao gồm mockup thể hiện các thành phần UI như ô tìm kiếm, nút bấm, workspace, panel bằng ASCII
  • Màn hình đăng nhập, biểu mẫu đăng ký cũng được trực quan hóa dưới dạng ASCII
• Nhờ tính năng tạo bài thuyết trình, có thể xây dựng tài liệu trình bày mà không cần PowerPoint hay Google Slides

Stack công nghệ và giấy phép

• Toàn bộ ứng dụng được xây dựng trên nền Kotlin/JS (phát triển bằng Kotlin rồi biên dịch sang JS)
• Styling với SASS và Tailwind CSS
• Sử dụng hệ thống build Gradle (hỗ trợ chế độ phát triển hot reload)
• Cung cấp tùy chọn máy chủ phát triển thay thế thông qua Python 3.11+ và Pipenv
• Mã nguồn mở theo Apache License 2.0

[GN⁺]

Ý kiến trên Hacker News

• Tôi đang dùng Monodraw
  Cho đến giờ đây là món mua khiến tôi hài lòng nhất

  • Tôi cũng dùng Monodraw, nhưng có một điều khá tiếc
    Vẫn chưa có chức năng đóng popup chỉnh sửa văn bản bằng phím ESC
    Lần nào tôi cũng bấm ESC nhưng không có phản hồi, khá bực mình
    Tôi từng định tự vá binary, nhưng cơ chế cập nhật bị hỏng nên đành bỏ cuộc
  • Sau khi chuyển từ Mac sang Windows, ứng dụng tôi nhớ nhất là Monodraw
    Nhưng công cụ mới ra lần này trông như một phương án thay thế khá ổn nên tôi nhất định sẽ thử
  • Khi làm sơ đồ, phác thảo, hoặc trang trí header của file cấu hình, việc kết hợp fig với khung, bóng đổ v.v. thật sự rất tiện
  • Ngay cả sau khi bỏ Mac, đây vẫn là một trong những ứng dụng tôi nhớ nhất
  • Trước đây tôi thực sự rất thích Monodraw trên Mac
    Giờ tôi dùng Linux làm máy chính nên đang tìm ứng dụng thay thế, và công cụ tôi thấy lần này có vẻ là phương án gần nhất mà tôi từng gặp

• Các công cụ tương tự có TextPaint, Archetype (archive), Textik, Asciiflow, Fsymbols Draw v.v.

  • Và đừng quên JavE nữa

• Sơ đồ mạch ở phần header quá cẩu thả, trông như một sơ đồ mạch do AI tạo lỗi
  Kiểu ký hiệu không đồng nhất, không có nhãn chân, và tụ điện ở góc trên bên trái còn bị nối tắt

  • Vấn đề không phải là các chuyên gia nhận ra lỗi này ngay, mà là người mới sẽ học sai
    Nếu học trong tình trạng như vậy thì các chuyên gia tương lai sẽ lớn lên trên một nền tảng sai lệch
  • Tôi không để ý chỗ tụ điện bị nối tắt, nhưng lại ngạc nhiên khi thấy họ dùng “+” để chỉ chân ngắn (thường là cực âm) rồi nối thẳng vào GND

• Tôi muốn nói đôi lời với những người dùng từ ‘ASCII’
  Monosketch thực ra không chỉ dùng ASCII
  Ví dụ, nó dùng ký tự Unicode như “◎” (U+25CE)

  • Dù vậy, trên landing page vẫn viết rất to “Unleash your ideas with ASCII”, nên tôi thấy cũng hơi buồn cười :-)
  • Xét về lịch sử, các ký tự vẽ đường thẳng hay khung được thêm vào từ thời IBM PC trong Code page 437, chứ không phải ASCII thật
    Nếu muốn vẽ khung bằng ASCII đúng nghĩa thì chỉ nên dùng | và -

• Nếu bạn dùng Emacs thì gói uniline khá hữu ích

• Markdeep cũng có thể vẽ sơ đồ bằng ASCII art
  Đây là một công cụ khá hoàn thiện

• Tôi khuyên nên đặt thuộc tính spellcheck trong HTML thành false
  Nếu không, các nhãn như “GND”, “uF” sẽ bị gạch chân đỏ, nhìn khá khó chịu

• Graph-Easy mặc định tạo ASCII, nhưng cũng hỗ trợ nhiều định dạng đầu ra như ký tự khung, SVG, PNG v.v.
  Nó không theo kiểu WYSIWYG, mà là bạn mô tả sơ đồ bằng văn bản rồi để nó sinh kết quả

• Tôi vừa thử tạo vài sơ đồ đơn giản bằng công cụ này, thấy dễ dùng và chất lượng xuất ra cũng tốt
  Tuy vậy vẫn có vài điểm sẽ tốt hơn nếu được cải thiện

  1. Khi di chuyển hình chữ nhật nhỏ, UI nên phản hồi rõ hơn để biết là đang di chuyển chứ không phải phóng to
  2. Nếu mở Monosketch ở tab khác thì không thể tạo sơ đồ mới đồng thời — có vẻ ngữ cảnh đang được chia sẻ giữa các tab

• Cũng có Monodraw là ứng dụng native cho macOS

  • Nhưng Monodraw hiện ở chế độ bảo trì và là ứng dụng trả phí
    Xét theo tên gọi thì Monosketch có vẻ đúng là phương án thay thế rõ ràng của nó