Một hệ thống sơ đồ tự chứa bằng HTML và SVG, giúp Claude Code và các công cụ agent khác tạo sơ đồ mang phong cách biên tập, đồng bộ màu sắc và kiểu chữ với thương hiệu của bạn.
Diagram Design là một kho các kiểu sơ đồ mang tính biên tập, được đóng gói như một skill cho Claude Code và cũng dùng được với Codex, Pi cùng các công cụ tương thích Agent Skills khác. README cho biết dự án cung cấp 27 kiểu trực quan, mỗi kiểu có các biến thể HTML tĩnh cho giao diện sáng, tối và full-editorial, đồng thời có thể mở trực tiếp trong trình duyệt mà không cần bước build, JavaScript hay phụ thuộc ảnh ngoài. Dự án cũng có luồng onboarding để đồng bộ nhận diện thương hiệu từ website và một thư viện mẫu trực tuyến để duyệt các thiết kế.
Dự án giải quyết khoảng trống giữa những sơ đồ do AI tạo ra nhưng quá generic, nhiều hộp vuông, với những sơ đồ có cảm giác trau chuốt, mang tính biên tập và phù hợp với một sản phẩm hay website thực tế. README mô tả nỗi đau là либо phải tốn thời gian trong Figma, hoặc chấp nhận những sơ đồ không hòa nhập với giao diện tổng thể của site. Dự án cũng hướng tới việc giảm rối mắt bằng cách giữ mật độ thấp và chỉ dành màu nhấn cho những phần quan trọng nhất.
Ở mức khái quát, skill này ánh xạ kiểu biểu đạt mà người dùng cần sang kiểu sơ đồ gần nhất, đồng thời dùng các mẫu ngữ nghĩa khi hành vi quan trọng hơn việc tạo thêm một danh mục hình mới. Nó cũng có thể chuyển đổi lại nguồn từ draw.io hoặc Mermaid sang định dạng, kích thước và mức độ chi tiết được chọn trước; ngoài ra còn hỗ trợ hiệu ứng động tùy chọn cho các phần giải thích theo trình tự, trong khi đầu ra tĩnh vẫn là mặc định. Với việc đồng bộ thương hiệu, công cụ đọc website, trích xuất bảng màu và bộ font, gán chúng vào các vai trò ngữ nghĩa như paper, ink, muted, accent và link, rồi ghi các token đó vào style guide.
Dự án đang được chú ý vì nằm ở giao điểm giữa vẽ sơ đồ có hỗ trợ AI, quy trình làm việc bằng agent và đầu ra hình ảnh đồng nhất với thương hiệu. Repository có số sao lớn và mức tăng sao trong ngày đáng kể; README nhấn mạnh các lợi ích rất dễ nhận ra ngay: chất lượng biên tập, hiển thị trực tiếp trong trình duyệt, không cần build step và có thể nhanh chóng đồng bộ với nhận diện hình ảnh sẵn có của website. Việc bổ sung semantic system patterns và chuyển động truy cập được tùy chọn ở phiên bản 2.3 có thể cũng làm nó hấp dẫn hơn với những ai muốn có cấu trúc tốt hơn mà vẫn giữ đầu ra tĩnh làm mặc định.
Do AI giải thích · dựa trên README của từng kho
README đặt dự án này đối lập khá rõ với các sơ đồ kiểu Mermaid quá đại trà và với việc phải dùng Figma cho công việc sơ đồ thường ngày. README cũng nhắc đến draw.io như một nguồn đầu vào mà công cụ có thể chuyển vẽ lại, nên draw.io là một lựa chọn gần kề thực tế hơn là đối thủ trực tiếp. Ở mức rộng hơn, những cách tiếp cận tương đương mà README gợi ra là Mermaid, draw.io, và việc tự dựng sơ đồ trong các công cụ thiết kế như Figma; tuy nhiên repository này cố gắng mang lại một hướng đi mang tính biên tập và nhận diện thương hiệu hơn.