教师图解生成器 · 使用说明

30 种教学图解版式 | 填表就出图 | 双击即用,不用装任何软件
离线可用 · 断网照样出图 不联网 · 不上传 · 不收费 出的是矢量图,可编辑 中文由代码绘制,零错字

一、三步出图

  1. 双击 教师图解生成器.html —— 用任意浏览器打开就行(Edge / Chrome 都可以),不需要装 Python,也不需要联网。
  2. 左边选版式、改文字。 30 个版式按用途分成 5 组。切换版式会自动填一份示例内容,直接在上面改就行。右边实时更新,不用点"生成"也会跟着变。
  3. 点下载。 要插 PPT / WPS 或者还需要改的,下 SVG;要直接发群里、贴文档的,下 PNG;要打印或投大屏的,下 4K PNG。

二、30 个版式速查

分组版式(点左边按钮切换)
层级与结构
7 个
金字塔 · 阶段进阶 · 分层结构 · 剖面截面 · 拆解爆炸 · 分类树 · 思维导图
对比与关系
6 个
双列对比 · 多层对比 · 前后对比 · 关系网络 · 循环闭环 · 中心标注
流程与时间
5 个
流程 · 时间轴 · 路径地图 · 漏斗转化 · 连续场景
数据与占比
5 个
排行榜 · 比例构成 · 尺度比较 · 坐标散点 · 数字大字
卡片与讲义
7 个
四象限 · 标签小卡 · 左文右图 · 一大多小 · 百科信息卡 · 手绘笔记 · 讲义高密
拿不准选哪个:讲层级高低用金字塔,讲先后顺序用流程,讲时间分配用时间轴,讲两件事的差别用双列对比,讲轻重缓急用四象限。

三、条目怎么写(最容易卡在这一步)

左下角那个大框里,一行就是一条。需要分字段的地方用竖线 | 隔开(输入法英文状态下,一般在回车键左边)。

写法用在哪些版式例子
一行一条
(不用竖线)
金字塔、阶段进阶、流程、中心标注、拆解爆炸、关系网络、循环闭环、手绘笔记、左文右图 识记
理解
运用
分析
评价
名称 | 说明 分层结构、剖面截面、分类树、思维导图、百科信息卡、标签小卡、一大多小、讲义高密、路径地图、连续场景、数字大字、四象限 课前|微课自学,完成前测
课中|分组探究,教师点拨
课后|分层作业,错题回看
名称 | 数值 排行榜、比例构成、尺度比较、漏斗转化 看拼音写词|92
古诗默写|85
课外阅读|58
时间 | 事件 时间轴 0-5 分钟|情境导入
5-20 分钟|探究新知
20-35 分钟|巩固练习
35-40 分钟|归纳小结
维度 | 左 | 右 双列对比、多层对比(维度可以省略) 时间|讲授占满,练习留家|练习在堂,疑问当场
左 | 右 前后对比 改前:一讲到底|改后:讲练结合
横坐标 | 纵坐标 | 名称 坐标散点 2|65|小张
5|88|小李
写 4 行 四象限(顺序:左上 / 右上 / 左下 / 右下,只取前 4 行) 重要不紧急|备课教研
重要且紧急|突发冲突
不紧急不重要|无效群聊
紧急不重要|临时填表
💡 条目别写太长。每个版式给的空间是有限的,一句话最好控制在 12 个字以内;字太多会自动换行、字号自动缩小,投到屏幕上就看不清了。

四、那几个按钮是干什么的

换一笔重新随机手绘的笔触抖动。图的内容不变,只是"这一笔"画得不一样,看不顺眼就多点几下。
生成手动重画一次。正常情况不用点,改文字会自动更新。
恢复示例内容改乱了想重来,点它回到版式自带的示例。
纸张底色米白 / 纯白 / 浅灰三档,按你的课件配色选。

颜色

内置 36 种经典配色(克莱因蓝、朱砂红、祖母绿、爱马仕橙……),下拉框直接选。对比类版式能分别给左右两栏选色。

五、常见问题

会不会丢失内容?不会。你填的内容自动存在这台电脑的浏览器里,关掉再打开还在。换电脑就没了,重要内容建议自己存一份文字。
为什么字体变了?SVG 里的中文是"文字",依赖打开它那台电脑装了什么字体。建议装 Noto Sans SC(思源黑体,免费);没装会退回系统默认字体,位置不会乱,但字形会变。怕变形就下载 PNG,PNG 是把字固定成画面的。
SVG 能改吗?能,这是它最大的好处。用 PPT / WPS 插入 SVG 后,右键"转换为形状"就能拆开,改颜色、挪位置都行,放大也不糊。
断网能用吗?能。整个工具就是一个 HTML 文件,不联网、不上传、不调用任何 AI 接口,也不收任何费用。
怎么发给别人?直接把这个 HTML 文件发过去(微信、QQ、U 盘都行),对方双击就能用。只有 84 KB。
为什么有些版式没有?地图类、人物群像类主动没做——前者有合规风险,后者涉及肖像权。需要地图的地方请用教材或官方地图。

六、用了什么(可商用说明)

📄 版式骨架 参考开源项目 yang0/handraw-style(MIT 许可),已按要求保留署名。
🔤 字体 Noto Sans SC(思源黑体),SIL OFL 协议,免费商用。
✏️ 图形 全部由代码绘制,非 AI 生成,因此无需标注"插图由 AI 生成"。
🖼️ 成图版权 你填内容生成的图,归你,可用于公开课、论文、出版、售卖课件。