句子简图使用说明
句子简图是生成 sentence diagram 的在线编辑器，在使用前你需要了解 sentence diagram 标注英语句子成分的各种符号。句子简图主要以《Sentence Diagraming》这本高中教材中的标记为依据，大致说明可以参考 500 Sentence Diagrams 和 Diagramming Sentences 这两个网站。
页面分区
进入句子简图网站后会直接看到以下界面，有输入框、标记区和编辑区三个部分，非常简单。
输入句子
绿框部分是输入区，只需要将英语句子复制粘贴到输入框，点击确定后网站会自动将输入的句子分解成可以拖动的单词，如下图所示：
红色的单词都是可以拖动的，标点符号会显示黑色且不可拖动。点击重新输入后会清除当前输入的句子，但是并不会清空编辑区中的元素，因此你可以在任何时候重新输入。
添加符号
黄色部分是句子简图支持的所有符号，将单词拖动符号上会自动往编辑区添加对应的元素。
图中示例的是将单词“she”拖到横线符号区域时的情形，在编辑区的昨上角会自动添加一个灰色背景的元素，文字显示为刚才拖动的单词。
在需要选择多个单词的时候可以用鼠标左键点击对应的多个单词，然后拖动其中一个单词到符号上，编辑区会自动添加包含所有选择单词的元素。
调整元素
红色区域为最重要的编辑区，你需要在这里将添加的元素拖动组合成一个完整的句子结构图。
当元素添加到编辑区后并不会自动排列，它们都会出现在左上角，需要手动将元素拖动到合适的位置，组合成一个完整结构图。
鼠标左键点击空白区域后拖动鼠标会出现选择框，可以批量移动选择中的元素。
在元素的默认尺寸不够时可以用鼠标左键单击对应的元素，会在灰色选择框的边缘出现一个调整按钮，拖动按钮可以改变元素的尺寸。如果元素的标记选择错误，只需要鼠标双击就可以直接删除对应元素，然后重新添加即可。
导出图片
当调整完所有元素的位置，确认无误后可以选择导出图片。
默认编辑模式下每个元素都会显示灰色的背景，这是为了方便编辑拖动，在编辑完成后可以先点击隐藏选框，然后再导出图片。
上图为《Sentence Diagraming》书中的69页的原图。
此图为句子简图导出的图片裁剪后的样子。除了字体大小等差异外，还原程度非常高。后续会考虑加入字体选择和线体粗细颜色等设置。
清空缓存
为了让工具可以离线使用，句子简图使用 Service Woker 来缓存必要的静态资源，但是由于最初的缓存逻辑很不恰当，导致代码无法正常更新。
在最新的一次更新(2019-12-03)中，我调整了缓存逻辑并且增加了一个手动刷新缓存的功能，这样可以自由选择是否继续使用旧版本。如果你在这次更新前打开过句子简图，可能需要手动删除缓存才可以浏览到新的版本。
清空缓存的具体步骤可以参考文章：How to unregister service workers（图片保存在 Imgur，国内用户可能无法正常访问）。
其他
句子简图的功能现在已经能覆盖绝大多数场景，并且作者使用它实现了《Sentence Diagraming》中的所有示例和习题。在长难句的标注绘制过程中可能需要将画布缩到非常小，并且需要灵活使用各个符号元素才能完成。
另外目前并没有自动保存功能，在使用重置画布时请确认已导出图片。
更新记录
- 2019-12-05 修正自由文字和自由线条等元素的点击和选择逻辑；修正弃用提醒相关的逻辑。
- 2019-12-03 优化元素点击和多选逻辑，现在支持按住 CTRL 后单击元素进行多选。调整离线缓存逻辑，新增版本提示和手动刷新缓存功能。
- 2019-12-01 修改元素点击逻辑，移动被点击的元素到最上层，方便调整。
- 2019-11-28 修改了多选逻辑，现在需要选择框完全覆盖的元素才会被选中，并增加选中效果。页面新增了离线访问支持，断网后依然可以正常使用。