基于AI的Smart Mermaid自动可视化图表工具搭建与使用指南

声明：该文章由作者（是桃桃呀）发表，转载此文章须经作者同意并请附上出处(0XUCN)及本页链接。。

安装

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帮助我们画图，更好地学习、理解和梳理知识
• • 可以在需求分析、知识分享、文章编写等场景应用起来，提高文档图表编辑效率和质量

[超站]友情链接：

四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/