Flow Notes 是一个零依赖的网页版笔记工具，适合写 Markdown 笔记、整理学习资料、保存代码片段和做轻量知识管理。
在线访问：https://ryanjiezhang.github.io/flow-notes/
- 自动保存草稿，刷新页面后可以恢复未保存内容
- 已保存笔记支持 2 秒防抖自动保存，编辑后会自动更新正式笔记
- 支持编辑已有笔记，而不是每次保存都生成重复记录
- 支持笔记版本历史，可以恢复最近保存过的旧版本
- 支持笔记锁定 / 只读模式，防止重要笔记被误改
- 支持回收站，删除笔记后可恢复或永久删除
- 支持标签、置顶、归档和删除
- 支持按标题、正文、标签搜索
- 支持历史列表搜索结果高亮，快速看出命中位置
- 支持
tag:、title:、body:搜索语法和多关键词搜索 - 支持按状态和标签过滤笔记
- 支持总笔记、归档、标签、回收站数量统计
- 支持本地存储占用提示，图片过多或接近浏览器上限时提醒备份
- 支持拖拽调整历史栏宽度，也可以一键收起历史栏
- 支持拖拽调整分屏模式下编辑区和预览区的宽度
- 支持专注写作模式，一键隐藏历史栏、标签栏、工具栏和状态栏
- 支持根据
#、##、###自动生成右侧笔记目录，并点击跳转 - 支持
[[笔记标题]]双向链接，点击即可跳转到对应笔记 - 支持反向链接和轻量知识图谱，查看当前笔记与其他笔记的关系
- 支持拖拽本地图片到编辑区，自动插入为可预览的 Markdown 图片
- 支持编辑区选中内容时同步定位到预览区对应结果
- 支持代码块内逐行同步定位
- 支持浅色 / 深色模式切换
- 支持在网页中查看更新日志，快速了解今天和近期更新内容
- 支持 Markdown 编辑、预览和分屏模式
- 支持 Markdown 快捷工具栏，快速插入标题、加粗、列表、表格、图片和代码块
- 支持
Ctrl+S、Ctrl+B、Ctrl+I、Ctrl+K、Ctrl+F常用快捷键 - 支持一键插入多语言代码块模板
- 支持代码编辑器式行号、当前行标记和缩进参考线
- 支持插入代码块前选择代码语言
- 支持 Tab 缩进、Shift+Tab 反缩进和回车自动延续缩进
- 支持复制代码块
- 支持 Markdown、TXT、HTML、PDF、JSON 导出
- 支持全部笔记 JSON 备份
- 支持全部笔记合并导出为 Markdown 或 HTML
- 支持每保存 20 次或距离上次备份 7 天自动提醒导出全部 JSON
- 支持导入 JSON 备份恢复笔记
- 支持导入前预览备份，并选择覆盖当前、合并导入或仅预览
- 支持 PWA 离线缓存，可以安装到桌面或手机主屏幕
Flow Notes 支持常用 Markdown 语法：
# 一级标题
## 二级标题
### 三级标题
**加粗**
*斜体*
`行内代码`
- 列表
- 列表
[链接](https://example.com)
| 名称 | 状态 |
| --- | --- |
| 表格 | 支持 |
| 图片 | 支持 |编辑区右侧会根据 #、##、### 自动生成目录。点击目录项会定位到对应标题行，并同步滚动预览区。
在正文中输入 [[笔记标题]] 可以链接到另一条笔记：
今天复习了 [[Python 基础]]，后面要继续整理 [[数据分析路线]]。如果存在同名笔记，预览区会显示为可点击的内部链接，点击后会跳转到对应笔记。也可以使用别名：
参考 [[Python 基础|Python 入门笔记]]右侧面板会自动显示：
- 出链：当前笔记链接到了哪些笔记
- 反向链接：哪些笔记引用了当前笔记
- 知识图谱：当前笔记与关联笔记组成的轻量关系图
如果链接目标还没有创建，系统会显示为缺失链接，方便后续补充。
本地图片可以直接拖拽到编辑区。图片会被转换为 data:image/... 格式并插入为 Markdown 图片语法，因此保存后仍能在当前浏览器中预览。图片较大时会增加笔记体积，重要图片建议搭配“全部 JSON”备份。
拖拽较大的本地图片时，Flow Notes 会尝试压缩长边超过 1600px 的图片，并在状态栏提示压缩前后的体积。
JavaScript 代码块支持在预览区通过沙箱运行：
```js
console.log("Hello Flow Notes");
console.log(1 + 2);
```HTML 代码块支持在预览区打开 iframe 预览：
```html
<h1>Hello</h1>
<p style="color: teal">HTML 预览</p>
```Python 代码块支持通过 Pyodide 在浏览器中运行：
```python
print("张杰上将")
print(1 + 2)
```Python 支持标准库，例如：
```python
import re
text = "Flow Notes 2026"
print(re.findall(r"\d+", text))
```部分 Pyodide 支持的第三方库会在运行前自动加载，例如 numpy、pandas 等。首次加载 Python 或第三方库需要联网，可能会慢一点。
说明：当前运行能力是前端静态网页中的轻量预览功能。JavaScript 会在 Web Worker 中隔离执行，Python 会通过 Pyodide 加载浏览器版 Python 运行环境；C++、Java 等语言仍需要后端沙箱或第三方编译服务。
Tab：插入 4 个空格或给选中行增加缩进Shift+Tab：减少选中行缩进Enter：自动延续上一行缩进Ctrl+S/⌘S：保存当前笔记Ctrl+B/⌘B：加粗Ctrl+I/⌘I：斜体Ctrl+K/⌘K：插入链接Ctrl+F/⌘F：聚焦左侧搜索框
编辑区会显示行号、当前行标记和缩进参考线。插入代码块前，可以在顶部选择代码语言。
搜索框支持普通多关键词搜索，也支持限定字段：
tag:学习：只查标签title:Python：只查标题body:函数：只查正文tag:学习 Python：同时满足标签和普通关键词
点击左上角的 ! 按钮可以打开更新日志面板。
更新日志会展示今天更新了什么，以及近期版本中新增过的重要功能，方便给同学或访客快速说明这个网站已经支持哪些能力。
桌面端可以拖动历史栏和编辑区之间的分隔区域，调整左侧历史栏宽度。点击中间的箭头按钮可以收起或展开历史栏，适合半屏写笔记时腾出更多编辑空间。
在分屏模式下，也可以拖动编辑区和预览区之间的细分隔条，自由调整两边宽度。分屏会保持左右排列，调整后的比例会保存在浏览器中，下次打开仍会沿用。
在分屏或预览模式下，点击或选中编辑区内容时，预览区会自动滚动到对应标题、段落、表格或代码块，并短暂高亮定位结果。
如果选中的是代码块内部某一行，预览区会进一步高亮对应代码行。
点击顶部的“专注”按钮会进入全屏写作模式，页面会隐藏历史栏、标签栏、工具栏和底部状态栏，只保留正文编辑区。右上角的“退出专注”按钮或 Esc 键可以返回原来的布局。
每次覆盖保存已有笔记时，Flow Notes 会自动记录旧版本。点击标签栏右侧的“版本”按钮可以查看最近旧版本，并选择恢复。恢复后需要再次点击“保存”才会正式覆盖当前笔记。
版本面板里可以点击“对比”查看旧版本正文和当前正文的差异摘要。
锁定的笔记仍然可以查看版本差异，但不能恢复旧版本；需要先点击“解锁”再恢复。
保存后的笔记可以点击标签栏右侧的“锁定”进入只读模式。锁定后标题、标签和正文不可编辑，自动保存也会暂停；仍然可以预览、导出、复制代码块、运行代码块和查看版本对比。
点击历史卡片右侧的删除按钮会先把笔记移入回收站。状态筛选中选择“回收站”后，可以恢复笔记，或再次删除进行永久删除。
普通 Markdown / HTML 全部导出会排除回收站内容；全部 JSON 备份会保留回收站状态，方便完整恢复。
编辑器上方提供常用 Markdown 快捷按钮：
H1/H2：插入标题B/I：加粗和斜体列表：插入列表表格：插入 Markdown 表格图片：插入图片语法代码：按照当前选择的语言插入代码块
单篇笔记可以导出为：
- Markdown
- TXT
- HTML
- JSON
也可以选择“全部 JSON”导出完整备份。完整备份会包含笔记正文、标题、标签、置顶、归档、回收站状态、创建时间和更新时间。
也可以把全部笔记合并导出为一个 Markdown 文件或一个 HTML 文件，适合分享、打印或迁移到其他工具。
每保存 20 次，或距离上次导出全部 JSON 超过 7 天，Flow Notes 会提醒进行备份。点击提醒里的“立即导出全部 JSON”会下载完整备份，并重置下一轮提醒计数。
导入功能支持读取 Flow Notes 导出的 JSON 文件，用于恢复或迁移笔记。导入前会先显示备份摘要和部分笔记预览，可以选择：
- 覆盖当前：用备份文件替换浏览器中现有全部笔记
- 合并导入：把备份笔记加入当前历史，自动避开重复 ID
- 仅预览：只查看备份内容，不写入当前数据
所有笔记数据保存在浏览器的 localStorage 中。
这意味着：
- 同一设备、同一浏览器会自动保留笔记
- 换浏览器或换设备不会自动同步
- 清除浏览器网站数据可能会删除笔记
- 建议定期使用“全部 JSON”进行备份
左侧统计区会显示当前本地存储占用。浏览器 localStorage 常见容量约为 5MB，Flow Notes 会在接近上限时提醒导出全部 JSON 或清理大图。
已经保存过的笔记会在编辑停止约 2 秒后自动保存。第一次创建的新笔记仍需要手动点击“保存”，之后才会进入自动保存流程。
Flow Notes 已配置 PWA 支持。在 GitHub Pages、localhost 或其他 HTTPS 环境中打开后，浏览器可以缓存基础页面，并允许安装到桌面或手机主屏幕。
说明：离线缓存保证页面本体可以打开；首次运行 Python 代码块或加载第三方 Python 库仍可能需要联网下载 Pyodide 资源。
直接打开 index.html 即可使用，不需要安装依赖。
项目文件：
index.html：页面结构styles.css：界面样式app.js：笔记、Markdown、导入导出和交互逻辑manifest.webmanifest：PWA 安装配置sw.js：离线缓存 Service Workerapp-icon.svg：应用图标
本项目是纯静态网页，可以部署到 GitHub Pages、Netlify、Vercel 或任何静态文件托管服务。