这是一个简单而功能强大的Mermaid在线编辑和渲染工具，用于创建和可视化流程图、序列图、甘特图等图表。该工具使用纯HTML、CSS和JavaScript实现，无需后端服务，可以轻松部署在静态网站托管平台上。
- 实时编辑与渲染: 修改代码后自动渲染，也可以点击"立即渲染"按钮手动触发
- 左右分栏设计: 左侧编辑区(30%)，右侧渲染区(70%)
- 交互式图表操作:
- 鼠标拖动移动图表
- Ctrl+滚轮缩放图表
- 放大/缩小按钮
- 重置画布按钮
- 全屏展示功能
- 响应式设计: 适配不同屏幕尺寸
- 无依赖部署: 只需一个HTML文件，引用CDN上的Mermaid库
访问Mermaid在线渲染工具体验该工具。
- 克隆仓库:
git clone https://github.com/yourusername/mermaid-online-editor.git- 在浏览器中打开
index.html文件即可使用。
-
确保代码已推送到GitHub: 确认你的项目代码(至少包含index.html)已经上传到GitHub仓库中。
-
登录Cloudflare Dashboard: 访问Cloudflare Dashboard并登录你的账户。
-
创建新的Pages项目:
- 在侧边栏找到并点击"Pages"
- 点击"创建项目"按钮
- 选择"Connect to Git"
-
连接到GitHub仓库:
- 授权Cloudflare访问你的GitHub账户
- 从列表中选择包含Mermaid编辑器代码的仓库
-
配置部署设置:
- 构建设置保持默认即可，因为我们只有静态HTML文件
- 构建命令可以留空
- 构建输出目录使用默认值(
/)或指定为仓库根目录
-
部署项目:
- 点击"保存并部署"按钮
- Cloudflare会自动构建并部署你的站点
- 部署完成后，你会获得一个
*.pages.dev格式的URL
-
登录Cloudflare Dashboard: 访问Cloudflare Dashboard并登录。
-
创建新的Pages项目:
- 在侧边栏找到并点击"Pages"
- 点击"创建项目"按钮
- 选择"Direct Upload"(直接上传)
-
上传文件:
- 为项目命名
- 将index.html文件拖放到上传区域
- 点击"部署站点"按钮
-
访问你的站点: 部署完成后，Cloudflare会提供一个
*.pages.dev格式的URL，你可以通过该URL访问你的Mermaid在线渲染工具。
如果你想使用自定义域名而不是默认的*.pages.dev域名:
- 在Cloudflare Pages项目设置中找到"自定义域"选项
- 点击"设置自定义域"
- 输入你的域名并按照提示完成DNS配置
- 通过GitHub部署: 只需将更改推送到GitHub仓库，Cloudflare会自动检测并重新部署
- 直接上传部署: 在Cloudflare Pages控制台中重新上传文件进行更新
- HTML5
- CSS3
- JavaScript
- Mermaid.js - 用于图表渲染
欢迎通过提交Pull Request或创建Issue来贡献代码或提出建议。
希望这个工具能够帮助你更高效地创建和分享各种图表！如有问题或建议，请通过GitHub Issues联系我。