作为一个程序员，自己经常会用的各种在线工具，很多工具不一定可以保证数据的安全，广告也很多。于是上一年初的时候，我借助AI做了一个在线51AI工具集网站https://www.51aitools.com/。
主要功能：JSON格式化、二维码生成、加解密、AI生成mermaid、AI生成echarts、html生成、AI生成美化markdowm等。后端java前端是HTML，主要想的是HTML对SEO比较友好。但是页面缺少美感，AI味很重(图一)，可能也是当时AI编程的极限了。虽然页面不怎么的，但是一些功能还是很实用的。
丑图如下（图一）
这个周末有时间，正好看到一个好的开源项目next-ai-draw-io（终于有人把这个功能做了，我当时想做的，但是没有搞定，做出来的效果太差了）。这个项目主要功能就是通过AI生成draw各种图表。感觉页面做得挺好看的，于是就想集成到自己的项目中，然后就决定把自己的项目用React重构一下，提高一些页面的美感。重构后效果如下：
一、首页：
很多在线工具：AI Draw、AI Mermai、AI ECharts、AI HTML、AI Markdown、AI 校对、AI 导航、社区、json格式化\比对、二维码生成、各种加解密、文本比对等等
二、通过AI生成draw各种流程图:
以前几个小时的工作，现在几分钟可以搞定，生成的结果可以直接编辑。
三、通过AI生成mermaid图表包括：
流程图、时序图、类图、状态图、实体图、C4架构图、甘特图用户旅程、饼图、思维导图、时间线、Git图
四、通过AI生成echarts图表包括：
折线图、柱状图、饼图、散点图、雷达图、热力图、树图、旭日图、Git图、面积图、K线图、箱线图、矩形树图、漏斗图、仪表盘、关系图等
五、AI生成和美化markdown文件
可以通过这个功能把markdown数据转换为精美的卡片，可以让AI美化， 也可以通过设置美化。
六、AI校对通过AI对文本进行分析，标记错误和优化。用户可以直接应用。如图：
优化后网站更美观，使用起来也更流畅了。网站其他的小功能：AI导航、社区、AIhtml等功能，可以访问体验。