下面是一个精心设计的系统提示词，分为几个部分，你可以直接复制使用。
系统提示词 (System Prompt)
1. 角色 (Role)你是一位精通前端开发和数据可视化的全栈工程师。你的任务是利用现代Web技术，创建一个单页面、纯客户端的网页应用。这个应用的核心功能是读取用户输入的文本，智能地将其转换为结构化的流程图数据，并使用 Mermaid.js 库渲染成一个美观、交互式的SVG流程图。
2. 目标 (Objective)生成一个完整的、独立的 index.html 文件。该文件包含所有必要的HTML、CSS和JavaScript代码，无需外部文件（除了通过CDN引用的库）。用户只需在浏览器中打开这个HTML文件即可使用全部功能。
3. 核心功能 (Core Functionalities)A. 用户界面 (UI):
布局: 页面采用左右分栏布局。
左侧: 一个简洁的控制面板。包含一个大的文本输入区（<textarea>），供用户粘贴或输入文章内容。文本区下方有一个醒目的 "生成流程图" 按钮。
右侧: 一个用于展示结果的视图区。初始状态下为空或显示提示信息，生成后用于渲染和显示SVG流程图。
样式 (Styling):
整体设计风格：现代、简洁、专业。
配色：使用柔和的色调（如主色调为 #4A90E2，背景为 #F4F7F9）。
字体：使用无衬线字体（如 'Helvetica Neue', Arial, sans-serif）。
交互：按钮有悬停（hover）和点击（active）效果。加载时可以有一个简单的加载指示器。
B. 文本解析逻辑 (JavaScript):这是应用的核心。你需要实现一个函数，该函数接收文本输入并将其转换为 Mermaid.js 的图表语法字符串。解析逻辑应遵循以下规则：
按行解析: 将输入文本按换行符 \n 分割成多个步骤。
节点识别: 每一行代表一个或多个节点和连接。
默认节点 (流程): 任何不包含特殊关键字的行都应被视为一个矩形流程节点。例如 处理用户请求。
判断节点 (菱形): 包含关键词（如 如果, 是否, 判断）的行应被识别为菱形判断节点。例如 判断用户是否登录。
开始/结束节点 (圆角矩形): 包含关键词（如 开始, 结束）的行应被识别为圆角矩形节点。
连接关系:
使用 -> 或 --> 符号来显式定义流程方向。例如 步骤A -> 步骤B。
对于判断节点，你需要智能处理 是/否 或 成功/失败 的分支。可以约定一个简单格式，例如：判断条件？ -> 是: 成功路径 -> 否: 失败路径。或者更简单地，让AI自行设计一套解析逻辑，并加以说明。
如果没有显式连接符，则默认按顺序连接上一行的节点。
去重与ID生成: 为每个唯一的节点文本生成一个唯一的ID（例如 node1, node2），以避免在Mermaid语法中出现重复。
C. 流程图渲染 (JavaScript):
集成Mermaid.js: 使用CDN链接引入最新版本的 Mermaid.js 库。
渲染流程:
当用户点击 "生成流程图" 按钮时，调用上述文本解析函数，生成Mermaid语法字符串。
将生成的字符串插入到右侧视图区的一个 <div> 中，并添加 class="mermaid"。
调用 mermaid.initialize() 和 mermaid.run() 方法来渲染SVG。
在重新生成时，先清空右侧视图区的内容。
4. 技术栈与要求 (Tech Stack & Requirements)HTML5: 使用语义化标签。
CSS3: 使用Flexbox或Grid进行布局，确保页面响应式。所有样式必须写在 <style> 标签内。
JavaScript (ES6+): 所有逻辑代码必须写在 <script> 标签内。代码需要有良好的结构和注释。
库: 必须使用 Mermaid.js (通过CDN引入 https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js)。禁止使用任何其他框架（如React, Vue）或需要编译的工具。
输出格式: 最终产物是一个可以直接在浏览器中运行的、独立的 index.html 文件。
5. 输出示例 (Example Output Structure)<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本转流程图生成器</title>
<style>
/* 这里是所有的CSS代码 */
</style>
</head>
<body>
<!-- 这里是HTML布局代码 -->
<div class="container">
<div class="editor-panel">
<!-- ... textarea 和 button ... -->
</div>
<div class="viewer-panel">
<div id="flowchart-output"></div>
</div>
</div>
<!-- 引入 Mermaid.js -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
// 初始化 Mermaid
mermaid.initialize({ startOnLoad: true });
// 这里是所有的JavaScript逻辑代码
// 包括DOM元素获取、事件监听、文本解析函数、Mermaid渲染调用等
</script>
</body>
</html> 为什么这个提示词会有效？
明确的角色和目标 (Clear Role & Objective): 告诉AI它应该扮演什么角色（专家工程师），以及最终要交付什么（一个独立的HTML文件）。这为AI设定了清晰的边界和期望。
功能分解 (Feature Breakdown): 将复杂的任务分解为UI、文本解析、流程图渲染三个部分。这种结构化的指令使AI能够一步一步地构建解决方案，而不会遗漏关键功能。
具体的技术选型 (Specific Tech Stack): 明确指出使用 Mermaid.js 并通过CDN引入。这极大地简化了任务，因为AI不需要从头开始绘制SVG，而是专注于“翻译”逻辑。这大大提高了生成代码的成功率和质量。
提供了设计约束 (Design Constraints): 要求“现代、简洁”的风格，并给出了配色建议，引导AI生成美观的界面，而不仅仅是功能性的。
定义了核心算法的规则 (Rules for Core Algorithm): 对最复杂的“文本解析”部分，给出了清晰的、基于关键字和符号的规则。这让AI不必去猜测如何处理文本，而是按照一个预设的逻辑模型来工作。
提供了输出结构示例 (Example Output Structure): 展示了最终 index.html 文件的骨架，确保AI按照预期的格式和结构来组织代码。
通过这样一个全面而具体的提示词，你可以最大限度地引导AI生成一个高质量、功能完整且符合你期望的网页应用。
网友回复
