在线编辑器工具：Photopea和Mermaid图表编辑器，专业工具浏览器即用
做开发和设计工作的时候，经常需要编辑图片和制作图表。以前都是安装专门的软件，比如Photoshop、Visio等等，但是这些软件体积大、启动慢，而且不是免费的。后来发现了一些在线编辑器，功能很强大，而且不需要安装，浏览器就能用。
今天就来分享一下我在工作中常用的两个在线编辑器，帮助完成图片编辑和图表制作任务。
Photopea：浏览器里的Photoshop
Photopea是一个在线的图片编辑器，功能非常强大，支持PSD、AI、Sketch等多种格式，不需要安装，浏览器就能用。虽然是在线工具，但是功能几乎和Photoshop一样，图层、蒙版、调整图层等等都有。
支持多种格式：支持PSD、AI、Sketch、PNG、JPG等40多种专业格式。不需要转换格式，直接打开就能编辑。这对于处理设计师给的源文件特别有用。
功能全面：包含图层、蒙版、调整图层、滤镜、特效等功能，几乎和Photoshop一样。虽然是在线工具，但是功能并不缩水，能完成大部分图片编辑任务。
内置AI功能：支持一键抠图、智能填充等AI功能。虽然效果可能不如专业软件，但是对于日常使用来说已经够用了。
支持RAW格式：可以编辑DNG、CR2、NEF等RAW格式照片。这对于摄影师来说特别有用，不需要专门的软件就能编辑RAW照片。
完全本地运行：所有操作都在浏览器本地完成，文件不会上传到服务器。这样既保护隐私，速度也快，不受网络影响。
我在做一个网站项目的时候，设计师给的PSD文件，需要提取一些素材。以前都是打开Photoshop，但是启动慢，而且不是所有电脑都安装了。用Photopea直接打开PSD文件，提取需要的素材，很快就完成了。比用Photoshop方便多了。
还有一次在做图片处理的时候，需要调整一些参数。用Photopea打开图片，调整参数，保存后就能用。不需要安装软件，随时随地都能用。
Mermaid图表编辑器：文本语法的图表工具
Mermaid是一个用文本语法创建图表的工具，支持流程图、时序图、类图、状态图、甘特图等多种图表类型。虽然语法简单，但是能生成非常专业的图表。
多种图表类型：支持流程图、时序图、类图、状态图、实体关系图、甘特图等多种图表类型。不同的场景可能需要不同的图表，工具都能满足。
文本语法简单：用简单的文本语法就能创建图表，不需要拖拽操作。学习成本低，上手快。语法清晰，容易理解和修改。
实时预览：输入代码后实时预览效果，修改代码后图表会自动更新。可以边写边看，不需要切换界面。
多种模板：提供了多种图表模板，可以参考模板快速开始。不需要从零开始，可以基于模板修改。
支持暗黑主题：支持暗黑主题，长时间使用不会眼睛疲劳。还可以切换不同的主题，适应不同的使用场景。
代码自动补全：支持代码自动补全，输入关键词就能提示语法。这对于学习Mermaid语法特别有用，不需要记忆所有语法。
导出功能：可以导出SVG和PNG格式，SVG适合网页使用，PNG适合文档使用。可以根据使用场景选择合适的格式。
我在做技术文档的时候，需要画一些流程图和时序图。以前都是用Visio或者手画，但是Visio需要安装，手画又不够专业。用Mermaid编辑器，写简单的文本语法就能生成专业的图表，效果很好。
还有一次在做系统设计的时候，需要画一些类图和状态图。用Mermaid编辑器，用简单的语法就能创建，而且修改起来也很方便。比用专业软件简单多了。
实际应用场景
这两个编辑器在实际工作中应用很广泛：
图片编辑流程：
- 打开图片文件，可能需要处理PSD、AI等格式
- 用Photopea打开文件，进行编辑
- 调整参数，应用滤镜和特效
- 导出编辑后的图片，用于网页或文档
图表制作流程：
- 确定需要制作的图表类型
- 用Mermaid编辑器编写图表代码
- 实时预览效果，调整代码
- 导出图表，插入到文档或网页中
设计和开发工作流程：
- 设计师给的源文件用Photopea处理
- 需要画流程图或时序图用Mermaid编辑器
- 组合使用可以完成大部分设计和开发任务
使用技巧
虽然工具使用很简单，但是掌握一些技巧能让效果更好：
Photopea使用技巧：
- 支持多种格式，不需要转换就能编辑
- 功能几乎和Photoshop一样，学习成本低
- 所有操作都在本地完成，保护隐私
- 支持快捷键，和Photoshop一样
Mermaid编辑器技巧：
- 语法简单，容易学习
- 实时预览功能很有用，可以边写边看
- 可以参考模板快速开始
- 导出功能很实用，可以用于各种场景
组合使用：
- 图片编辑用Photopea，图表制作用Mermaid
- 组合使用可以完成更复杂的任务
- 两个工具都不需要安装，浏览器就能用
注意事项
虽然工具很实用，但是也有一些需要注意的地方：
Photopea注意：
- 虽然功能强大，但是可能不如Photoshop专业
- 处理大文件可能比较慢，注意文件大小
- 所有操作都在本地完成，不依赖网络
Mermaid编辑器注意：
- 语法虽然简单，但是需要学习
- 复杂图表可能需要更多的代码
- 导出格式根据需要选择
使用场景：
- 根据实际需求选择合适的工具
- Photopea用于图片编辑，Mermaid用于图表制作
- 组合使用可以完成更多任务
总结
在线编辑器虽然是在线工具，但是功能并不缩水。Photopea功能强大，几乎和Photoshop一样；Mermaid语法简单，能生成专业图表。最重要的是不需要安装，浏览器就能用，随时随地都能访问。
如果你也需要编辑图片或制作图表，不妨试试这些工具。工具地址在文章末尾，需要的时候随时能用。
🔗 相关工具
- 免费在线PS - Photopea - 支持PSD、AI、Sketch等40+种格式，功能媲美Photoshop，完全本地运行保护隐私
- 在线Mermaid图表编辑器 - 支持流程图、时序图、类图等多种图表类型，文本语法简单，实时预览，导出SVG/PNG