AI --＞ Mermaid --＞图形可视化（UI）-开发者社区

人工智能+在过去两年得到飞速的发展，关于如何在实际应用中集成AI，发挥AI的惊人的能力有不同的路径。下面分析AI到Mermaid (美人鱼）到图形可视化这条路径。后面我们会分章节依次分析其他路径。

编辑

最简单的也是最通用的做法目前是，现在AI聊天工具窗口中输入提示词，比如：请给我一份详细的攀登珠峰的流程图，要求以Mermaid Code输出，如下：

编辑

然后我们复制产生的Mermaid代码，转到：https://mermaid.live/edit，粘贴Mermaid代码，即可得到完整的可视化图：

（免费，无需任何费用）

编辑

这里有个问题是这个图是静态的不能编辑，下面是另外一种解决方案，可以编辑，可以定制，并且可以做svg,网页，png，打印机等自由控制，还能对图进行自由控制。

运行UCCDiagram.exe （免费软件，无需费用，自由下载）

编辑

打开AI,并输入提示词：请给我一份详细的攀登珠峰的流程图（这里不需要输入请以Mermaid输出说明，系统自动决策）

编辑

类型选择 "AI流程图"点击发送按钮。则可以

编辑

好处是图可以编辑（移动位置，调整大小，修改属性，改文本，添加新图元等），可以根据需要导出为矢量SVG, 网页，png图以及打印机输出等。

我们再输入提示词：请给一份国庆节7天旅游安排，则会AI会返回Mermaid代码：

/* by 01022.hk - online tools website : 01022.hk/zh/quanbaojiao.html */ ```mermaid flowchart TD Start[国庆7天旅游安排] --> Day1 Day1[第一天：抵达与休整] --> Activity1_1[上午：抵达目的地] Activity1_1 --> Activity1_2[下午：酒店入住与休息] Activity1_2 --> Activity1_3[晚上：周边美食探索] Day1 --> Day2 Day2[第二天：城市文化探索] --> Activity2_1[上午：参观历史博物馆] Activity2_1 --> Activity2_2[下午：老城区步行游览] Activity2_2 --> Activity2_3[晚上：传统表演观赏] Day2 --> Day3 Day3[第三天：自然风光体验] --> Activity3_1[上午：前往国家公园] Activity3_1 --> Activity3_2[下午：徒步与观景] Activity3_2 --> Activity3_3[晚上：星空观测] Day3 --> Day4 Day4[第四天：深度文化体验] --> Activity4_1[上午：手工艺工作坊] Activity4_1 --> Activity4_2[下午：当地市集购物] Activity4_2 --> Activity4_3[晚上：特色餐厅晚餐] Day4 --> Day5 Day5[第五天：休闲放松日] --> Activity5_1[上午：水疗与按摩] Activity5_1 --> Activity5_2[下午：咖啡馆阅读休闲] Activity5_2 --> Activity5_3[晚上：自由活动时间] Day5 --> Day6 Day6[第六天：周边短途游] --> Activity6_1[上午：前往附近古镇] Activity6_1 --> Activity6_2[下午：古镇探索与摄影] Activity6_2 --> Activity6_3[晚上：返回酒店整理行李] Day6 --> Day7 Day7[第七天：返程准备] --> Activity7_1[上午：购买纪念品] Activity7_1 --> Activity7_2[下午：酒店退房] Activity7_2 --> Activity7_3[晚上：前往机场/车站返程] Activity7_3 --> End[旅程结束] style Start fill:#f9f,stroke:#333,stroke-width:2px style End fill:#f9f,stroke:#333,stroke-width:2px style Day1 fill:#e1f5fe style Day2 fill:#f3e5f5 style Day3 fill:#e8f5e8 style Day4 fill:#fff3e0 style Day5 fill:#fce4ec style Day6 fill:#e8eaf6 style Day7 fill:#f1f8e9 ```

图形可视化则为：

编辑

UCCDiagram提供了多种高级布局模式，可以根据需要自由选择，比如分层布局：

编辑

力向布局：

编辑

环状布局：

编辑

也可以直接输出到网页：

编辑

方便适用。

这种模式感觉是最方便的，如果你写论文，做报告需要流程图，可以用这个免费工具，软件本身也提供了截屏工具，并且截屏后会自动放入剪贴板，你转到Word直接粘贴复制即可。