用 Mermaid 和 OpenMemory 学习 MCP 开发

记录使用Cloudflare开发工程的相关架构设计

深度记录一个困扰一周的技术难题：Next.js项目中集成Mermaid图表缩放功能时，React虚拟DOM与svg-pan-zoom命令式DOM操作产生根本冲突。通过Playwright MCP自动化调试工具最终发现问题根源，并采用iframe沙箱方案彻底解决。本文详细分析踩坑过程、技术选型思考，以及浏览器自动化工具在复杂前端问题调试中的价值。

详细记录了从环境搭建到成功运行第一个 MCP (Model Context Protocol) 天气服务器的完整过程，包括遇到的虚拟环境依赖冲突、网络超时、API 密钥安全等实际问题及解决方案。最终实现了 85.7% 成功率的天气查询服务，支持全球多个城市的实时天气信息获取。

记录一次 Next.js 博客项目中 Mermaid 图表边标签(label)无法显示的真实排查过程，涵盖问题现象、对比分析、依赖链路梳理、社区资料查询、最终定位与最小化修复方案。附详细流程图、表格和经验总结，助你高效解决类似前端集成难题。