本文介绍了如何在魔搭社区创空间中免费创建一个基于代码上传生成系统架构图的应用。利用 Gradio 搭建前端界面，并结合后端 API 实现 Mermaid 图表转换，开发者可快速将代码转化为流程图、类图、时序图等多种架构图。该工具支持多语言、多格式输出，极大提升了技术文档编写的效率，适合不擅长绘图的小白开发者使用。文末附有完整操作教程与项目体验链接，方便读者上手实践。

  软件系统架构图是一种用于描述软件系统内部结构和组件之间关系的图形化工具。它通过可视化的方式展示软件系统的各个组成部分及其相互关系，帮助开发者、项目经理、利益相关者以及其他非技术小组成员更好地理解系统的设计和运作方式。软件系统架构图通常包括分层结构、模块、接口、依赖关系等核心部分，这些元素共同描述了软件系统的物理实现和相互关系。

  软件系统架构图不仅有助于理解系统的整体设计思路，还能在软件开发过程中起到指导作用。例如，它能够在一定程度上帮助研发人员避免模块之间的耦合性过强，提高软件系统的可维护性和扩展性。此外，软件系统架构图还能够适用于指导小组成员协作完成项目，确保所有参与者对系统的理解一致。

  我平时喜欢写写技术文档，不过系统架构图却不擅长。 还在于画系统架构图、数据流程图这些工具在平时使用的过程中不熟悉。

  上期给大家制作了介绍过使用dify实现一个基于代码的自动生成系统架构图的工作流。dify案例分享-用Kimi-K2+Mermaid 神器，一键生成系统架构图！小白也能秒会

  感兴趣小伙伴可以看之前的文章。本期给大家基于魔搭社区创空间免费生成一个基于代码上传生成架构图的创空间应用。

  点击创空间进入创空间页面，页面显示4个步骤 创建空间、搭建应用、发布空间、分享创意 4个步骤。

  目前创建分2种方式，一种是编程式创建、另外一种是交互式创建。 我们这里主要介绍第一种编程式创建。

  管理的云资源这里，目前平台提供免费的CPU 算力和收费GPU 算力。大家通过你自己的业务系统要使用免费或者收费的算力资源。（有模型推理的要选择GPU 算力），我的是调用API 方式，所以最终选择免费的CPU 算力。

  点击右上角空间文件，默认创建1个空的项目，并创建了一个最简单的README.md 文档

  接下来个人会使用开发工具VScode 或者Trae等 开发工具制作一个带有Gradio app.py 文件和项目。

  我这里为了方便演示，就写了个最简单的test.txt 文件，点击左上角源代码管理，这样就显示了我们应该提交代码列表展示了。

  这里有地方必须要格外注意 ，你的代码仓库里面需要有app.py的代码 以及readme.md文档头要有类似下面的代码

  目前也有很多基于vibecoding 编程,能借助AI 的辅助来实现代码实现。不会的小伙伴可以看我之前的文章参考《Claude Code 实战指南：用 AI 玩转终端编程，效率狂飙！》，这里主要是是参考思路，vibecoding 编程也有很多坑需要大家自己去摸索。

  代码上传完成后，平台会对代码进行自动审核，审核通过的代码我们就可以对它进行上线发布了。由于我之前的代码已经上传了没有代码演示了。我们点击上线，程序会自动编译构建发布。

  系统架构图生成器是一个基于AI的智能代码分析和架构图生成工具。它能自动分析各种编程语言的代码结构，并生成专业的系统架构图表，帮助开发者快速理解和文档化复杂的软件系统。

  点击上传后，我在图表类型中可以再一次进行选择（流程图、类图、时序图、组件图）、主题选择（默认、深色、中性、森林）、输出格式 这里我们大家可以选择（PNG、JPG、SVG、PDF）四中格式输出。点击生成架构图，后端代码就会调用MCP-Server实现mermaid 转PNG、JPG、SVG、PDF了。

  我们也点击右边mermaid代码 查看我们上传的代码转成架构图的mermaid代码

  通过这个简单的创应用我们就可以基于主流的编程语言代码生成架构图了。哈哈是不是挺爽的。

  今天主要带大家进一步探索并实践了基于魔搭社区创空间免费生成一个基于代码上传生成架构图的创空间应用的方法。软件系统架构图作为一种重要的图形化工具，对理解和开发软件系统有着诸多益处，而借助魔搭社区创空间能够便捷地创建相关应用。

  这个创应用为开发者提供了一个高效、便捷的架构图生成平台，尤其适合不擅长绘制系统架构图、希望借助工具快速生成架构图的开发者。它的出现为软件开发领域注入了新的活力，有望成为开发者的得力助手。感兴趣的小伙伴可根据本文步骤去尝试使用，体验一键生成架构图的便捷。今天的分享就到这里结束了，我们下一篇文章见。