大数跨境
0
0

一款开源的AI绘图神器,一句话产出专业级系统流程图!

一款开源的AI绘图神器,一句话产出专业级系统流程图! 终码一生
2025-09-10
0
点击“终码一生”,关注,置顶公众号
   
每日技术干货,第一时间送达!
在技术文档编写、系统架构设计或项目管理中,你是否曾为绘制复杂的流程图、时序图耗费数小时?甚至因微小调整反复重排版式?
今天介绍的这款开源神器——Smart Mermaid,正在用AI技术彻底颠覆图表制作方式。只需输入自然语言描述,它就能在秒级内生成专业级图表,让绘图效率提升10倍以上。
01
简介
Smart Mermaid 是一款基于AI技术的开源Web应用,通过自然语言描述智能生成Mermaid图表代码并实时渲染可视化结果。简单一句话总结:
用一句话描述你的需求,让AI绘制整个系统
02
主要功能
🎯核心功能
  • 灵活的文本输入:
  • 直接在编辑器中手动输入或粘贴文本。
  • 支持上传文件(.txt, .md, .docx 格式)。
  • 最大支持20,000字符的输入长度。
  • 智能 AI 转换:
  • 集成先进的AI模型分析内容内容。
  • 支持多种AI模型选择(DeepSeek V3、DeepSeek R1等)。
  • 支持自动识别最佳图表类型或由指定用户。
  • 精准生成符合Mermaid规范的图表代码。
  • 实时流式生成,展示AI思考过程。
  • 双重渲染模式:
  • Excalidraw渲染器:点击风格的可编辑图表,支持拖拽元素和样式修改。
  • 美人鱼渲染器:精确的标准图表,支持专业级缩放和视图控制。
  • 一键切换渲染模式,满足不同的使用场景。
  • 专业级代码编辑器:
  • 集成CodeMirror编辑器,支持Mermaid语法高亮。
  • 可调节编辑器高度(小、中、大、特大)。
  • 实时代码验证和预览更新。
🔧 高级功能
  • 智能界面设计:
  • 左侧面板折叠:一键隐藏编辑面板,获得更大的图表预览空间。
  • 响应式布局:完美的机动桌面端和移动端设备。
  • 暗色模式支持:提供舒适的夜间使用体验。
  • AI智能自动改错功能⭐新功能:
  • AI智能分析:利用先进的AI模型深度分析Mermaid代码问题。
  • 专业修复:不仅修复错误,还提供代码优化建议语法。
  • 上下文理解:AI理解图表结构,提供曼谷修复方案。
  • 一键修复:在编辑器和主界面都提供AI修复按钮。
  • 安全回退:AI失败时自动使用基础规则修复。
  • 详细反馈:提供修复说明和改进建议。
  • 一键方向切换功能⭐新功能:
  • 横向纵向切换:一键在横向(LR)和纵向(TD)布局间切换。
  • 智能识别:自动识别当前图表方向并进行相应转换。
  • 快捷操作:在编辑器和主界面都提供方向切换按钮。
  • 布局优化:根据内容特点选择最佳显示方向。
  • 增强的视图控制:
  • 缩放功能:Shift + 滚轮缩放,避免浏览器冲突。
  • 平移操作:鼠标拖拽移动视图,键盘快捷键支持。
  • 视图重置:一键恢复默认视图状态。
  • 全屏模式:最大化工作空间,重点图表编辑。
  • 强大的导出功能:
  • SVG导出:高质量矢量下载。
  • PNG导出:适用于文档和演示的位图格式。
  • 代码复制:一键复制美人鱼代码到剪贴板。
  • 自定义AI配置:
  • 支持配置您自己的AI服务API(OpenAI、Azure OpenAI、其他兼容服务)
  • 可自定义API URL、API Key和模型名称
  • 支持模型切换,选择最适合的AI模型
  • 配置自己的AI服务后享有无限使用权限
  • 访问权限管理:
  • 内置访问密码功能,验证通过后可享有无限使用权限
  • 支持多种使用模式:免费咨询 → 密码验证 → 自定义配置
  • 使用量统计:
  • 实时显示剩余使用次数
  • 本地存储使用记录,按日重置
03
部署指南
环境要求
  • Node.js 18.x 或更高版本
  • npm 或纱线包管理工具
安装步骤
克隆代码仓库:
git clone https://github.com/yourusername/smart-mermaid.git
cd smart-mermaid

提示yourusername替换为实际的仓库路径
安装项目依赖:
npm install
# 或者
yarn install
配置环境变量:在项目根目录下创建.env.local文件,并填入以下配置:
# AI 服务配置(必需)
AI_API_URL=https://api.openai.com/v1
AI_API_KEY=在此处填入您的API密钥
AI_MODEL_NAME=gpt-3.5-turbo

# 应用配置
NEXT_PUBLIC_MAX_CHARS=20000
NEXT_PUBLIC_DAILY_USAGE_LIMIT=5

# 访问密码(可选)
ACCESS_PASSWORD=设置您的访问密码
环境指标说明:
  • AI_API_URLAI 服务 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: 任选,设置后用户可通过输入此密码获得无限使用权限
启动开发服务器:

npm run dev
# 或者
yarn dev

访问应用:在浏览器中打http://localhost:3000即可访问本地部署的应用。
04
使用示例
直接输入简单的问题,系统会根据大语言模型的回复自动生成相关可视图表
图片
例如:输入:“tcp连接的三次握手和四次挥手原理”,生成效果图如下
图片
例如:输入具体逻辑和要求,如下
认证系统
  1. 访问页面,未登录就跳转到登录页面
  2. 登录页面可以选择账号密码登录、手机号码验证码登录
  3. 账号认证成功,则进入系统,否则提示失败
图片
05
开源地址
  • 地址:https://github.com/liujuntao123/smart-mermaid
END
PS:防止找不到本篇文章,可以收藏点赞,方便翻阅查找哦。



往期推荐



如何在Nginx 中实现动态封禁IP

33.8k star,告别传统 CRM,一款现代化的开源 CRM 替代神器!

72K,一个收入被严重低估的方向!!

面试官:为什么数据库连接池不采用 IO 多路复用?

从零搭建制造业系统,一款牛逼的低代码神器!

又一款国产 Java 框架诞生了,太强了!!


【声明】内容源于网络
0
0
终码一生
开发者聚集地。分享Java相关开发技术(JVM,多线程,高并发,性能调优等),开源项目,常见开发问题和前沿科技资讯!
内容 1876
粉丝 0
终码一生 开发者聚集地。分享Java相关开发技术(JVM,多线程,高并发,性能调优等),开源项目,常见开发问题和前沿科技资讯!
总阅读1.0k
粉丝0
内容1.9k