手绘风图表工具包
ReactDiagramSVGCanvasWhiteboard更新于 2026-08-14
使用场景： 为应用添加手绘/素描风格图表与白板视觉——流程图、线框图、笔记与有人情味的协作画布。
安装
npx skills add hand-drawn-diagram-kit克隆
git clone https://github.com/skillhub-community/hand-drawn-diagram-kit.git描述
手绘素描风格图表工具包。核心组件：SketchFlow（手绘边框流程图节点 + 用 rough.js 绘制抖动 SVG 路径的连接箭头）、SketchDiagram（可拖拽节点 + 弹性连接线的自由图表）、StickyNote（带阴影与图钉的涂鸦便利贴）与 SketchStage（方格纸或空白白板背景，支持平移缩放）。全部以清晰 SVG 渲染，带有任意缩放级别都保持干净的标志性「手绘」描边风格。
包含交互功能：拖拽重排节点并实时重绘连接线、双击节点内联编辑文本、吸附网格与对齐参考线、导出 PNG/SVG，以及一个简单的数据模型（nodes/edges）让渲染任意图结构都很容易。提供 rough.js 集成指南与描边风格定制器（抖动量、线宽、笔色）。用例：流程图、架构图、备课板与协作白板功能。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@motion_kevin
许可证MIT
版本1.0.0
依赖0