AI驱动的文本转Mermaid图表工具Smart Mermaid

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 3.3k 阅读时长 ≈ 3 分钟
Smart Mermaid 是一款基于 AI 技术的 Web 应用程序，可将文本内容智能转换为 Mermaid 格式的代码，并将其渲染成可视化图表。

简介

什么是 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 没有采用多阶段构建，所以编译出来的镜像有点大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 使用 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"]

构建镜像和容器运行的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 下载代码
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。

端口

本地端口不冲突就行，不确定的话可以用命令查一下

1
2
# 查看端口占用
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 更快捷

1
2
3
4
5
6
7
8
9
10
11
12
# 运行容器
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 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
version: '3'

services:
  smart-mermaid:
    image: wbsu2003/smart-mermaid
    container_name: smart-mermaid
    restart: unless-stopped
    ports:
      - "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

然后执行下面的命令

1
2
3
4
5
6
7
8
9
10
# 新建文件夹 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/