Say goodbye to manual drawing! A guide to building and using the AI-based Smart Mermaid automatic visualization chart tool

1. Introduction

• • An AI-based web application that can intelligently convert text content into Mermaid format code and render it into visual charts
• • Can intelligently create flow charts, sequence diagrams, Gantt charts, state charts, etc., and support online adjustment and image export
• • Can be quickly deployed with Docker, supports custom selection of large language models
• • Open source address reference: https://github.com/liujuntao123/smart-mermaid, project operation logic reference:
  

2. Installation

1. Source code installation

• • Environmental requirements

1. Node.js 18.x or higher
2. npm or yarn package management tools

• • Pull source code

git clone https://github.com/liujuntao123/smart-mermaid

• • Enter the smart-mermaid directory and create a new configuration file .env.local with the following configuration content

# AI service configuration (required)
AI_API_URL=https://api.openai.com/v1
AI_API_KEY=Enter your API key here
AI_MODEL_NAME=gpt-4o

# Application Configuration
NEXT_PUBLIC_MAX_CHARS=20000
NEXT_PUBLIC_DAILY_USAGE_LIMIT=5

# Access password (optional)
ACCESS_PASSWORD=Set your access password

• • Start operation

# 1. Development Environment
    npm run dev
# or
    yarn-dev

# 2. Production Environment
# Build production version
    npm run build
# Start the production server
    npm run start

• • If the operation is successful, you can access: http://localhost:3000

2. Docker Quick Start

• • Install Docker and docker-compose command environment in advance
• • No need to pull the source code, just create a new docker-compose.yml configuration file with the following content

version: "3"

services:
  smart-mermaid:
    #A third party image packaged from the official source code    
    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 #Optional, the default model name on the server. If the setting is unauthorized, this model will be selected by default
      - AI_MODELS=deepseek/deepseek-v3,gpt-4o # Front-end authorized users can select models, separated by commas. If not authorized, the first model is selected by default.
      - ACCESS_PASSWORD=your_access_password # Optional
    restart: unless-stopped

• • One-key start command is as follows

docker-compose up -d

• • If the operation is successful, visit the following link: http://localhost:3000

3. Usage Examples

1. You can directly enter simple questions, and the system will automatically generate relevant visual charts based on the responses of the large language model

• • Input: "The principle of three-way handshake and four-way wave of TCP connection", and the generated effect diagram is as follows
  

• • Input: "Introduce the first principles in a simple and easy-to-understand way", and the generated effect diagram is as follows
  

2. You can organize your knowledge and content into charts according to the specific description requirements

• • Enter the specific logic and requirements as follows

Authentication system
1. Access the page and jump to the login page if you are not logged in
2. On the login page, you can choose to log in with your account and password or with your mobile phone number verification code
3. If the account authentication is successful, you can enter the system, otherwise it will prompt failure

• • Generate renderings
  

IV. Conclusion

• • With this project, we can easily use AI to help us draw pictures and better learn, understand and organize knowledge
• • Can be applied in demand analysis, knowledge sharing, article writing and other scenarios to improve the efficiency and quality of document and chart editing