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代码:

复制代码
```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-图形可视化还有其他方式,但目前好多都集成得不好。欢迎大家留言讨论。

相关推荐
AngelPP12 小时前
OpenClaw 架构深度解析:如何把 AI 助手搬到你的个人设备上
人工智能
宅小年12 小时前
Claude Code 换成了Kimi K2.5后,我再也回不去了
人工智能·ai编程·claude
九狼12 小时前
Flutter URL Scheme 跨平台跳转
人工智能·flutter·github
ZFSS13 小时前
Kimi Chat Completion API 申请及使用
前端·人工智能
warm3snow13 小时前
Claude Code 黑客马拉松:5 个获奖项目,没有一个是"纯码农"做的
ai·大模型·llm·agent·skill·mcp
天翼云开发者社区14 小时前
春节复工福利就位!天翼云息壤2500万Tokens免费送,全品类大模型一键畅玩!
人工智能·算力服务·息壤
知识浅谈14 小时前
教你如何用 Gemini 将课本图片一键转为精美 PPT
人工智能
Ray Liang14 小时前
被低估的量化版模型,小身材也能干大事
人工智能·ai·ai助手·mindx
shengjk116 小时前
NanoClaw 深度剖析:一个"AI 原生"架构的个人助手是如何运转的?
人工智能