安裝

1. 源碼安裝

• ? 環(huán)境要求

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.?開發(fā)環(huán)境 ????npm?run?dev #?或者 ????yarn?dev #?2.?生產環(huán)境 #?構建生產版本 ????npm?run?build #?啟動生產服務器 ????npm?run?start

• ? 運行成功，可以訪問：http://localhost:3000

2. Docker快速啟動

• ? 提前安裝好Docker、docker-compose命令環(huán)境
• ? 不需要再拉取源碼，直接新建一個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.?賬號認證成功，則進入系統，否則提示失敗

• ? 生成效果圖
  

總結

• ? 利用該項目，可以輕松利用AI幫助我們畫圖，更好地學習、理解和梳理知識
• ? 可以在需求分析、知識分享、文章編寫等場景應用起來，提高文檔圖表編輯效率和質量

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關注數據與安全，洞悉企業(yè)級服務市場：https://www.ijiandao.com/