一、简介
-
• 一款基于 AI 技术的 Web 应用程序，可将文本内容智能转换为 Mermaid 格式的代码，并将其渲染成可视化图表 -
• 可以智能制作流程图、序列图、甘特图、状态图等等，并且支持在线调整、图片导出 -
• 可以Docker快速部署，支持自定义选择大语言模型 -
• 开源地址参考：https://github.com/liujuntao123/smart-mermaid，项目运行逻辑参考下图：
二、安装
1. 源码安装
-
• 环境要求
1. Node.js 18.x 或更高版本
2. npm 或 yarn 包管理工具-
• 拉取源码
git clone https://github.com/liujuntao123/smart-mermaid
-
• 进入smart-mermaid目录，新建配置文件.env.local，配置内容如下
# AI 服务配置（必需）
AI_API_URL=https://api.openai.com/v1
AI_API_KEY=在此处填入您的API密钥
AI_MODEL_NAME=gpt-4o
# 应用配置
NEXT_PUBLIC_MAX_CHARS=20000
NEXT_PUBLIC_DAILY_USAGE_LIMIT=5
# 访问密码（可选）
ACCESS_PASSWORD=设置您的访问密码-
• 启动运行
# 1. 开发环境
npm run dev
# 或者
yarn dev
# 2. 生产环境
# 构建生产版本
npm run build
# 启动生产服务器
npm run start-
• 运行成功，可以访问：http://localhost:3000
2. Docker快速启动
-
• 提前安装好Docker、docker-compose命令环境 -
• 不需要再拉取源码，直接新建一个docker-compose.yml配置文件，内容如下
version: "3"
services:
smart-mermaid:
#第三方根据官方源码打包而成的镜像
image: ghcr.io/luler/smart-mermaid-docker:latest
ports:
- "3000:3000"
environment:
- AI_API_URL=https://api.openai.com/v1
- AI_API_KEY=your_api_key_here
#- AI_MODEL_NAME=DeepSeek/deepseek-v3 #可选，服务端默认模型名，如果设置未授权用户默认选中此模型
- AI_MODELS=deepseek/deepseek-v3,gpt-4o # 前端授权用户可选模型，逗号分隔，未授权默认选中第一个模型
- ACCESS_PASSWORD=your_access_password # 可选
restart: unless-stopped-
• 一键启动命令如下
docker-compose up -d
-
• 运行成功，同样访问下面链接使用：http://localhost:3000
三、使用示例
1. 可以直接输入简单的问题，系统会根据大语言模型的回复自动生成相关可视图表
-
• 输入：“tcp连接的三次握手和四次挥手原理”，生成效果图如下
-
• 输入：“通俗易懂地介绍一下第一性原理”，生成效果图如下
2. 可以根据具体描述生图要求，把自己的知识和内容整理成图表
-
• 输入具体逻辑和要求，如下
认证系统
1. 访问页面，未登录就跳转到登录页面
2. 登录页面可以选择账号密码登录、手机号码验证码登录
3. 账号认证成功，则进入系统，否则提示失败-
• 生成效果图
四、总结
-
• 利用该项目，可以轻松利用AI帮助我们画图，更好地学习、理解和梳理知识 -
• 可以在需求分析、知识分享、文章编写等场景应用起来，提高文档图表编辑效率和质量
