GoJS 画布编辑器产品系统

G-Diagram 面向企业架构设计、业务流程建模、系统关系梳理和可视化制图场景。在企业数字化建设中，架构师、产品经理、实施顾问和运维人员经常需要绘制流程图、系统架构图、UML 图、模型图例、设备拓扑或业务关系图，用来表达系统边界、业务链路、组件依赖和数据流转关系。
传统绘图工具偏通用，和企业建模场景结合不够紧密；而专业 EAM、BPMN、UML 工具又往往操作复杂、定制成本高。本项目通过 Web 化画布编辑器，将常用建模图元、连线规则、样式编辑、页面设置和导出能力整合在一个轻量前端应用中，适合用于企业内部建模工具、低代码设计器、架构资产管理平台或流程配置平台的画布基础能力。

项目基于 Vue 3、Vite、Pinia、GoJS 和 Tailwind CSS 实现。整体采用“编辑器外壳 + GoJS 画布核心 + 图元库 + 工具命令”的结构：
顶部菜单和工具栏负责撤销重做、复制粘贴、字体样式、颜色、线型、层级、缩放和导出等操作；左侧图元库提供标准图形、几何图形、模型图例、流程图、UML、EAM 标准图元等分类；中间是 GoJS 画布区域，支持节点拖拽、选中、缩放、文本编辑、连线和页面展示；右侧面板用于承载选中对象属性和页面配置能力；底部栏展示画布统计与辅助信息。
状态管理由 Pinia 统一维护，包括当前 Diagram 实例、选中对象、节点/连线数量、缩放比例、工具栏状态和页面设置。GoJS 负责底层图形渲染、模型数据、交互工具、节点模板和连线模板。项目中还封装了节点模板、EAM 图元、画布命令、快捷键、缩放、文本布局、鼠标工具和连线工具，便于后续扩展更多行业图形库和业务规则。

项目支持完整的在线图形编辑流程。用户可以从左侧图元库选择图形并拖拽到画布中，图形落图后可移动、缩放、调整层级、修改填充色、边框色、线宽和文本样式。文本支持居中编辑和自动高度适配，适合在节点内部直接维护说明内容。
连线能力是项目重点之一，支持直线、曲线、折线和管道类型连接器，可设置实线、虚线、点线、起点箭头、终点箭头、折线圆角等样式。管道连线提供流动效果，适合表达系统链路、数据流、流程推进或设备管线等动态关系。
画布层面支持撤销、重做、复制、粘贴、删除、放大、缩小、重置缩放、适应窗口和导出图片。页面配置支持 A4、A3、Letter 等页面尺寸，支持横向/纵向页面、无限画布、背景色、网格显示、网格吸附、连接点开关和跨线跳线等设置。
从扩展性来看，项目已经预留了多类行业图元目录，包括 BPMN 2.0、ArchiMate 3.0、业务流程图例、数据流图、工业组态、电路图形、IT 运维和流程架构等方向，后续可以按业务场景继续补充图元库、属性面板、保存接口、导入导出和协同编辑能力。