[I.2] 个人作业：软件案例分析

[I.2] 个人作业：软件案例分析

项目	内容
这个作业属于哪个工程	2025年春季软件工程（罗杰、任健）
这个作业的要求在哪里	[I.2] 个人作业：软件案例分析
我在这个课程的目标是	学习并应用软件工程的方法论，掌握开发软件的先进工具，开发一款有趣的软件
这个作业在哪个具体方面帮助我实现目标	调研真正面向市场的软件，学习设计理念，体会开发过程中的注意事项

---

选题：

- 类型：开源软件

- 软件名称：drawio-desktop

---

Part/1 调研、评测

draw.io是一款轻量级的开源绘图工具，其桌面版drawio-desktop将核心的draw.io程序包装起来，基于Electron构建，采用Web技术实现跨平台兼容性。作为开源项目，draw.io 拥有活跃的开发者社区，数十位贡献者持续优化代码库，每周迭代更新功能。其功能涵盖流程图、UML 图、网络拓扑图等专业场景，且所有功能完全免费。

软件评测

1）软件使用：

进入draw.io后，我们可以选择”打开现有绘图”或“创建新绘图”。点击“创建新绘图”后，我们进入上图所示页面。在该页面中，我们可以选择空白框图或者基础模版，模版类型丰富、扩展方便。我们还可以选择文件的格式，默认情况下是XML文件（.drawio），也可以选择可编辑位图文件（.png）、可编辑矢量图文件（.svg）、HTML文件（.html）。

这里我们选择了“流程图”基础模版，然后点击“创建”，进入到上图页面，这也是我们的绘图页面。绘图页面大体分为四部分：顶部的菜单栏、左侧的图形组件栏、中间的画布，以及右侧的样式调整栏（可隐藏）。下面以左侧的图形组件栏为例进行介绍。“便笺本”可以保存常用组件（自定义），下次使用时直接点击或拖拽到画布上即可；“通用”包括了常见的文件框、图形和线条；“杂项”提供了标题、列表、表格、超链接等选项；“高级”则包括更复杂的图形组件，如具有子框的框图、T形等；“流程图”则提供了绘制流程图常用的图形组件，如大括号、箭头等；最下方的“更多图形”则提供了更多复杂的图形，这里我们不再展开。我们可以很方便地绘制流程图、UML图等，图形组件的大小、位置、形状、颜色等均可调整，可操作度高，基本可以满足大多数绘图需求。具体的绘图操作这里不再赘述。

点击顶部菜单栏的“文件”选项，我们可以看到上图所示的内容。基本地，我们可以进行文件的导入、导出（包括但不限于PNG、JPEG、WebP、SVG、PDF等格式）；更进一步地，我们可以下载网络或本地资源作为库进行导入并使用，可以调整页面尺寸、更换背景等。

点击顶部菜单栏的“编辑”选项，我们可以看到上图所示的内容。通过选中画布上的已有内容，我们可以进行剪切、复制、删除等操作，也可以修改选中内容的样式等。

“查看”、“调整图形”、“其它”等选项卡提供了语言、主题、布局、视图等一系列选项，我们不再展开。“帮助”选项卡的内容如上图所示，为新用户提供了使用帮助。

2）软件分析：

• 基本使用流程？

  使用流程简洁明了，上手简单，大体可以分为以下几部分：

  1. 选择模版

     用户可以选择在现有模版的基础上扩展，也可以直接创建空白绘图。

  2. 使用组件

     用户可以使用各种图形组件，再配合上文字，来绘制自己想要的图像。

  3. 调整布局、编辑样式

     用户可以使用菜单栏提供的功能调整整体布局，还可以使用右侧样式栏的功能编辑某个组件的样式。

  4. 偏好设置

     用户可以使用菜单栏提供的语言、主题等选项，配置自己个性化的draw.io。

• 是否能够解决用户的需求？

  作为基础绘图软件，draw.io可以绘制类图、流程图、组织结构图、泳道图、E-R图、时序图、思维导图等300余种图表，可以满足大多数基础的绘图需求。

