擅长写Markdown的同学，应该都体验过Typora那种所见即所得，实时渲染Markdown语法内容的感觉，对于简单的编写，以及阅读md文档内容来说，Typora相比古法两栏预览的模式，确实要舒服很多。
不过Typora从0.9.x版本（印象中是）开始就推付费了，当时也是找过各种替代，体验一圈下来，结论是，都不如Typora……最后还是咬着牙选了vscode，回归两栏预览式。
但是现在不一样了啊兄弟们，现在有了ai，我们可以很轻松的自己vibe一个了，复刻Typora的编辑和阅读体验。
项目地址：
基于 Vanessa219 大佬的 Vditor:一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式 的项目开发并进行了适当的调整
特性
所见即所得 - 输入 Markdown 语法，实时渲染展示（精髓，感谢Vditor项目）
三种模式 - 所见即所得，实时渲染（类似Typora），分屏预览（古法md）
图片粘贴（Typora最喜欢的功能之一） - Ctrl+V 粘贴图片，自动保存到 img 目录并以相对路径引用图片（可配置目录名）
目录树 - 左侧边栏查看文件结构，支持目录和md文档的新建和重命名
多标签页 - 支持同时打开多个文档
自动保存（省去你不停ctrl+s的烦恼） - 文档修改自动保存到本地文件
主题切换 - 亮色/暗色模式
快捷键 - 支持 Ctrl+B/I/S 等快捷操作
功能截图
实时渲染，优化引用
Markdown语法实时渲染，光标移动到附近显示Markdown源码方便修改，优化引用渲染样式
支持文档目录树和文档大纲
左侧可展示文档目录树，支持对目录和md文件的新建和重命名
右侧可展示当前md文档的大纲，点击跳转
快速贴图
复制图片，可直接将图片保存到文档同级目录的img目录（可配置修改目录名）下，并使用相对路径在文档中引用图片
tab键交互，有序列表渲染优化
优化tab键交互，行首tab键缩进2个汉字，保持表格中tab键跳转到下一单元格，保持列表中tab键缩进层级，优化有序列表缩进层级渲染为不同的序列标识。
**支持明暗两种主题
技术栈
| 技术 |
说明 |
| React 18 |
前端框架 |
| TypeScript |
类型安全 |
| Vditor |
Markdown 编辑器引擎 |
| TailwindCSS |
样式方案 |
| Zustand |
状态管理 |
| Vite |
构建工具 |
| Lucide React |
图标库 |
快捷键
| 快捷键 |
功能 |
| Ctrl+S |
保存 |
| Ctrl+B |
加粗 |
| Ctrl+I |
斜体 |
| Ctrl+D |
删除线 |
| Ctrl+M |
插入表格 |
| Ctrl+= |
表格插入行 |
| Ctrl± |
表格删除当前行 |
| Ctrl+Shift+= |
表格插入列 |
| Ctrl+Shift± |
表格删除当前列 |
支持的 Markdown 语法
- 标题 (h1-h6)
- 段落
- 粗体、斜体、删除线
- 代码（行内和代码块）
- 链接、图片
- 列表（有序、无序、任务列表）
- 引用
- 分割线
- 表格
- 脚注
开发
前置要求
安装依赖
npm install
开发模式
npm run dev
构建 Web 版本
npm run build
桌面应用
系统要求
| 操作系统 |
最低版本 |
说明 |
| Windows |
10 (1803+) |
Windows 7 不支持 |
| macOS |
10.15 (Catalina) |
- |
| Linux |
- |
支持 x86_64 架构 |
WebView2 运行时（仅 Windows）
Tauri 应用在 Windows 上依赖 Microsoft Edge WebView2 运行时：
| 系统 |
自带 WebView2 |
绿色版 |
安装包 |
| Windows 11 |
 是 |
直接用 |
直接用 |
| Windows 10 (21H2+) |
大部分有 |
可用 |
直接用 |
| Windows 10 (旧版) |
 可能没有 |
 需安装 |
