csthink/dashmotion

🎯 Dashmotion: Sơ đồ kỹ thuật động từ tiếng Anh hoặc Mermaid — một kỹ năng Claude độc lập

Biến mô tả bằng ngôn ngữ tự nhiên hoặc mã nguồn Mermaid thành sơ đồ hoạt ảnh, xuất thành một file HTML/SVG nhẹ, không phụ thuộc.

Dashmotion là một kỹ năng (Claude skill) cho phép tạo các sơ đồ kỹ thuật hoạt ảnh từ mô tả bằng tiếng Anh hoặc cú pháp Mermaid. Được thiết kế để tái hiện phong cách trực quan đường dòng thời gian và luồng yêu cầu như trên các trang web hạ tầng hiện đại (ví dụ: Diagrid, Temporal, Inngest).

✨ Điểm nổi bật

• Hai chế độ: Flow (quy trình, pipeline, máy trạng thái) và Architecture (hệ thống, topology).
• Hỗ trợ đầu vào đa dạng: mô tả bằng ngôn ngữ tự nhiên hoặc mã nguồn Mermaid (flowchart/graph/stateDiagram-v2).
• Hoạt ảnh yêu cầu: dấu chấm di chuyển theo hướng thực thi, mô phỏng luồng dữ liệu thực tế.
• Tinh gọn hoàn toàn: một file HTML duy nhất, vector, lặp vô hạn, vài KB, chạy trên mọi trình duyệt.
• Tinh chỉnh bằng ngôn ngữ tự nhiên: "làm nổi bật đường xác thực", "di chuyển Redis gần Postgres", v.v.
• Không cần công cụ thiết kế: dựa trên stroke-dashoffset và animateMotion, không dùng thư viện nào.

💡 Vì sao đáng chú ý

Dashmotion khác biệt ở việc kết hợp khả năng hiểu ngôn ngữ tự nhiên của Claude với kỹ thuật hoạt ảnh SVG gốc. Thay vì phải vẽ tay hoặc dùng phần mềm đồ họa, người dùng chỉ cần mô tả bằng văn bản và nhận ngay một sơ đồ động sinh động. Đặc biệt hữu ích cho kiến trúc sư hệ thống, kỹ sư DevOps và nhà giáo dục công nghệ cần truyền đạt cấu trúc hoặc luồng hoạt động một cách trực quan.

#Dashmotion #ClaudeSkill #AnimatedDiagrams #Mermaid #SVGAnimation #ArchitectureVisualization #OpenSource #TiniX