• 软件在数据量/界面/功能/准确度/用户体验上各有什么优缺点？

  1. 数据量
     • 优点：
       1. 海量模板与图形库：内置海量模版与图形库，覆盖教育、工程、软件开发等场景，支持自定义和快速调用符号库；
       2. 格式兼容性强：支持导入导出PNG、JPEG、SVG、PDF、VSDX等20余种格式，满足跨平台协作需求。
     • 缺点：
       1. 高级模版不足：缺乏行业专用的高级模板（如复杂生产流程图或特定领域的主题模板），需用户自行补充。
  2. 界面：
     • 优点：
       1. 简洁直观：拖拽式操作配合智能对齐线，降低学习门槛，适合新手快速上手；
       2. 模块化布局：左侧为图形库，右侧为属性面板，画布可无限扩展，支持快捷键操作（如Ctrl+D复制）提升效率。
     • 缺点：
       1. 细节优化不足：部分对齐功能偶发异常，导出多页面PDF时可能出现排版错位。
  3. 功能：
     • 优点：
       1. 多场景覆盖：支持流程图、思维导图、UML图、网络架构图等专业图表，集成PlantUML语法生成技术图表；
     • 缺点：
       1. 高级功能缺失：自动布局优化较弱，导出Word需依赖第三方工具，缺乏复杂数据处理能力（如自动生成甘特图进度）。
  4. 准确度：
     • 优点：
       1. 矢量图输出精准：导出SVG/PDF时放大不失真，适合嵌入PPT或打印；
       2. 逻辑表达清晰：连接线自动吸附与智能路径规划，确保图表逻辑关系准确。
     • 缺点：
       1. 复杂场景误差：大规模图表中，元素层级管理可能混乱，需手动调整。
  5. 用户体验：
     • 优点：
       1. 免费与跨平台：全平台（Web/Windows/macOS/Linux）免费使用，支持离线桌面版；
       2. 隐私与安全：数据本地存储，无广告干扰。
     • 缺点：
       1. 操作便捷性不足：无自动保存功能，需手动设置保存间隔；技术支持有限，依赖社区或文档自助解决。

3）改进意见：

• Office深度集成：开发Word/PPT插件，支持嵌入可编辑图表，避免当前复制为图片后的二次修改障碍。
• 开发自动布局引擎：引入力导向算法优化复杂流程图布局，解决当前手动调整节点易混乱的问题。
• 智能连接线管理：增加“自动避让重叠路径”和“分支优先级设置”功能，避免大规模图表中的线路交叉。
• 动态数据绑定：支持Excel/CSV数据导入生成动态图表，如甘特图进度自动关联日期字段。
• 插件市场建设：搭建官方插件商店，提供API调试沙盒与盈利分成机制，激励第三方开发者贡献。
• AI辅助生成：集成类似DeepSeek的NLP模型，实现语音描述→Mermaid代码→自动绘图全链路。

4）用户调研：

我选择了谭鑫王德庆老师班的zgy同学进行用户调研，他有较为丰富的绘图经验，下面是我采访的问题：

• 你是通过什么途径了解到draw.io的？
• 你最常用的draw.io版本是？网页版还是桌面端？请简要说明理由。
• 你觉得draw.io模板/图形库的丰富度如何？可以满足你的使用需求吗？
• 采用10分制的话，你会分别给亿图图示和draw.io打多少分？请简单说明扣分项

5）评测结论：

根据上述分析和调研工作，再结合我个人的使用体验，我认为draw.io的合理评价为： d）好，不错。

Bug 分析和提交

1）测试环境：

操作系统为 Windows 11 家庭中文版 ，软件版本为v25.0.2

2）Bug严重性定义：

• 致命（Critical/Blocker）：导致系统崩溃、数据丢失、核心功能完全失效或重大安全漏洞的缺陷。
• 严重（Major）：核心功能未按预期工作，但系统仍可部分运行。
• 一般（Moderate/Medium）：次要功能异常或非核心流程的问题，存在替代解决方案。
• 次要（Minor）：界面显示问题、拼写错误或轻微交互缺陷。
• 建议性（Trivial/Enhancement）：优化建议或非缺陷类改进

