【实用技能】实用的编程AI-copilot及使用它制作美观流程图

1 制图危机

如果你是一名喜欢参加各类竞赛或进行科学研究的同学，你会经常要绘制一个美观的流程图来阐述你所研究的课题/作品，让读者快速地、准确地了解你的作品大意，梳理清楚整篇作品的结构。于我自己而言，我认为一个美观的流程图是能让读者留下来继续读的一个非常关键的要素。
但是，制作一幅流程图通常是耗时耗力的，不仅要考虑如何简练地呈现完整的结构、正确的元素逻辑，还要考虑整体的配色，当我们的作品比较长的时候，这会是一场噩梦。那么这个时候，AI会派上大用场，它能在最短的时间内，给你一个能看得过去的流程图。也许你会觉得，这样自由度将会大大降低，但你有了选择，你可以只观察它给出的流程图的结构，然后自己再美化。

以我自己的感受来看，假设自己手作的图质量是10分满分，大概要花费2~3小时，而AI制作的图我个人能打到8分，只需要花仅仅五分钟！

下面是一些我自己的成果
5203db42cf163a6416050cda6e7def3.png
1744855826281.jpeg
如果你不想学习流程图的绘制，那么学习如何使用AI辅助编程也是极好的，本篇教程也会讲到。废话少说，我们开始吧！

1.1 你需要准备的东西

  1. Visual Studio Code编辑器:Visual Studio Code - Code Editing. Redefined
  2. 一个以@stu.scau.edu.cn为后缀的华南农业大学学生邮箱:华南农业认证门户
  3. 用学生邮箱注册的一个Github账号:GitHub
  4. 一双勤劳的手和一颗钻研的心

1.2 为什么要学生认证

免费版的copliot是有次数限制的，但是可以通过Github的学生认证获得GitHub Student Developer Pack的使用权限，实现copilot自由。

2 使用华农邮箱注册一个Github 账号

比如我用的是 potatozhou@stu.scau.edu.cn 这个邮箱。

3 Github 2FA认证

认证之前的准备

提醒！为了避免多次验证不通过，请在进入网站进行认证时做如下的准备：

  • 不要开VPN，且最好用校园网，定位在校园及其附近。
  • 将自己的GitHub账号的显示名称改成中文名字拼音，比如叫“张三”的话就改成“Zhang San”,
  1. 点击Password and authentication选项
14966b83de822a3e352d47adbc13fa2.png 2. 点击`Enable two-factor authentication` 1744855918444.png 3. 选择2FA方法

GitHub 支持多种 2FA 验证方式，包括通过手机应用生成验证码和通过短信接收验证码。这里推荐第一种方式。

（1）下载并安装认证器应用(Google Authenticator)
（2）在 GitHub 页面上，选择 Set up using an app(使用应用设置)
（3）GitHub 会显示一个二维码，使用认证器应用扫描该二维码
（4）应用会生成一个六位数的验证码，输入该验证码并点击 Enable(启用)

  1. 认证成功
1744855927138.png

4 Github Education 验证

  1. 进入GitHub Education，点击Join Github Education。
1744855936334.png

  1. 然后跟着指引一步一步做即可，上传的证件最好是校园卡，若未通过，多试几次，如果没有通过的话他会给你发邮件，在邮件中也会告诉你不通过可能的原因

  2. 在通过之后大概3天以后学生认证的权益会到账，再次访问Github Education时会会显示紫色，在自己的github账号下面也会有紫色标签。教育认证完了之后，直接点击github.com/github-copil就行。

5 VS Code中使用Copilot

打开VS Code ，首先，我们需要在 VS Code 中安装 Github Copilot 插件。

1744855978470.png

安装之后登录你之前注册的Github账号，你的VS Code内置AI就大功告成了。查看左侧已经多出来了一个聊天栏位。

1744856012872.png

现在你就可以对其进行提问了。但是如果你还是特别懒，连复制粘贴都不想做了，那么你可以打开它的编辑器模式，他会自动识别你的需求，然后自动帮你更改你的代码。实测在1000行之内的代码它生成的准确率还是挺高的，

1744856012872.png

6 如何制作流程图

其实就是一句话：给copilot写小作文！

一个示例的提示词（prompt）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
请仔细阅读下面的文章，并按照以下步骤创建一个引人入胜且信息丰富的SVG知识图解：
1. 分析阶段：
• 识别并提取文章中的核心概念、关键观点和它们之间的逻辑关系
• 确定最适合表达这些内容的图解类型（思维导图、流程图、概念图、比较图等）
• 考虑目标受众和他们的认知需求
2. 设计阶段：
• 创建清晰的视觉层次结构，突出最重要的信息
• 使用适当的视觉隐喻和符号，使抽象概念更容易理解
• 应用一致的配色方案（3-5种互补色，要求浅色），增强可读性和美感
• 平衡文字与视觉元素，确保简洁性和完整性
• 使用视觉分组、对比和空间关系传达概念间的联系
3. 优化阶段：
• 简化复杂信息，去除不必要的细节
• 确保图解自成一体，无需原文也能传达完整信息
• 验证图解是否准确反映了原文的核心思想
请使用SVG格式创建这个知识图解，确保它既能独立传达核心信息，又能以视觉上吸引人的方式呈现。图解应该是概念性的，而不仅是文本内容的重新排列。

我希望你的svg图更加学术风格，可参照顶刊设计，内容尽可能详细！

【文章内容粘贴在下面】

根据你的需求微调你的提示词，然后它就会生成一份很长的svg代码。

把svg代码复制到SVG 在线编辑器 | 菜鸟工具

1744856012872.png

点击这里的“源代码”选项，把代码复制进去，就OK了。

实际上，他不仅仅能制作流程图，本文所介绍的只是Claude 3.7 Sonnet的一个很小的功能，现在的AI发展神速，更多的内容，可以看看网上的其他文章。并且，如果想要追求更高的AI开发效率，可以留意一下国外的Cursor以及国产的Trae，都是我自己最近接触过的不错的工具，只是有时使用AI不稳定，Cursor有使用次数限制，故本文只介绍了较为稳定的VS Code。