自动安装 |
如果使用绿色版遇到缺少运行时的问题，请下载安装： Microsoft Edge WebView2 | Microsoft Edge Developer
选择 “Evergreen Bootstrapper” 下载安装。
提供Windows、Linux、MacOS安装包，以及Windows绿色版。
6 个赞
我个人现在直接IDE里写了，好像是有插件可以沉浸式编辑的，现在TRAE就可以沉浸式编辑了，不过Mermaid图表我是没找到好用的，沉浸式的只有web端，我看到你的语法表没有写能不能渲染这个，我觉得可以考虑增加渲染。
提个UI建议，只是建议，不过你能舍弃Typora的旧版本话，那么应该也是愿意/考虑进一步优化的：
标题栏和菜单栏（最上面那两栏），可以合并成特殊的菜单栏，栏数最好控制到3以内，1的话就是完美的[便捷性/沉浸式]平衡点，你可以看论坛的顶部就是一栏的
可以藏一下按钮，比如标签右边是【+新建文档】和【V 向下显示菜单】
还有保存如果做自动保存的话，状态栏可以多一个【√保存】显示，这样上面少一个保存按钮，我刚刚看到了，已经有了，那么自动保存要保持撤销逻辑要正常，不然不小心删掉大段内容又无法回退就麻烦了
标签的样式可以换圆角，会柔和舒缓一些
1 个赞
组件是支持的，只是我用的很少，所以没有调这块的内容
以下是组件对这部分的描述
支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、plantumlUML图
感谢感谢，很好的建议！
自动保存在状态栏现在有提示，只不过现在自动保存时间的阈值现在似乎没有生效，抬手就存了 
ctrl+z可以撤销，工具栏上也有撤销和重做的按钮（组件），但是关闭文件再打开就会丢掉撤销/重做的历史记录
Typora 还有两个比较特色的功能，也是我比较常用的功能
- 导出为 word / pdf 等文档格式
- 粘贴图片自动上传到图床，并使用图床 url
Typora 导出为文档格式用的是 Pandoc，自动上传图床用的 PicGo，感觉可以参考一下，也整点这些功能 
1 个赞
更新了一版，采纳 @10011122317 大佬的建议，改成了更加现代化一体化的UI界面，把tab页签、主题切换、最小化最大化关闭按钮合成一栏，总共两栏的样式。（因为要支持多tab，所以还是要占一栏的，格式化工具一栏，共两栏）
此外还修复了一些问题：
- 修复左侧文件浏览器动态感知目录结构变化并刷新
- 桌面版增加删除操作（删除到回收站）
- 修复右侧文本编辑区感知文件变化（如外部文件打开同一个md文档并修改，这里可以动态感知并刷新内容）
- 表格自适应宽度，避免出现水平滚动条
- 文本编辑区宽度增大，动态自适应
- 修复自动保存时间阈值不生效的问题
- 修复Ctrl+Shift+Z重做快捷键不生效的问题
3 个赞
预告：
toc目录
启用mark高亮，上标，下标语法支持
mermaid图表支持
@10011122317 大佬提的
流程图
时序图
甘特图
ER图
饼图
字数统计
导出
@10011114126 大佬提的导出，不过暂时只启用了内置的导出功能，可导出pdf，html，暂时没有做word格式导出（需要依赖第三方库集成）
3 个赞
左右栏现在就是是可以隐藏的 
打字机模式是光标始终位于中央吗？之前在调光标位置的时候，无意中搞出来了这个效果，但是不喜欢，又改成可以自然向下了，只是做了底部留有一些缓冲位置，不让光标到最底部的逻辑
1 个赞
哦哦哦，是我没看到左右栏隐藏啦。
打字机其实就是编辑的当前行保持在屏幕中央，就像传统打字机那样。
我这样说是因为我已为Typora买单，纯纯看热闹拱火，万一呢。万一给佬拱成了呢。
typora目前也没有图谱，之前看过一个项目zditor，似乎挺有意思，但还没有尝试。
欧布，我电脑里的markdown太多了。
typora 有图谱的不是？mermaid 不算吗
你拿去试试：
gantt
title 数据治理平台实施计划
dateFormat YYYY-MM-DD
section 基础设施
微服务脚手架搭建 :2026-05-01, 10d
容器化与K8s部署 :2026-05-11, 10d
Doris集群部署 :2026-05-11, 7d
Redis Cluster部署 :2026-05-11, 7d
section 核心功能
网关层搭建 :2026-05-18, 10d
多级缓存实现 :2026-05-21, 14d
消息队列与削峰 :2026-05-28, 14d
文件存储与CDN :2026-06-01, 10d
section 业务功能
产品管理服务 :2026-06-04, 14d
资源查询服务 :2026-06-04, 14d
排队与限流机制 :2026-06-11, 10d
标签检索服务 :2026-06-18, 10d
section 监控运维
链路追踪与监控 :2026-06-25, 10d
日志与告警 :2026-07-02, 7d
缓存管理模块 :2026-07-06, 10d
section 测试优化
性能压测 :2026-07-13, 14d
稳定性测试 :2026-07-27, 14d
性能调优 :2026-08-10, 14d
section 集成与验收
上游系统联调 :2026-08-17, 7d
全链路压测 :2026-08-24, 5d
上线准备与部署 :2026-08-29, 3d
还有这个：
sequenceDiagram
participant Client as 客户端
participant CDN as CDN
participant GW as API网关
participant Service as 业务服务
participant L1 as L1缓存
participant L2 as L2缓存
participant Doris as Doris集群
participant MQ as 消息队列
Client->>CDN: 1. 请求静态资源
CDN-->>Client: 命中则直接返回
CDN->>GW: 未命中则回源
GW->>GW: 限流/鉴权/路由
GW->>Service: 转发请求
Service->>L1: 查询本地缓存
L1-->>Service: 命中返回
Service->>L2: 未命中查分布式缓存
L2-->>Service: 命中返回并回填L1
Service->>Doris: 未命中查询Doris
Doris-->>Service: 返回数据
Service->>L2: 写入L2缓存
Service->>L1: 写入L1缓存
Service-->>GW: 返回响应
GW-->>Client: 返回客户端
Note over Service,MQ: 异步写入场景
Service->>MQ: 发送异步任务
MQ-->>Service: ACK确认
1 个赞
他说的应该是类似Obsidian双向链接，图谱视图那种吧~