Bug1

• 可复现性：稳定复现。
• 描述：画布上使用添加到库中的.svg文件时，如果导出为.png格式，则.svg文件的位置和大小会出现混乱。
• 复现步骤：
  • 创建空白绘图
  • 文件 --> 新增库 --> 向库中添加.svg图片的链接，如：https://www.jenkins.io/images/logos/jenkins/jenkins.svg
  • 从库中添加.svg文件两次，一次缩放，一次正常
  • 在.svg文件周围添加细框以方便演示
  • 使用默认设置导出.png文件
  • 观察.png文件即可发现异常
• bug分析：
  • 严重性：严重。这种场景很有可能出现，且没有较好的代替方案。图片位置大小发生变化属于核心功能未按预期工作，较严重。
  • 可能成因：文件格式转换机制出现问题。
  • 建议：导出的.png图片的呈现效果应该与画布上的效果一致。

Bug2

• 可复现性：稳定复现
• 描述：使用调整图形 --> 插入 --> 图片 来将本地.svg文件添加到画布上时，图片不正确；使用 文件 --> 导入 添加.svg文件时，图片正确。
• 复现步骤：
  • 创建空白绘图
  • 按照 调整图形 --> 插入 --> 图片 的操作顺序来将本地.svg文件添加到画布上
  • 按照 文件 --> 导入 的操作顺序添加.svg文件到画布上
  • 比较即可发现异常
• bug分析：
  • 严重性：一般。虽然属于功能异常，但存在代替方案。
  • 可能成因：接口不统一，版本控制出现问题。
  • 建议：将 调整图形 --> 插入 --> 图片 的接口更改为文件 --> 导入 的接口。

Bug 反馈：

登陆github，进入draw.io仓库，在Issues界面按照模板要求反馈Bug即可。

---

Part/2 分析

1）工作量分析：

基于draw.io当前功能规模和技术架构，假设团队成员包括2名后端开发、2名前端开发、1名UI设计师、1名测试工程师，预计开发周期如下：

• 核心功能开发（4-5个月）

  • 绘图引擎：实现基于SVG/Canvas的矢量图渲染（需解决连接线智能吸附、元素对齐算法）—— 约3个月;

  • 模板与图形库：开发300+基础形状库及行业模板（如UML、网络拓扑图）—— 约1个月。

• 扩展功能开发（2-3个月）

  • 跨平台支持：利用Electron构建桌面端：Windows、macOS、Linux—— 约1个月；

  • 导出与兼容性：支持20+文件格式转换（如PDF、VSDX）—— 约1个月。

• 测试与优化（2-3个月）

  • 性能调优：解决大规模流程图卡顿问题 —— 约1个月。

  • 全平台适配：覆盖主流浏览器及分辨率响应式设计 —— 约1.5个月。

总周期估算：8-11个月（含需求迭代与文档编写）。若采用敏捷开发并复用部分开源组件（如Docker部署方案），可缩短至6-7个月。

2）软件质量分析：

• 优劣对比

  维度	draw.io优势	劣势（对比Visio/Lucidchart）
  功能性	支持各种文件格式	复杂UML时序图生成能力弱于Visio，缺乏Visio的数据联动分析模块
  用户体验	界面简洁易上手，免费无广告	布局在节点较多时易混乱
  扩展性	开放社区无扩展	企业级权限管理（如SAML认证）需付费版支持
  性能	WebAssembly技术实现浏览器端4K渲染	大型流程图（>50MB）内存占用高，偶发崩溃

• 同类产品排名
  当前质量排名（综合功能、用户基数、口碑）：

  1. Microsoft Visio（企业级首选，但付费且封闭）
  2. draw.io（开源免费最佳平衡，全球3000万用户）
  3. Lucidchart（协作体验更优，但订阅制昂贵）

