简介
什么是 Smart Mermaid ？
Smart Mermaid是一款基于AI技术的Web应用程序，能够将文本内容智能转换为Mermaid格式的代码，并将其渲染成可视化图表。用户只需输入文本描述，AI即可生成相应的图表，支持多种图表类型，无论是流程图、序列图、甘特图还是状态图。
主要特点
- 智能转换：利用
AI模型分析文本，并自动生成符合Mermaid规范的图表代码。 - 多种图表类型：支持流程图、序列图、甘特图和状态图等多种图表格式。
- 实时渲染：生成的图表可实时展示，用户可以随时查看效果。
- 灵活输入：支持手动输入文本或上传文件（
.txt,.md,.docx），最大支持20,000字符。 - 双重渲染模式：提供
Excalidraw渲染器和Mermaid渲染器，用户可以根据需求随时切换。 - 专业编辑器：集成
CodeMirror编辑器，支持Mermaid语法高亮和实时预览。 - 高级功能：包括自定义
AI配置、访问密码管理、使用量统计等。
应用场景
- 文档撰写：帮助用户快速将想法转化为可视化图表，提升文档的清晰度和专业性。
- 项目管理：适用于项目管理中的流程图和甘特图生成，帮助团队更好地理解进度。
- 教育培训：用于教学中展示复杂概念，帮助学生更好地理解内容。
- 快速原型设计：适合需要快速生成图表原型的开发者和设计师。
Smart Mermaid 通过简化图表绘制过程，提高了工作效率，适合各类用户使用。
如果不想自己安装，可以使用官方提供的演示站点（https://smart-mermaid.aizhi.site），其中设置了每位用户每日 5 次的免费生成额度
构建镜像
如果你不想自己构建，可以跳过，直接阅读下一章节
Dockerfile 没有采用多阶段构建，所以编译出来的镜像有点大
# 使用 Node.js 作为基础镜像
FROM node:18# 设置工作目录
WORKDIR /usr/src/app# 复制应用代码
COPY . .# 设置默认环境变量
ENV NEXT_PUBLIC_MAX_CHARS=20000
ENV NEXT_PUBLIC_DAILY_USAGE_LIMIT=5
ENV AI_API_URL=https://api.openai.com/v1
ENV AI_API_KEY=your_api_key
ENV AI_MODEL_NAME=gpt-3.5-turbo
ENV ACCESS_PASSWORD=your_access_password# 构建应用
RUN npm install
RUN npm run build# 暴露端口
EXPOSE 3000# 启动应用
CMD ["npm", "start"]
构建镜像和容器运行的基本命令如下👇
# 下载代码
git clone https://github.com/liujuntao123/smart-mermaid.git# 通过代理
git clone https://gh-proxy.com/github.com/liujuntao123/smart-mermaid.git# 进入目录
cd smart-mermaid# 构建镜像
docker build -t wbsu2003/smart-mermaid:v1 .# 运行容器
docker run -d \--restart unless-stopped \--name smart-mermaid \-p 3200:3000 \-e ACCESS_PASSWORD=123456 \wbsu2003/smart-mermaid:v1
安装
在群晖上以 Docker 方式安装。
在注册表中搜索 wbsu2003 ，可能要翻到第二页才能找到 wbsu2003/smart-mermaid，版本选择 latest。
端口
本地端口不冲突就行，不确定的话可以用命令查一下
# 查看端口占用
netstat -tunlp | grep 端口号
| 本地端口 | 容器端口 |
|---|---|
3200 | 3000 |
环境
| 可变 | 值 |
|---|---|
AI_API_URL | AI 服务 API 的基础地址（不包含 /chat/completions） |
AI_API_KEY | 您的 AI 服务 API 密钥 |
AI_MODEL_NAME | 指定使用的 AI 模型名称 |
NEXT_PUBLIC_MAX_CHARS | 允许用户输入的最大字符数（默认 20,000） |
NEXT_PUBLIC_DAILY_USAGE_LIMIT | 每用户每日免费使用次数限制（默认 5） |
ACCESS_PASSWORD | 可选，设置后用户可通过输入此密码获得无限使用权限 |
老苏以 硅基流动为例配置了 AI 设置。目前新用户注册会获得 14 元免费额度，相当于 2000 万 Tokens，虽然不是免费，但也够用一阵子的
硅基流动的注册地址
https://cloud.siliconflow.cn/i/NkUiXVhQ
其中的 DeepSeek 模型虽然 R1 已经更新到了 0528 版，但是老苏试用了一下，觉得 V3 更经济实惠
命令行安装
如果你熟悉命令行，可能用 docker cli 更快捷
# 运行容器
docker run -d \--restart unless-stopped \--name smart-mermaid \-p 3200:3000 \-e AI_API_URL=https://api.siliconflow.cn/v1 \-e AI_API_KEY=your_api_key \-e AI_MODEL_NAME="deepseek-ai/DeepSeek-V3" \-e NEXT_PUBLIC_MAX_CHARS=20000 \-e NEXT_PUBLIC_DAILY_USAGE_LIMIT=5 \-e ACCESS_PASSWORD=123456 \wbsu2003/smart-mermaid
也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件
version: '3'services:smart-mermaid:image: wbsu2003/smart-mermaidcontainer_name: smart-mermaidrestart: unless-stoppedports:- "3200:3000"environment:- AI_API_URL=https://api.siliconflow.cn/v1- AI_API_KEY=your_api_key- AI_MODEL_NAME="deepseek-ai/DeepSeek-V3"- NEXT_PUBLIC_MAX_CHARS=20000- NEXT_PUBLIC_DAILY_USAGE_LIMIT=5- ACCESS_PASSWORD=123456
然后执行下面的命令
# 新建文件夹 smart-mermaid
mkdir -p /volume1/docker/smart-mermaid# 进入 smart-mermaid 目录
cd /volume1/docker/smart-mermaid# 将 docker-compose.yml 放入当前目录# 一键启动
docker-compose up -d
运行
在浏览器中输入 http://群晖IP:3200 就能看到主界面
点右上角的设置齿轮
输入环境变量 ACCESS_PASSWORD 中设定的访问密码
验证通过后，右上角会从 5 次变成无限制，因为我们在环境变量中设置了自己的大模型，但在 AI 配置中看不到
如果设置没问题，刷新页面会看到环境变量中设置的模型
例如我们可以输入 生成一个访问大语言模型的流程图
参考文档
liujuntao123/smart-mermaid: 一款基于 AI 技术的 Web 应用程序，可将文本内容智能转换为 Mermaid 格式的代码，并将其渲染成可视化图表。
地址：https://github.com/liujuntao123/smart-mermaid
智能文本转 Mermaid 图表
地址：https://smart-mermaid.aizhi.site/
