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

一、简介

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

搭建了一个临时试用版本，参考：https://cas.luler.top/?search=683b2c1426aa4