Smart Mermaid: AI tool to quickly generate flowcharts and timing diagrams with text

Smart Mermaid is an open source AI-driven web application that focuses on converting user-input natural language text into Mermaid-formatted code and generating visual charts. It simplifies the charting process through AI technology, eliminating the need to manually write complex code. Users only need to use simple text to describe the business process or logic, Smart Mermaid can intelligently parse and generate flowcharts, timing diagrams, class diagrams and other diversified diagrams. The project supports Docker one-click deployment and is suitable for developers, product managers and people who need to quickly generate professional diagrams. The code is hosted on GitHub, with 810 stars and 92 branches, showing active community support.

Function List

• Natural Language Generated Charts: The user enters a text description and AI automatically parses and generates the chart code in Mermaid format.
• Support for multiple chart types: Includes flowcharts, timing diagrams, class diagrams, Gantt charts, and architecture diagrams covering common business scenarios.
• Customizing AI Configuration: Support for configuring AI services, such as API addresses and keys, to meet individual needs.
• Professional Chart Editor: Provide editing and previewing functions and support multiple rendering modes to enhance chart professionalism.
• Docker One-Click Deployment: Quickly build local or server environments with Docker for ease of use.
• access control: Support for setting access passwords to protect user-generated content.

Using Help

Installation process

Smart Mermaid supports rapid deployment via Docker, here are the detailed installation steps:

1. Clone Code Repository
   Run the following command in the terminal to clone the project locally:

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

2. Switching to Docker Branching
   Note: The master branch does not contain the Docker configuration file and you need to switch to the docker Branching out:

   git checkout docker
   

3. Configuring AI Services
   Smart Mermaid relies on external AI services (such as the OpenAI API) to parse text. The following environment variables need to be configured:
   • compiler docker-compose.yml or environment variable file, add the following:

     AI_API_URL=https://api.openai.com/v1
     AI_API_KEY=你的API密钥
     AI_MODEL_NAME=gpt-3.5-turbo
     

   • If access control is required, set it:

     ACCESS_PASSWORD=你的访问密码
     

4. Starting services
   Start the service using Docker Compose:

   docker-compose up -d
   

   Once the service is started, Smart Mermaid will run locally http://localhost:3000The

5. Access to applications
   Open your browser and visit http://localhost:3000. If an access password is set, enter the password to access the operation screen.

Main Functions

1. Generation of charts

• procedure::
  1. In the text input box on the home page, enter natural language text that describes the business process. For example, "The user logs into the system, the system verifies the identity and enters the home page on success, while failure prompts an error."
  2. Click the Generate button and the AI will analyze the text and generate the corresponding Mermaid code.
  3. The system automatically selects the appropriate chart type (e.g. flowchart or timing chart), or you can specify the type manually.
  4. The generated charts are displayed in the right preview area and support real-time adjustments.
• caveat::
  • Enter text as clearly as possible, describing logical relationships and avoiding vague statements.
  • Supports up to 20,000 character inputs, with a limit of 5 generation times per day (configurable through a configuration file) NEXT_PUBLIC_DAILY_USAGE_LIMIT (Modified).

2. Editing and exporting

• Edit Chart::
  • You can modify the Mermaid code directly by clicking on the "Edit" button in the preview area.
  • After adjusting the code, the charts are updated in real time for quick debugging.
• Exporting Charts::
  • Support for exporting charts to SVG, PNG or Mermaid code files.
  • Click on the "Export" button, select the format and download it locally.
• rendering mode::
  • Supports multiple rendering modes (e.g., dark or light themes), which are switched in the settings.

3. Customized configuration

• AI service configuration::
  • exist docker-compose.yml modifications AI_API_URL cap (a poem) AI_API_KEY, supports access to other AI services (e.g., locally deployed models).
  • adjustable AI_MODEL_NAME Use different models to optimize the generation results.
• access restriction::
  • set up ACCESS_PASSWORD After that, only users who enter the correct password can access the application, making it suitable for internal team use.

4. Viewing history

• The generated charts are saved in the local session, and you can view the previously generated charts by clicking on "History".
• Supports re-editing or deleting historical charts for easy management.

Frequently Asked Questions

• AI parse failure: Inspection AI_API_KEY Is it valid and make sure the network connection is working.
• Docker startup errors: Confirm that you have switched to docker Branching out, checking docker-compose.yml Configuration is correct.
• Chart display anomaly: Ensure that your Mermaid code is syntactically correct by referring to the official Mermaid documentation (https://mermaid.js.org).

application scenario

1. Product managers design business processes
   Product managers need to quickly produce flowcharts or timing diagrams to describe business logic. Smart Mermaid allows them to enter requirements in natural language and quickly generate professional diagrams that save time.
2. Developer Documentation
   When writing technical documentation, developers can use Smart Mermaid to quickly generate architecture diagrams or class diagrams that can be embedded in Markdown files to improve readability.
3. Teamwork and Presentations
   When discussing a project, teams can use Smart Mermaid to generate and export charts for PPT or online presentations for easy communication.
4. Education and training
   Teachers or trainers can use Smart Mermaid to turn complex logical relationships into visual diagrams that help students understand.

QA

1. What chart types does Smart Mermaid support?
   Supports flowcharts, timing diagrams, class diagrams, Gantt charts and architecture diagrams, covering most business scenarios.
2. How do I ensure that the charts generated by AI are accurate?
   Enter clear text descriptions to clarify logical relationships. Once generated, you can manually edit the Mermaid code to ensure that the chart meets your needs.
3. Is programming experience required?
   Not required.Smart Mermaid generates charts through natural language and is suitable for non-programmers. Developers can further edit the code to optimize.
4. What pre-requisites are required for Docker deployment?
   Git and Docker Compose need to be installed to ensure network access to AI services such as the OpenAI API.