Hand-Drawn Diagram Kit
When to use: Adding hand-drawn / sketch-style diagrams and whiteboard visuals to apps — flowcharts, wireframes, notes, and collaborative canvases with a human touch.
npx skills add hand-drawn-diagram-kitgit clone https://github.com/skillhub-community/hand-drawn-diagram-kit.gitDescription
A toolkit for hand-drawn, sketch-style diagrams. Core components: SketchFlow (flowchart nodes with hand-drawn borders and connector arrows that use rough.js for the wobbly SVG paths), SketchDiagram (freeform diagrams with draggable nodes and elastic connector lines), StickyNote (doodle sticky notes with shadows and pin), and SketchStage (a graph-paper or blank whiteboard background with pan/zoom). Everything renders as crisp SVG with a signature 'hand-drawn' stroke style that stays clean at any zoom.
Includes interactive features: drag to reposition nodes with live connector re-routing, double-click to edit node text inline, snap-to-grid and alignment guides, export to PNG/SVG, and a simple data model (nodes/edges) that makes it easy to render any graph structure. Provides the rough.js integration guide and a stroke-style customizer (jitter amount, stroke width, pen color). Use cases: flowcharts, architecture diagrams, lesson-planning boards, and collaborative whiteboard features.
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub