Mermaid Diagram Creator

基本能力

产品定位

Mermaid Diagram Creator 是一个实时图表创建工具，主要用于开发者和团队快速生成和可视化各种类型的图表。

核心功能

• 实时图表渲染
• 支持多种图表类型：流程图、序列图、类图、甘特图、饼图
• 强大的错误处理与语法建议
• 暗黑/亮色主题支持
• 图表缩放控制
• 导出为 SVG 格式

适用场景

• 开发者在编写文档时需要快速生成图表
• 团队协作时需要可视化复杂流程
• 教学或演示时需要展示图表

工具列表

• Mermaid.js：用于生成和渲染图表
• React：前端框架
• WebSocket：实现前后端实时通信

常见问题解答

• 如何导出图表？：使用导出按钮将图表保存为 SVG 格式。
• 如何切换主题？：使用主题按钮切换暗黑或亮色主题。
• 如何调整图表大小？：使用缩放控制按钮调整图表视图。

使用教程

使用依赖

• Node.js v16 或更高版本
• Bun 或 npm

安装教程

1. 克隆仓库： bash git clone https://github.com/yourusername/mermaid.git cd mermaid
2. 安装依赖： ```bash # 前端依赖 cd mermaid-app bun install

# 后端依赖 cd ../mcp-server bun install

# 返回根目录 cd .. 3. 启动应用：bash bun start.js `` 4. 打开浏览器访问http://localhost:5173`

调试方式

1. 应用自动连接到 WebSocket 服务器
2. 服务器发送的图表会实时渲染
3. 使用缩放控制调整视图
4. 使用主题按钮切换暗黑/亮色主题
5. 使用导出按钮导出图表

许可证

该项目遵循 MIT 开源许可条款。