Web applications based on AI technology

By /

Smart Mermaid, is an AI-based Web application that intelligently converts text content into Mermaid formatted code and renders it into visual charts.

Project overview

  • function: Add natural language text or uploaded .txt、.md、.docx File content is automatically converted into Mermaid code through AI and rendered into visual charts in real time (such as flow charts, sequence charts, Gantt charts, state charts, etc.)
  • objective: Help users get rid of the cumbersome of handwritten Mermaid code and generate standard chart codes from text descriptions with one click to improve production efficiency

🚀Core function highlights

  1. Intelligent text parsing
    • Support up to about 20,000 characters input and file upload.
    • AI automatically recognizes or manually selects chart types, generates Mermaid codes and supports streaming previews
  2. Dual rendering mode
    • Mermaid renderer: Standard charts that support zooming and professional view control.
    • Excalidraw renderer: More like hand-drawn graphics, supporting drag-and-drop and style adjustment
  3. Real-time code editing
    • Use CodeMirror integrated editor to support Mermaid syntax highlighting, verification and real-time feedback
  4. AI accessibility
    • automatic repair: AI detects Mermaid syntax errors and provides recommendations for fixes.
    • direction switching: Support one-click switching between landscape (LR) and portrait (TD) layouts
  5. Export and share
    • Support exporting charts to SVG, PNG, or copying Mermaid source code

ˇUsage and configuration

  • free experience: You can directly access the online Demo (smart‑mermaid.aizhi.site), there are 5 free credit generation times a day, and there is built-in API Key support
  • cryptographic pattern: Enter the access password provided by the author and you can use it for unlimited times.
  • Customized AI services: Support the use of your own configured OpenAI or other service APIs to achieve unlimited calls

🛠Technology Stack

  • use Next.js（App Router）、Tailwind CSS、shadcn/ui + Radix UI Build front-end interfaces.
  • Render dependence mermaid and @excalidraw/excalidraw, conversion dependence @excalidraw/mermaid-to-excalidraw。
  • integrated CodeMirror editor with mammoth File parsing.
  • The AI support framework is compatible with the OpenAI API.
  • Docker and Docker Compose one-click deployment support

🛠Brief description of usage process

  1. Enter text or upload files.
  2. Select a chart type or automatically recognize.
  3. Click “Generate”, and AI outputs Mermaid code and graphical preview in real time.
  4. If you need to modify or export, make adjustments in the editor and export to SVG/PNG or copy the code.

📝Summary

Smart Mermaid simplifies the process from text to diagram, uses AI to automatically generate standard Mermaid code, supports real-time editing, dual rendering, repair optimization and export, and is very suitable for document writing, project management and teaching visualization scenarios. If you often need to use Mermaid to draw, this tool can greatly improve your efficiency.

Github：https://github.com/liujuntao123/smart-mermaid

Oil tubing:

Scroll to Top