0. 先和大家打个招呼吧 
-
你是谁： 我是人；
-
你是怎么用 TRAE 把 Demo 做出来的： 在TRAE的Design模式没有出来的时候，让AI用文字稿的形式把我的初步想法拆解、设计、落地
1. Demo 简介
-
是什么：一个Mermaid编辑器 → AI 对话的MCP+VSCode插件；
-
面向谁：在 TRAE IDE 中工作的开发者、产品经理、技术写作者，需要用流程图与 AI 沟通复杂逻辑；
-
主要功能：
-
1、可视化编辑器——Mermaid弱代码编辑器。这是编辑器 → AI 对话的基础
-
2、Mermaid2AI-Chat MCP——这是AI与用户界面沟通的桥梁
-
3、Mermaid2AI-Chat SKILL——教会AI怎么使用这个工具
-
列出 2–3 个核心功能，建议配产品截图或界面展示，让评审一眼看懂。
2. Demo 创作思路
-
灵感来源：我的游戏开发进入一个瓶颈——代码足够多，功能足够复杂，需要梳理各个功能模块之间的耦合和冗余。但是！自然语言已经很难准确描述我的想法了。Mermaid很好，TRAE也在用，但是写Mermaid代码很麻烦——我想解决这个麻烦。
-
- 想解决的问题：自然语言很难描述架构问题，写Mermaid代码很麻烦，解决AI识别思维导图要么需要读图片，要么需要识别文件，耗费token的问题。
- 没有本产品时，用户要「画图 → 手动复制 Mermaid 代码 → 切到 AI 对话 → 粘贴 → 提问」，反复切换打断思路；且 AI 无法感知用户画布的实时变化。
-
为什么做这个方向：其他思维导图需要进行额外转换，非原生文本代码；VSCODE插件保证VibeCoding流程不被打断，不用切换窗口。网页作为兜底，方便开发矫正。
3. Demo 体验地址
-
GITEE: AAG/Mermaid2AI-Chat
4. 演示介绍视频
1.58 复制打开抖音，看看【饿的作品】Mermaid2AI-Chat 编辑器→AI 对话… https://v.douyin.com/HIxP2l3IvoU/ 12/23 U@L.jp :9pm zTY:/
5. TRAE 实践过程
-
开发的完整流程
-
1、设计：把我的想法发送给TRAE，用我的分型设计技能进行调研和初步设计
-
2、创建规则体系，复用我之前的项目经验
3、测试&DEBUG，完成初步原型
-
4、初步原型完成后，完成剩余的部分
附属产物：设计先行编程方法规则文件
-
关键任务对话的 Session ID
-
.1347322437447144:2c542181ebea7e8ef9495116abf06abb_6a349fbbff2d87691afcf042.6a34a117ff2d87691afcf074.6a34a117f95091bd5791b2e2:Trae CN.T(2026/6/19 09:53:27)
.1347322437447144:be50c9dc2d694cfd8228e79d79436590_6a349fbbff2d87691afcf042.6a34a1c3ff2d87691afcf096.6a34a1c2f95091bd5791b2e3:Trae CN.T(2026/6/19 09:56:19)
.1347322437447144:791179f356f3823997c6befaa361dff8_6a349fbbff2d87691afcf042.6a34a424ff2d87691afcf155.6a34a424f95091bd5791b2e6:Trae CN.T(2026/6/19 10:06:28)
.1347322437447144:1020de645476b87df662e24dcd72771f_6a349fbbff2d87691afcf042.6a34a4c7ff2d87691afcf177.6a34a4c7f95091bd5791b2e7:Trae CN.T(2026/6/19 10:09:11)
.1347322437447144:705746d3bdfdabe9ce25d0746ff3b52b_6a34a667ff2d87691afcf344.6a34a870ff2d87691afcf434.6a34a870f95091bd5791b2e9:Trae CN.T(2026/6/19 10:24:48)
.1347322437447144:7d91bcc6e6da77d4e0ce45e84027aedf_6a349fbbff2d87691afcf042.6a34b2c1ff2d87691afcf694.6a34b2c0f95091bd5791b2f0:Trae CN.T(2026/6/19 11:08:49)
6. 对应的报名审核通过的帖子链接
