用 Codex 生成第一张算法流程图

上一篇文章里我们已经创建了一个algorithm-flowchart技能。这个技能的作用是把中文编程问题整理成算法步骤、Mermaid 流程图、HTML 页面、PNG 图片、SVG 图片和 Python 示例代码。这篇文章我们进入实战用这个技能生成第一张流程图。为了避免和前面的测试案例重复这里不用“判断奇数还是偶数”而是换成一个更生活化的案例输入一个年龄判断这个人是否成年。这个案例非常适合做第一张流程图因为它足够简单又包含了编程中最常见的判断结构输入、条件判断、两个分支、输出结果。一、先给 Codex 一个清楚的需求使用技能时不要只说“帮我画流程图”。我们要把技能名称、需求、输出内容和保存目录都说清楚。可以直接复制下面这段提示词请使用 algorithm-flowchart 技能。 需求判断用户输入的年龄是否成年。 请生成算法步骤、Mermaid 流程图、HTML 文件、PNG 图片、SVG 图片、example.py 示例文件和人工检查点。 请把本次导出的文件统一保存到 E:\tmp\adult-check-flowchart 目录下。这段提示词里有四个关键点关键点说明指定技能明确告诉 Codex 使用algorithm-flowchart技能而不是普通聊天回答。说清需求任务是输入年龄并判断是否成年。明确输出要求输出算法步骤、流程图、图片、代码和人工检查点。固定目录把所有成果保存到同一个目录方便后续检查和整理。这样做的好处是后面要检查文件、重新导出图片、整理课程素材时不会到处找结果。二、期望得到的算法步骤理想情况下Codex 会先把需求拆成一组清楚的算法步骤。比如这个案例可以拆成1. 开始。 2. 输入一个年龄。 3. 判断年龄是否大于等于 18。 4. 如果大于等于 18就输出成年人。 5. 如果小于 18就输出未成年人。 6. 结束。这里最重要的是第 3 步。年龄 18就是整个程序的判断条件。流程图里的分支、Python 里的if都围绕这个条件展开。这也是零基础学员要重点训练的能力先别急着写代码先把判断条件说清楚。三、生成 Mermaid 流程图接下来Codex 应该生成 Mermaid 流程图代码。示例结果如下是否开始输入年龄年龄 18 吗输出成年人输出未成年人结束这张流程图里有几个关键结构结构作用开始节点表示流程从哪里开始。输入节点表示需要用户输入年龄。判断节点判断年龄是否大于等于 18。分支路径“是”输出成年人“否”输出未成年人。结束节点表示程序流程结束。如果这张图复制到 Typora 或支持 Mermaid 的工具里就可以直接预览。四、对应的 Python 代码流程图不是为了好看而是为了帮助我们写出更清楚的代码。这个案例对应的 Python 代码如下ageint(input(请输入年龄))ifage18:print(成年人)else:print(未成年人)流程图和代码之间是一一对应的流程图Python 代码输入年龄age int(input(...))判断年龄是否大于等于 18if age 18:是分支print(成年人)否分支else: print(未成年人)这一步非常重要。如果流程图和代码不是同一套逻辑说明中间一定有地方出了问题。学习 AI 编程时不能只看 AI 有没有给答案还要检查图和代码是否一致。五、检查导出的成果文件一个合格的流程图技能不应该只输出 Mermaid 代码。它还应该把结果统一保存到一个目录里例如E:\tmp\adult-check-flowchart这个目录里至少应该包含flowchart.html flowchart.png flowchart.svg example.py README.md每个文件都有自己的用途文件用途flowchart.html流程图源页面方便后续修改样式或重新截图。flowchart.png可以直接放进课件、文档和笔记里的图片。flowchart.svg矢量图放大不容易失真适合二次编辑。example.py可运行的 Python 示例代码。README.md说明需求、算法步骤、文件用途和人工检查点。如果只生成了 Mermaid 代码没有目录、没有图片、没有 Python 文件就说明这个技能还没有真正跑通。六、人工检查清单AI 生成结果之后人一定要检查。这个案例至少检查下面几件事检查项判断标准开始结束流程图是否有开始和结束节点。分支标注判断节点的“是”和“否”是否标清楚。逻辑一致流程图和 Python 代码是否都是age 18。图片完整PNG 是否完整显示流程图底部有没有被截断。SVG 导出是否同时生成了 SVG 文件方便后续放大或编辑。代码可运行example.py是否能运行并输出正确结果。特别要注意 PNG 截图。课程图片、封面图、展示图通常适合 16:9但算法流程图不一定适合固定高度。如果流程节点变多强行固定 16:9底部内容可能会被截断。更合理的规则是宽度可以固定高度要根据流程图内容自适应。七、发现问题后怎么让 Codex 修改如果流程图的判断分支不够清楚可以继续这样要求 Codex这张流程图的判断分支不够清楚。 请把“是”和“否”两个分支标出来并保持 Python 代码不变。如果发现 PNG 图片被截断可以这样要求这张 PNG 图片下面的内容被截断了。 请优化 algorithm-flowchart 技能的导出规则 1. HTML 页面宽度可以固定 2. 高度不要固定为 16:9要根据流程图真实内容自动撑开 3. 导出 PNG 时截取完整页面内容 4. 同时导出 SVG 5. 同时输出 example.py 示例文件 6. 本次结果保存到 E:\tmp\adult-check-flowchart 目录。这就是使用 Codex 的正确方式不是期待 AI 一次生成完美结果而是让 AI 先生成第一版然后我们带着检查标准继续优化。八、小结这篇文章完成了第一张 Codex 算法流程图的生成。我们用“判断是否成年”这个简单案例走通了完整流程中文需求 - 算法步骤 - Mermaid 流程图 - Python 代码 - 成果文件 - 人工检查这节最重要的不是成年判断本身而是建立一种学习习惯先让 Codex 生成第一版再由人检查开始、结束、分支、代码逻辑、图片完整性、SVG 导出和 Python 示例代码。后续学习更复杂的算法和流程图时这套检查方式仍然可以继续复用。