项目背景
因为是编程小白，所以平时高频依赖豆包帮我写代码、改代码、讲编程，有时候也会让它给我绘制流程图，但是在手机上使用豆包时，它回复的流程图在手机上绘制不出来（不知道是不是我的设备原因），找了在线的Mermaid和Mermaid中文网，这两个网站在手机上使用简直就是灾难，那局促的布局挤的我生理难受，然后又找别的，布局也没好到哪里去，还要看广告、看弹窗。就让豆包帮我写了一个Mermaid 可视化编辑器，在使用过程中又有了看SVG文件的需求，顺手让豆包又写了一个SVG 轻量级在线编辑器。同时部署到了Cloudflare Pages：这是我的部署地址，朋友们可以体验一下https://onlinetools-dkg.pages.dev/
疯狂叠甲
只是把个人用到的两个小工具上传上来，能帮助到有同样需求的朋友最好，如果平时自己有其他的顺手编辑器则还用平时的，没有谁好谁坏，合适最好，不用因为这个而纠结，但是同样的，确实好用的东西也欢迎大家积极反馈~，我帮你置顶。我让豆包写代码都是以自己需求为导向的。一般满足自己需求就止步了。
体验地址就是纯粹的体验地址，没有个人信息，也不引流。。。代码都是豆包写的，我啥也不会，引流也没用。版主别给我ban了。
接下来是功能介绍
Mermaid 可视化编辑器
一款轻量、易用、响应式的 Mermaid 图表在线编辑工具，支持实时渲染、多格式导出、拖拽缩放等核心功能，无需本地部署，开箱即用。
核心特性
1. 实时高效的编辑体验
- 代码编辑区：配备行号实时同步、等宽字体渲染，支持大段 Mermaid 代码的清晰编辑，滚动时行号与内容精准联动；
- 即时渲染：点击「重新渲染」按钮即可将 Mermaid 代码转换为可视化图表，渲染过程带加载提示，超时自动终止并反馈错误；
- 多 CDN 兜底：优先加载 Cloudflare CDN，失败时自动切换至 jsDelivr，保障 Mermaid 引擎加载成功率。
2. 灵活的图表交互
- 缩放与拖拽：桌面端支持鼠标滚轮缩放（0.5~3倍）、左键拖拽平移；移动端适配触屏双指缩放、单指拖动，满足不同设备的操作习惯；
- 一键重置：快速恢复图表默认大小与位置，无需手动调整。
3. 丰富的文件操作
- 文件加载：支持导入
.txt/.mmd/.mermaid 格式的 Mermaid 代码文件，直接填充至编辑区；
- 多格式导出：
- 保存为 TXT：完整保留原始 Mermaid 代码，便于二次编辑；
- 保存为 SVG：矢量格式，无损缩放，适配印刷/高清展示场景；
- 保存为 PNG：位图格式，兼容各类文档/网页嵌入场景。
4. 响应式适配
- 桌面端：双栏布局（编辑区+预览区），充分利用大屏空间；
- 移动端：自动切换为上下布局，按钮与交互区域适配触屏操作，保证小屏体验。
SVG 轻量级在线编辑器
一款基于 SVG.js 构建、部署于 Cloudflare Pages 的轻量级在线 SVG 编辑器，无需安装本地软件，纯浏览器端运行，支持基础图形绘制、样式自定义、代码编辑与多格式导出，适配桌面与移动端，满足个人日常 SVG 创作与编辑需求。
核心特性
1. 极简易用的操作体验
- 基础图形快速绘制：一键添加矩形、圆形、直线、文本等常用 SVG 基础图形，无需手动编写代码；
- 可视化样式调整：通过颜色选择器、数值输入框直观设置图形填充色、描边色、描边宽度，实时预览效果；
- 灵活的视图控制：支持鼠标滚轮/触屏双指缩放（0.1~5倍）、画布拖拽平移，适配不同尺寸 SVG 文件的查看与编辑。
2. 专业的代码与文件管理
- 实时代码编辑：内置代码编辑器，可直接编写/修改 SVG 源码，点击「应用代码」即时生效；
- 多格式文件操作：支持本地 SVG 文件导入、编辑后导出为 SVG/PNG 格式，也可一键保存到本地文件系统；
- 自动本地缓存：编辑内容自动保存至浏览器本地存储，刷新/重新打开页面可恢复上次编辑状态，避免内容丢失。
3. 全平台适配
- 响应式布局：桌面端展示完整功能面板，移动端自动折叠为可展开的功能按钮，适配手机、平板、电脑等不同设备；
- 无依赖部署：基于 CDN 加载核心依赖，无需上传本地 JS 文件，直接部署至 Cloudflare Pages 即可使用，访问速度快且稳定。
使用方法
方式1：免部署
直接用我的：https://onlinetools-dkg.pages.dev/
优点：一键直达，方便使用，后期我再添加新工具可以直接使用。
缺点：域名比较长~不好记。
方式2：自行部署(以Github+Cloudflare Pages为例)
1.下载代码：https://diaoyu.lanzouu.com/iRRjj3ge7wjc
2.准备代码：将上方下载的代码压缩包解压后得到：
【文件树】D:\Code\onlineTools
├── mermaid文件夹/
│ ├── _headers Cloudflare Pages的缓存策略（可要可不要）
│ ├── favicon.svg 图标（可要可不要）
│ └── index.html Mermaid编辑器的网页
├── svg文件夹/
│ ├── _headers Cloudflare Pages的缓存策略（可要可不要）
│ ├── favicon.svg 图标（可要可不要）
│ └── index.html SVG编辑器的网页
├── favicon.svg 图标（可要可不要）
└── index.html 管理所有工具的网页（工具入口）
3.创建仓库：将代码推送到 GitHub/GitLab/Bitbucket 仓库
4.部署到Cloudflare Pages：
# 1. 登录 Cloudflare 控制台，进入 Pages
# 2. 点击 "Create a project"
# 3. 连接你的代码仓库
# 4. 配置构建设置：
# - 构建命令：留空（纯静态文件）
# - 输出目录：留空（根目录）
# 5. 点击 "Save and Deploy"
5.验证部署：部署完成后，访问分配的 *.pages.dev 域名即可使用
工具截图
把三个界面的截图合并到一个图片里了，然后发现这个在线拼接图片的工具很不错，让豆包帮我也搞一个
| 
[复制链接]
发表于 2026-1-17 23:03
|
发表于 2026-1-18 08:17
不错！感谢分享！