• 软件工程改进建议

  引入WebGL/Canvas渲染引擎（如Fabric.js），减少DOM操作负载，从而改善复杂图表的操作流畅度。

---

Part/3 建议和规划

一、市场现状:

1） 市场概况：

• 用户规模：
  draw.io目前全球用户超过3000万，主要覆盖开发者、项目经理、教育工作者等群体。潜在用户包括中小型企业（需轻量化工具）、教育机构（需免费开源方案）及个人创作者（需跨平台支持），预计潜在市场规模达1.2亿+用户。
• 市场容量：
  全球流程图/架构图工具市场2025年规模约45亿美元（CAGR 8.2%），其中开源工具占比约15%，但增速高达25%。

2）竞争格局：

产品	优势	劣势	市场份额
Microsoft Visio	企业级功能完善（数据联动、合规性）、模板深度	价格高昂（$309/年）、封闭生态、无开源支持	38%
Lucidchart	协作体验优、集成Salesforce/Zoom	订阅制昂贵（$12.5/月）、功能冗余	22%
draw.io	开源免费、跨平台、隐私安全	企业级功能不足、模板垂直度低	18%

3）产品定位与态势：

• 差异化定位：
  draw.io以“开源免费+企业级扩展性”为核心，瞄准技术从业者主导的中小团队，其隐私保护（本地存储）是差异化亮点。
• 竞争态势：
  Visio占据高端市场但用户流失率高达12%（转向开源工具）；Lucidchart依赖订阅制但面临用户成本敏感度上升。draw.io可通过垂直行业模板+企业级插件抢占中间市场。

二、 市场与产品生态：

1）核心用户画像

维度	描述
典型用户	25-40岁技术人员（开发者/架构师/项目经理）、教育从业者（高校教师/学生）
需求特征	表面需求：快速绘图、协作；潜在需求：数据动态绑定、AI辅助设计
行为模式	高频使用模板（70%用户）、偏好离线操作（45%用户）、协作场景集中于技术文档编写

2）用户生态构建

• 群体关系：
  开发者（贡献代码）→ 企业用户（付费插件）→ 教育用户（传播模板），形成开源贡献-商业变现-内容裂变闭环。
• 生态策略：
  建立模板交易平台（用户上传模板获得收益分成），激励教育用户与开发者共创内容。

3）产品生态扩展

• 子产品联动：
  桌面版（本地优先）与在线版（协作场景）共享账号体系，通过AI绘图助手实现跨端数据同步。
• 生态合作：
  与AWS/Azure合作推出云架构图生成器（自动输出Terraform配置），绑定云服务商生态。

三、 产品规划：

1）功能创新（NABCD分析）

维度	内容
Need	用户需快速生成复杂图表（如UML）、企业需合规协作（如权限分级）
Approach	推出AI辅助绘图引擎（文字→图表）、企业版SAML/LDAP集成
Benefit	绘图效率提升60%、满足金融/医疗行业合规需求
Competitors	Visio无AI生成能力，Lucidchart企业功能需额外付费
Delivery	通过开源社区推广AI模型，企业版采用订阅制（$9.9/用户/月）

2）团队配置（6人/16周）

• 角色分配：
  • 全栈开发×2：负责AI引擎、企业版功能
  • 前端开发×1：优化协作界面与性能
  • UI/UX设计师×1：设计AI交互流程
  • 测试工程师×1：自动化测试与压力测试
  • 产品经理×1：协调需求与社区反馈

3）16周执行计划

阶段	周次	目标
需求验证	1-2	用户调研（500份问卷）、竞品功能拆解
原型开发	3-4	AI绘图MVP（支持Mermaid语法转换）、企业权限管理原型
核心开发	5-10	AI模型训练（集成GPT-4）、SAML/LDAP接口开发、性能优化
测试迭代	11-14	企业用户内测（20家）、社区公测（1000+反馈收集）
发布准备	15-16	文档编写、营销素材（案例视频/模板包）、上线应用商店