面包屑图标 当前位置: 首页
AI资讯
热点详情

告别手动绘图基于AI的Smart Mermaid自动可视化图表搭建指南

AI热点日报
AI热点日报时间:2026-07-13
热点解读

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

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

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

一、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 绘制图表,帮助更好地学习、理解与梳理知识。
  • 可在需求分析、知识分享、文章编写等场景中灵活应用,显著提升文档图表的编辑效率与质量。
热点追踪提示词
你是一名 AI 行业编辑,请围绕下面这条热点输出一份资讯解读:
热点:告别手动绘图基于AI的Smart Mermaid自动可视化图表搭建指南要求:
1. 先用一句话解释这条热点在讲什么
2. 再总结它为什么重要
3. 说明会影响哪些 AI 产品或内容方向
4. 最后给出 3 个适合资讯站使用的标题
来源:https://www.53ai.com/news/LargeLanguageModel/2025061349536.html
ai 人工智能

游乐网为非赢利性网站,所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系youleyoucom@outlook.com。

相关热点
AI热点2026-07-14 14:49
Monica AI查编程代码意图混杂如何优化搜索词

MonicaAI查代码问题意图混杂时,需剥离情绪词、弱判断词和身份说明,直接粘贴完整报错信息或用“输入→预期输出→实际输出”三段式描述,包含运行环境,限定代码范围并使用明确动词,可提升回答精准度。

AI热点2026-07-14 14:49
AI搜索提示词避坑:提问发现新手常见错误

在360AI搜索中先将来源设为微信公众号,粘贴含有“我”字开头、单音节动词且描述失败现象的指令,从评论区中提取出真实卡点,排除抽象建议,验证该指令能否在三秒内复现,通过失败动作反向定位出断点。

AI热点2026-07-14 14:49
记者实地探访AI数据中心,追踪科技真相

科技记者深入实地调查AI数据中心,发现苏格兰一处82亿英镑综合体在可再生能源承诺上存在失实。数据中心引发热岛效应和噪音污染,部分区域气温上升2-9摄氏度,噪音超飞机起飞。社区抵制加剧,反映科技报道从虚拟转向实体基础设施。

AI热点2026-07-14 14:49
AI基础设施建设费用应由政府还是企业承担

白宫推动“电力用户保护承诺”,确保普通家庭和企业不为AI基础设施的电网升级买单。新泽西州立法要求大型数据中心自担电力设施费用。行业趋势正从让用户分担转向AI开发商为电网扩张付费。

延伸阅读