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

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;color: rgb(63, 63, 63);">ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;margin: 0.1em auto 0.5em;border-radius: 4px;" title="null"/>

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;display: table;padding: 0px 0.2em;color: rgb(255, 255, 255);background: rgb(15, 76, 129);">一、简介

• ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.2em 8px;color: rgb(63, 63, 63);">
  • 一款基于 AI 技术的 Web 应用程序，可将文本内容智能转换为 Mermaid 格式的代码，并将其渲染成可视化图表
• ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.2em 8px;color: rgb(63, 63, 63);">
  • 可以智能制作流程图、序列图、甘特图、状态图等等，并且支持在线调整、图片导出
• ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.2em 8px;color: rgb(63, 63, 63);">
  • 可以Docker快速部署，支持自定义选择大语言模型
• ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;text-indent: -1em;display: block;margin: 0.2em 8px;color: rgb(63, 63, 63);">
  • 开源地址参考：https://github.com/liujuntao123/smart-mermaid，项目运行逻辑参考下图：
  

  ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;color: rgb(63, 63, 63);">ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 16px;margin: 0.1em auto 0.5em;border-radius: 4px;" title="null"/>

ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;display: table;padding: 0px 0.2em;color: rgb(255, 255, 255);background: rgb(15, 76, 129);">二、安装

1. 源码安装

• • 环境要求

1. Node.js 18.x 或更高版本
2. npm 或 yarn 包管理工具

• • 拉取源码

gitclonehttps://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-composeup-d

• • 运行成功，同样访问下面链接使用：http://localhost:3000

三、使用示例

1. 可以直接输入简单的问题，系统会根据大语言模型的回复自动生成相关可视图表

• • 输入：“tcp连接的三次握手和四次挥手原理”，生成效果图如下
  

  

• • 输入：“通俗易懂地介绍一下第一性原理”，生成效果图如下
  

  

2. 可以根据具体描述生图要求，把自己的知识和内容整理成图表

• • 输入具体逻辑和要求，如下

认证系统
1. 访问页面，未登录就跳转到登录页面
2. 登录页面可以选择账号密码登录、手机号码验证码登录
3. 账号认证成功，则进入系统，否则提示失败

• • 生成效果图
  

  

四、总结

• • 利用该项目，可以轻松利用AI帮助我们画图，更好地学习、理解和梳理知识
• • 可以在需求分析、知识分享、文章编写等场景应用起来，提高文档图表编辑效率和质量