还在为手动绘制图表而烦恼吗？Smart Mermaid 让你只需输入文字，AI 即可自动生成专业级的 Mermaid 图表，彻底告别繁琐操作。它主要解决了三大痛点：基于 AI 的文本智能转 Mermaid 图表、支持源码与 Docker 两种部署方式，以及灵活的自定义配置与模型选择。接下来，我们将逐一进行详细解析。

一、Smart Mermaid 项目简介

• 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. 账号认证成功，则进入系统，否则提示失败

• 生成效果图：
  

四、总结与展望

• 借助 Smart Mermaid，你能轻松利用 AI 绘制图表，帮助更好地学习、理解与梳理知识。
• 可在需求分析、知识分享、文章编写等场景中灵活应用，显著提升文档图表的编辑效率与质量。