Mermaid 演练场

一个功能强大的 Mermaid 在线演练场项目，支持对输入的 Mermaid 代码进行实时渲染，并支持对渲染结果进行编辑和导出。此项目的初衷是由于 Mermaid 官方的在线演练场保存代码只有免费的三个额度，对于平常使用来说显然是不够用的，所以自己写一个，借助 indexedDB 或者 Supabase 进行数据存储，可以达到无限存储代码的目的。

功能特性

🎨 核心功能

• 实时渲染: 输入 Mermaid 代码后立即显示渲染结果
• 代码高亮: 基于 Monaco Editor 的智能代码编辑
• 多种主题: 支持默认、黑暗、森林、中性、基础等多种主题
• 导出功能: 支持导出为 PNG、SVG 格式，以及复制到剪贴板

📝 模板模块

列举了常用的模板，可以点击模板选择器进行选择，也可以点击空白模板进行创建。省的自己从头开始写。

• 空白模板: 从空白开始创建（排在首位，样式为 + 号）
• 流程图模板: 创建流程图
• 时序图模板: 展示系统交互时序
• 类图模板: 设计类和对象关系
• 状态图模板: 描述状态转换流程
• 甘特图模板: 项目进度和时间管理

💾 数据管理

• 存储: 使用 IndexedDB 或者 Supabase 进行数据存储, 默认使用 IndexedDB，如果需要使用 Supabase，请参考 Supabase 初始化。
• 历史记录: 保存和切换历史代码
• 项目命名: 支持项目名称编辑和管理

使用方法

创建新项目

1. 点击导航栏中的"新建"按钮
2. 在弹出的模板选择框中选择合适的模板
3. 空白模板会创建空白的编辑器
4. 其他模板会预填充相应的 Mermaid 代码

保存和导出

1. 点击"保存"按钮将当前代码保存到本地
2. 点击"导出"按钮选择导出格式（PNG/SVG/复制到剪贴板）
3. 使用"切换"按钮查看和管理历史保存的代码

技术栈

• 前端框架: 原生 JavaScript (ES6+)
• 代码编辑器: Monaco Editor
• 图表渲染: Mermaid.js
• 构建工具: Vite
• 包管理: pnpm
• 代码规范: ESLint + Prettier

开发

安装依赖

pnpm install

启动开发服务器

pnpm run dev

构建生产版本

pnpm run build

代码检查

pnpm run lint

已知问题

1. 丢失箭头 livebook-dev/livebook#1440 mermaid-js/mermaid#5741

TODO

• 支持分享
• 分页加载历史记录

贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

许可证

MIT License