跳转至

W32

周刊

8.1.2532 周刊V2532：AI编程：生成Mermaid流程图展示网站

本周感悟

通过AI辅助编程，快速搭建能动态展示Mermaid流程图的网页，探索从“提示词”到“可访问网站”的完整链路。

1. 主线：从AI编程到页面生成

graph TD
    A[AI编程] --> B[Mermaid流程图展示网站]
    B --> C{扣子空间}
    C --> D[提示词设计]
    D --> E[生成页面]
* 关键节点：用“扣子空间”作为AI能力入口，通过精准提示词（比如“生成含Mermaid渲染功能的单页网站，支持代码输入和实时预览”）驱动页面自动生成，省去基础HTML/CSS编写工作 ✨

2. 开发工具：VS Code + Copilot的“双buff”辅助

  • **VS Code编辑器**成了核心战场：
  • 搭配Copilot实时补全代码，尤其在处理Mermaid渲染逻辑（如引入mermaid.js库、配置渲染参数）时，AI直接给出示例代码，效率翻倍；
  • 尝试了“STP插件”模式，配合轻量应用服务器做调试，边写边看效果
  • 由于github的copilot的使用次数受限制，需要付费，最后转为免费的CodeBuddy

3. 部署踩坑记：从SFTP失败到FileZilla救场

想把生成的页面部署到轻量应用服务器，试了两种方案： * SFTP连接：指向“宝塔”面板时失败，提示“22端口连接超时”（不知道密码和密钥）； * FTP连接：用宝塔自带的“pure-FTPd”服务（21端口），搭配FileZilla客户端终于成功上传！
→ 小结论：部署时优先检查端口开放状态和服务进程，可视化工具（如FileZilla）比命令行更适合排查连接问题 🚀

4. 异常处理：成功后的“小插曲”

页面部署成功后，突然遇到**服务器崩溃**，紧急处理流程： 

graph LR
    崩溃 --> 关机[安全关机]
    关机 --> 关FTP[关闭FTP连接]
稳定是一切，关闭了FTP ，使用宝塔手动上网即可

来源