1.前言
软件系统架构图是一种用于描述软件系统内部结构和组件之间关系的图形化工具。它通过可视化的方式展示软件系统的各个组成部分及其相互关系，帮助开发者、项目经理、利益相关者以及其他非技术团队成员更好地理解系统的设计和运作方式。软件系统架构图通常包括分层结构、模块、接口、依赖关系等核心部分，这些元素共同描述了软件系统的物理实现和相互关系。
软件系统架构图不仅有助于理解系统的整体设计思路，还能在软件开发过程中起到指导作用。例如，它可以帮助开发人员避免模块之间的耦合性过强，提高软件系统的可维护性和扩展性。此外，软件系统架构图还可以用于指导团队成员协作完成项目，确保所有参与者对系统的理解一致。
我平时喜欢写写技术文档，不过系统架构图却不擅长。 主要是因为画系统架构图、数据流程图这些工具在平时使用的过程中不熟悉。
上期给大家制作了介绍过使用dify实现一个基于代码的自动生成系统架构图的工作流。 dify案例分享-用Kimi-K2+Mermaid 神器，一键生成系统架构图！小白也能秒会
感兴趣小伙伴可以看之前的文章。本期给大家基于魔搭社区创空间免费生成一个基于代码上传生成架构图的创空间应用。
那么这样创应用是如何制作的呢？话不多少，下面就带大家手把手教你。
2.创应用制作
我们首先需要登录魔搭社区。地址：https://modelscope.cn
点击创空间进入创空间页面，页面显示4个步骤 创建空间、搭建应用、发布空间、分享创意 4个步骤。
目前创建分2种方式，一种是编程式创建、另外一种是交互式创建。 我们这里主要介绍第一种编程式创建。
创应用
我们点创建应用，进入创应用系统创建界面，如下图。
基础信息这里比较简单，填写相关信息就可以了，大家也可以参考我之前做的。
配置这块，目前系统提供Gradio 、Streamlit、Static 三种方式。我的应用是基于Gradio ,所以我选择Gradio 方式创建。
管理的云资源这里，目前平台提供免费的CPU 算力和收费GPU 算力。大家根据自己的业务系统需要使用免费或者收费的算力资源。（有模型推理的需要选择GPU 算力），我的是调用API 方式，所以选择免费的CPU 算力。
镜像版本这里我们系统没有太多要求，就选择最新的版本ubuntu22.04-py311-torch2.3.1-modelscope1.25.0
在高级配置这里我们选择领域和场景即可
以上配置完成后，我们就可以点击创建空间了。
创建完成后我们就可以看到项目已经创建完成如下图
上面 有3个步骤我们按照步骤克隆代码、创建应用、提交代码。
点击右上角空间文件，默认创建1个空的项目，并创建了一个最简单的README.md 文档
克隆代码
接下来我们本地电脑上使用git 客户端工具下载 执行 克隆项目空间命令
git lfs install
git clone http://oauth2:XXXXX@www.modelscope.cn/studios/wwwzhouhui/mermaid_mcp_server1_MCP_Agent_Challenge.git
我们把项目克隆带本地。
编写创应用
接下来我们使用开发工具VScode 或者Trae等 开发工具制作一个带有Gradio app.py 文件和项目。
下面是我创建好的代码。
上面截图是我生成好的代码截图。有了代码就可以点击上传魔搭社区创应用了。
我这里为了方便演示，就写了个最简单的test.txt 文件，点击左上角源代码管理，这样就显示了我们需要提交代码列表展示了。
我们这里点击提交和同步就可以把代码提交到魔搭社区创应用的代码仓库了。
这里有地方需要注意 ，你的代码仓库里面需要有app.py的代码 以及readme.md文档头要有类似下面的代码
---
# 详细文档见https://modelscope.cn/docs/%E5%88%9B%E7%A9%BA%E9%97%B4%E5%8D%A1%E7%89%87
domain: #领域：cv/nlp/audio/multi-modal/AutoML
# - cv
tags: #自定义标签
-
datasets: #关联数据集
evaluation:
#- iic/ICDAR13_HCTR_Dataset
test:
#- iic/MTWI
train:
#- iic/SIBR
models: #关联模型
#- iic/ofa_ocr-recognition_general_base_zh
## 启动文件(若SDK为Gradio/Streamlit，默认为app.py, 若为Static HTML, 默认为index.html)
# deployspec:
# entry_file: app.py
license: Apache License 2.0
---
有的小伙伴说这个代码如何编写，我不太会怎么办？
目前也有很多基于vibecoding 编程,可以借助AI 的辅助来实现代码实现。不会的小伙伴可以看我之前的文章参考《Claude Code 实战指南：用 AI 玩转终端编程，效率狂飙！》，这里主要是是参考思路，vibecoding 编程也有很多坑需要大家自己去摸索。
上线发布
代码上传完成后，平台会对代码进行自动审核，审核通过的代码我们就可以对它进行上线发布了。由于我之前的代码已经上传了没有代码演示了。我们点击上线，程序会自动编译构建发布。
发布
程序上线发布我们就可以在创空间查看到发布的应用了。
上面显示运行中，说明系统是可以访问使用的了。
演示
系统架构图生成器 是一个基于人工智能的智能代码分析和架构图生成工具。它能够自动分析各种编程语言的代码结构，并生成专业的系统架构图表，帮助开发者快速理解和文档化复杂的软件系统。
✨ 功能特点
🔍 智能代码分析
- 多语言支持：Python、JavaScript、Java、C++、Go、TypeScript等
- 深度解析：函数调用关系、类继承结构、模块依赖分析
- 语义理解：基于AI的代码语义分析和业务逻辑提取
📊 多样化图表生成
- 流程图：展示程序执行流程和控制逻辑
- 类图：可视化类之间的关系和继承结构
- 时序图：描述对象间的交互时序
- 组件图：展示系统组件和模块结构
- 架构图：整体系统架构和服务关系
🎨 丰富的输出选项
多种格式：PNG、JPG、SVG、PDF
主题风格：默认、暗黑、中性、森林等主题
自定义尺寸：支持自定义图表尺寸和分辨率
批量导出：一次生成多种格式文件
下面给大家演示一下效果。
我们找一个代码。
实际操作
点击上传后，我在图表类型中可以选择（流程图、类图、时序图、组件图）、主题选择（默认、深色、中性、森林）、输出格式 这里我们可以选择（PNG、JPG、SVG、PDF）四中格式输出。点击生成架构图，后端代码就会调用MCP-Server实现mermaid 转PNG、JPG、SVG、PDF了。
我们也可以点击右边"mermaid代码 " 查看我们上传的代码转成架构图的mermaid代码
通过这个简单的创应用我们就可以基于主流的编程语言代码生成架构图了。哈哈是不是挺爽的。
看到这里的小伙伴觉得项目不错，麻烦您顺手给我点个小红心
项目的体验地址：
https://modelscope.cn/studios/wwwzhouhui/mermaid_mcp_server_gradio_Agent_Challenge
也可以在魔搭社区创应用搜索“mermaid_mcp_server_gradio_Agent_Challenge”
3.总结
今天主要带大家深入了解并实践了基于魔搭社区创空间免费生成一个基于代码上传生成架构图的创空间应用的方法。软件系统架构图作为一种重要的图形化工具，对理解和开发软件系统有着诸多益处，而借助魔搭社区创空间能够便捷地创建相关应用。
这个创应用为开发者提供了一个高效、便捷的架构图生成平台，尤其适合不擅长绘制系统架构图、希望借助工具快速生成架构图的开发者。它的出现为软件开发领域注入了新的活力，有望成为开发者的得力助手。感兴趣的小伙伴可以按照本文步骤去尝试使用，体验一键生成架构图的便捷。今天的分享就到这里结束了，我们下一篇文章见。
项目体验地址
https://modelscope.cn/studios/wwwzhouhui/mermaid_mcp_server_gradio_Agent_Challenge
有魔搭的账号的小伙伴，觉的项目不错麻烦给我点赞。
