news 2026/4/16 15:31:47

AI --> Mermaid --> 图形可视化 (UI)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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直接粘贴复制即可。

这个软件的本身源代码也开源(商业开源,很贵,不推荐)。

下载地址:http://www.uccpsoft.com/bbs/zhuce/login.htm

当然AI-Mermaid-图形可视化还有其他方式,但目前好多都集成得不好。欢迎大家留言讨论。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/15 6:06:05

68345

8456354

作者头像 李华
网站建设 2026/4/11 10:30:00

d3dx10_39.dll文件缺失打不开程序 彻底解决办法 免费下载方法分享

在使用电脑系统时经常会出现丢失找不到某些文件的情况,由于很多常用软件都是采用 Microsoft Visual Studio 编写的,所以这类软件的运行需要依赖微软Visual C运行库,比如像 QQ、迅雷、Adobe 软件等等,如果没有安装VC运行库或者安装…

作者头像 李华
网站建设 2026/4/12 0:43:20

RAG-索引构建

一.向量嵌入Embedding1.什么是Embedding核心定义:将非结构化的数据(如文本,音频,图片等)映射为低维,稠密,连续的实数向量的过程。三要素:数据:原始的数据内容嵌入模型&am…

作者头像 李华
网站建设 2026/4/14 21:26:24

启动Docker中DIFY或者Ragflow的命令

启动DIFY的命令: 参数详解 docker compose -f docker-compose-gpu.yml -p docker-dify up -d-f docker-compose-gpu.yml 作用:指定使用的 Compose 配置文件路径。 说明:Dify 通常提供多个配置文件,docker-compose-gpu.yml 专为需要 GPU 加速的场景优化(如大模型推理),…

作者头像 李华
网站建设 2026/4/12 11:33:18

OpenAI核心模型主要贡献者翁家翌:OpenAI所做的,并非完全不能复刻;DS是唯一一次让内部真正警觉;模型公司本质上拼的是Infra的修Bug速度

在发布前,OpenAI 内部甚至做好了“几天后就关掉”的心理准备;最初的目标,只是收集一点真实用户数据。那时没有人预料到,它会在几天内引爆整个世界,更没人能提前画出那条指数级增长的曲线。 “ChatGPT 并不是 OpenAI 精…

作者头像 李华
网站建设 2026/4/16 14:32:22

从 YOLOv8 到 MobileNetV4:主干网络重构与目标检测性能极限优化实战解析

文章目录 YOLOv8主干网络革新:MobileNetV4极致优化实战指南 MobileNetV4核心技术突破解析 通用倒置瓶颈(UIB)块设计革命 移动端硬件感知优化策略 完整集成方案实现 环境配置与基础依赖 MobileNetV4主干网络完整实现 YOLOv8与MobileNetV4深度融合 高级训练与优化策略 移动端部…

作者头像 李华