☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
请为以下组件交互行为生成一段用于调用绘图ai（如mermaid ai、diagrams.net ai插件）的状态图提示词：用户点击【提交】按钮后，若表单校验通过，进入“提交中”状态并禁用按钮；若校验失败，弹出红色提示且保持“空闲”状态；提交成功后跳转到结果页，失败则显示重试按钮。使用mermaid statediagram-v2语法，初始状态标记为[*]，所有状态用state关键字声明，每条转换箭头须标注trigger/condition/action三元组，正常流程用绿色实线、错误流程用红色虚线、异步等待用黄色波浪边框，“提交中”居中偏右布局以体现临时性。请严格按此风格生成，不添加解释、不换行分段、不输出代码或图表，只返回一段纯文本提示词。
你需要让通义千问根据一段组件交互描述，自动生成符合uml规范的状态图提示词，而不是直接画图或解释状态机原理。
明确告诉AI你要的是“提示词”，不是状态图本身
在输入开头就写清楚任务目标：“请为以下组件交互行为生成一段用于调用绘图AI（如Mermaid AI、Diagrams.net AI插件）的状态图提示词”，避免AI误以为你要它画图或写代码。
这一步很关键——如果不说清输出类型，AI大概率会返回Mermaid语法代码或文字版状态转换表，而不是可用于二次调用的自然语言提示词。
提供带上下文的组件交互原文
把真实组件行为描述粘贴进来，必须包含触发动作、状态变化、条件分支和边界行为。例如：“用户点击【提交】按钮后，若表单校验通过，进入‘提交中’状态并禁用按钮；若校验失败，弹出红色提示且保持‘空闲’状态；提交成功后跳转到结果页，失败则显示重试按钮。”
不要只写“按钮有三种状态”，AI需要动词+主体+条件+结果的完整链条才能提炼出有效提示词。
指定提示词要适配的绘图工具风格
方法一：适配Mermaid State Diagram
要求提示词中显式包含“使用Mermaid stateDiagram-v2语法”“节点用state关键字声明”“箭头标注trigger/condition/action三元组”等约束。例如：“请生成一段自然语言提示词，能让AI绘图工具准确理解并渲染为Mermaid stateDiagram-v2代码，其中初始状态标记为[*]，所有转换必须注明触发事件和守卫条件。”
方法二：适配图文混合提示场景
如果你准备把提示词喂给支持多模态输入的AI（如Kimi+draw插件），就强调“需包含视觉指令”：比如“用不同颜色区分正常流程（绿色）、错误流程（红色）、异步等待（黄色虚线框）”，“将‘提交中’状态放在中央偏右位置，体现其临时性”。【不写清颜色/布局意图，AI生成的提示词将缺乏图形控制力】
给AI一个参考风格样例（关键！）
第一步：先展示你认可的优质提示词长什么样
“请绘制一个登录组件的状态图：起始状态是‘未聚焦’，用户点击输入框时进入‘已聚焦’；输入完成后点击【登录】触发校验，校验通过→‘请求中’→‘登录成功’→跳转首页；校验失败→‘显示错误’→3秒后自动回到‘未聚焦’；网络超时则进入‘请求失败’状态，仅可通过点击【重试】返回‘未聚焦’。使用Mermaid stateDiagram-v2，所有状态用圆角矩形，失败路径用红色箭头，异步状态加wave样式。”
第二步：点明这个样例为什么有效
它把行为时序、视觉规则、语法约束全揉进一段连贯描述里，没有分点罗列，也没有技术术语堆砌。AI模仿这种“自然语言包裹专业意图”的密度，才能产出可用提示词。
第三步：禁止AI自由发挥格式
结尾加一句：“请严格按此风格生成，不添加解释、不换行分段、不输出代码或图表，只返回一段纯文本提示词。”
