把一段描述系统的 JSON 喂给它,就能画出一张手绘铅笔风的架构图,输出 SVG、PNG 或可交互的离线 HTML 页面。
在 Agent 里输入 /penciled 加上一句话需求(比如"把当前仓库画成手绘架构图"),它会自动整理节点、写 JSON、过校验、最终出图。
零依赖,只要求 Node.js 18+;内置校验器会在画之前提示箭头交叉、标签重叠等问题,并给出修法。
需要注意:导出 PNG 依赖本机装了 Chrome/Edge/Chromium/Brave;目前 Star 数还不多(6 个),真实用户反馈较少。
优势是风格统一、可复现(--seed 控制手绘抖动)、自带离线 HTML 查看器,画风比传统架构图更亲和,适合写博客、做分享。
手绘外观决定了它不适合正式文档;节点形状和能力被 JSON Schema 限定,不是通用绘图工具。
优点是 CLI 和 Skill 两种用法都轻量,README 和示例(web-app、microservices、ci-pipeline 等)齐全,上手门槛低。
从目前实现看,PNG 链路需要浏览器,录 demo 还要 Playwright + ffmpeg,普通用户可以忽略。
快速使用
GitHub 地址
npx skills add himanshu13ps/penciled
Skill简述
Skill简述
功能: 跟 AI 说一句“把这个项目架构画成手绘风格”,它就能自己分析代码、生成 JSON,再变成一张看起来像铅笔画的架构图;也可以直接给它 JSON 文件,输出 SVG、PNG 或一个能离线打开的交互式网页。
优点: 零依赖,装起来就一行命令;自带检查器,会提醒你有交叉、重叠或标签太挤,还给出修改建议;同一个输入加个随机种子,每次手绘效果都不同,但种子一样图就完全一样。
缺点: PNG 导出要电脑上装 Chrome、Edge、Chromium 或 Brave 其中一个,没装的话只能拿到 SVG 或 HTML;目前真实用户反馈较少,稳定性只能靠小范围口碑。