手写一个 UML 绘图软件

三只萌新
306 阅读4分钟

创建图形.gif

为何想做一款软件

在日常的开发和学习过程中，我们常常致力于实现各种功能点，解决各种 Bug。然而，我们很少有机会去设计和制作属于自己的产品。有时，我们可能认为市面上已有众多类似产品，自己再做一款似乎没有必要；有时，我们又觉得要做的事情太多，不知从何下手。

最近，我意识到仅仅解决单点问题已没有那么吸引我。相反，如果我自己开发一款产品，它能够被其他人使用，这将是一件有意思的事情。

因此，我决定在新的一年里，根据自己熟悉的领域和过去一年的积累，尝试打造一款自己的 UML 桌面端软件。我想知道，自己是否真的能够创造出一款在日常工作中好用的工具。

目前，这个计划中的产品的许多功能点已经在开发计划中。我已经完成了最基础的技术架构，并实现了核心的绘图功能。接下来，让我们一探究竟，看看这款软件目前支持哪些功能点。

技术方案

Monorepo 项目结构

使用了 Monorepo（单一代码仓库）项目管理模式。

  • 这样可以将通用类型和工具方法抽离在 types 包和 utils 包中。
  • 像 graph 这样功能独立的模块也可以单独抽离成包发布。
  • 通过集中管理依赖，可以更容易地确保所有项目使用相同版本的库，并且相同版本的依赖库可以只安装一次。

项目介绍:

  1. 其中 draw-client 是 electron 客户端项目，它依赖自定义的 graph 库。
  2. services 是服务端代码，和 draw-client 同时依赖了，types 和 utils 公共模块。
|-- apps/                      # 包含所有应用程序的代码，每个应用程序可以有自己的目录，如draw-client。
    |-- draw-client/           # 客户端应用程序的主目录
        |-- src
        |-- package.json
        |-- tsconfig.json
|-- packages/                  # 用于存放项目中的多个包或模块，每个包可以独立开发和测试，便于代码复用和维护。
    |-- graph/                 # 包含与图表绘制相关的逻辑和组件，可能是一个通用的图表库。
        |-- src
        |-- package.json
        |-- tsconfig.json
    |-- types/                 # 存放TypeScript类型定义文件，为项目提供类型安全。
        |-- src
        |-- package.json
        |-- tsconfig.json
    |-- utils/                 # 包含工具函数和辅助代码，这些是项目中通用的功能，可以在多个地方复用。
        |-- src
        |-- package.json
        |-- tsconfig.json
|-- services/                  # 服务端代码
    |-- src
    |-- package.json
    |-- tsconfig.json
|-- .npmrc                   
|-- package.json               # 项目的配置文件，包含项目的元数据、依赖项、脚本等，是npm和pnpm管理项目的核心。
|-- pnpm-lock.yaml             # pnpm的锁定文件，确保所有开发者和构建环境中依赖的版本一致。
|-- pnpm-workspace.yaml        # 定义pnpm工作区的结构，允许在同一个仓库中管理多个包的依赖关系。        
|-- REDEME.md                  
|-- tsconfig.base.json         
|-- tsconfig.json             
|-- tsconfig.tsbuildinfo

技术栈相关

涉及的技术架构图如下：

image.png

  • draw-client 相关技术栈

image.png

  • services 相关技术栈

image.png

软件操作流程说明

为了深入理解软件开发的流程，我们将通过两个具体的案例来阐述图形的创建、展示以及动态变化的过程。

创建图形流程

在本节中，我们将详细介绍如何使用我们的图形库来创建图形元素。通过序列图可以了解到一个最简单的图形创建的完整流程如下：

image.png

撤销操作

在软件开发中，撤销操作是一个常见的需求，它允许用户撤销之前的某些操作，恢复到之前的状态。本节将探讨如何在图形编辑器中实现撤销功能。

当我们想要回退某一个步骤时，流程如下：

image.png

规划

目前软件开发还是处于一个初步的阶段，还有很多有趣的功能需要开发。并且软件开发需要大量的时间，我会逐步去开发相关的功能。这不仅是一个技术实现的过程，更是一个不断学习和成长的过程。我计划在以下几个关键领域深入挖掘：

  1. NestJS服务端：我将深入研究NestJS框架，利用其强大的模块化和依赖注入特性，构建一个高效、可扩展的服务端架构。我希望通过实践，掌握NestJS的高级特性。
  2. Electron应用开发：利用Electron框架，将Web应用与桌面应用的优势结合起来。
  3. SVG图形处理：深入SVG的，我将开发相关库，使得用户能够轻松地在应用中绘制和编辑图形。

当然我会也在开发的过程中记录分享到掘金社区，如果有人想要体验和参与的也是非常欢迎！如果对你有帮助感谢点赞关注，可以私信我一起讨论下独立开发相关的话题。

avatar
文章
阅读
粉丝